mirror of
https://github.com/block/buzz.git
synced 2026-10-27 04:30:52 +00:00
a0298539f7
## Summary - add mobile editing for display name, profile description, and profile photo - support image positioning, emoji backgrounds, and animated avatar capture with native iOS controls - refine settings navigation, profile motion, and the connection identity row ## Testing - `just mobile-check` - `just mobile-test` (1,685 tests) --------- Signed-off-by: kenny lopez <klopez4212@gmail.com> Signed-off-by: Kenny Lopez <klopez4212@gmail.com> Co-authored-by: Carl <3c4caeafb646d23867f1c4832e68211d77e2561946171625f75c3ce1a3f2670f@buzz.block.builderlab.xyz>
86 lines
2.7 KiB
Dart
86 lines
2.7 KiB
Dart
import 'dart:async';
|
|
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter/services.dart';
|
|
|
|
import '../../shared/emoji/emoji_avatar.dart';
|
|
import '../../shared/theme/theme.dart';
|
|
|
|
/// Vertical preview shift shared by background editors.
|
|
const avatarBackgroundPreviewShift = 136.0;
|
|
|
|
/// The shared background-color grid used by emoji and animated avatars.
|
|
class AvatarBackgroundGrid extends StatelessWidget {
|
|
/// Creates a fixed grid of avatar background colors.
|
|
const AvatarBackgroundGrid({
|
|
super.key,
|
|
required this.selectedColor,
|
|
required this.onColorSelected,
|
|
this.colorKeyPrefix = 'avatar-background-color',
|
|
});
|
|
|
|
/// The ARGB value of the currently selected background color.
|
|
final int selectedColor;
|
|
|
|
/// Called with the selected ARGB value when the user taps a color.
|
|
final ValueChanged<int> onColorSelected;
|
|
|
|
/// Prefix used for each color option's test key.
|
|
final String colorKeyPrefix;
|
|
|
|
@override
|
|
Widget build(BuildContext context) => GridView.builder(
|
|
shrinkWrap: true,
|
|
primary: false,
|
|
padding: EdgeInsets.zero,
|
|
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
|
|
crossAxisCount: 6,
|
|
crossAxisSpacing: Grid.xxs,
|
|
mainAxisSpacing: Grid.xs,
|
|
),
|
|
itemCount: emojiAvatarColors.length,
|
|
itemBuilder: (context, index) {
|
|
final color = emojiAvatarColors[index];
|
|
final isSelected = color == selectedColor;
|
|
return Center(
|
|
child: Semantics(
|
|
selected: isSelected,
|
|
label: 'Avatar color ${index + 1}',
|
|
child: InkWell(
|
|
key: ValueKey('$colorKeyPrefix-$index'),
|
|
borderRadius: BorderRadius.circular(Radii.full),
|
|
onTap: () {
|
|
unawaited(HapticFeedback.selectionClick());
|
|
onColorSelected(color);
|
|
},
|
|
child: Container(
|
|
width: 52,
|
|
height: 52,
|
|
padding: const EdgeInsets.all(5),
|
|
decoration: BoxDecoration(
|
|
color: Color(color),
|
|
shape: BoxShape.circle,
|
|
border: Border.all(color: context.colors.outlineVariant),
|
|
),
|
|
child: isSelected
|
|
? DecoratedBox(
|
|
decoration: BoxDecoration(
|
|
shape: BoxShape.circle,
|
|
border: Border.all(
|
|
color: _selectionColor(Color(color)),
|
|
width: 3,
|
|
),
|
|
),
|
|
)
|
|
: null,
|
|
),
|
|
),
|
|
),
|
|
);
|
|
},
|
|
);
|
|
}
|
|
|
|
Color _selectionColor(Color color) =>
|
|
color.computeLuminance() > 0.55 ? const Color(0xFF111111) : Colors.white;
|