fix performance issues with new emoji picker

This commit is contained in:
Henry Hiles 2026-09-16 11:41:11 -04:00
commit 3af38e615e
Signed by: Henry-Hiles
SSH key fingerprint: SHA256:VKQUdS31Q90KvX7EkKMHMBpUspcmItAh86a+v7PGiIs

View file

@ -14,17 +14,7 @@ final class const EmojiPicker({
super.key, super.key,
}) extends HookConsumerWidget { }) extends HookConsumerWidget {
@override @override
Widget build(BuildContext context, WidgetRef ref) => Container( Widget build(BuildContext context, WidgetRef ref) {
padding: .symmetric(horizontal: 16),
constraints: .loose(.new(500, 700)),
child: ref
.watch(EmojiController.provider)
.betterWhen(
data: (categories) {
final combined = categories.addAll(extraCategories);
return HookBuilder(
builder: (context) {
final selectedCategory = useState<int?>(null); final selectedCategory = useState<int?>(null);
final scrollController = useScrollController(); final scrollController = useScrollController();
final listController = useMemoized(ListController.new); final listController = useMemoized(ListController.new);
@ -46,6 +36,15 @@ final class const EmojiPicker({
return () => listController.removeListener(onChange); return () => listController.removeListener(onChange);
}, [listController]); }, [listController]);
return Container(
padding: .symmetric(horizontal: 16),
constraints: .loose(.new(500, 700)),
child: ref
.watch(EmojiController.provider)
.betterWhen(
data: (categories) {
final combined = categories.addAll(extraCategories);
return Column( return Column(
spacing: 4, spacing: 4,
children: [ children: [
@ -98,24 +97,22 @@ final class const EmojiPicker({
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
DividerText(category.name), DividerText(category.name),
DefaultTextStyle( Wrap(
style: TextStyle(fontSize: 24),
child: GridView(
gridDelegate:
const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 52,
mainAxisExtent: 52,
),
children: category.emojis children: category.emojis
.map( .map(
(emoji) => IconButton( (emoji) => IconButton(
onPressed: () {}, onPressed: () {},
icon: emoji.widget, icon: SizedBox.square(
dimension: 36,
child: FittedBox(
fit: .contain,
child: emoji.widget,
),
),
), ),
) )
.toList(), .toList(),
), ),
),
], ],
); );
}, },
@ -124,8 +121,7 @@ final class const EmojiPicker({
], ],
); );
}, },
);
},
), ),
); );
} }
}