Henry-Hiles/material_emoji_picker
Watch
1
0
Fork
You've already forked material_emoji_picker
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

use a sliver-based approach

Browse source
This commit is contained in:
Henry Hiles 2026-09-17 11:13:36 -04:00
commit 67a31eb1fd
Signed by: Henry-Hiles
SSH key fingerprint: SHA256:VKQUdS31Q90KvX7EkKMHMBpUspcmItAh86a+v7PGiIs
3 changed files with 163 additions and 123 deletions
Download patch file Download diff file Expand all files Collapse all files

275
lib/src/widgets/emoji_picker.dart
View file

@ -1,55 +1,35 @@
import "dart:async"; import "dart:async";
import "package:collection/collection.dart";
import "package:fast_immutable_collections/fast_immutable_collections.dart"; import "package:fast_immutable_collections/fast_immutable_collections.dart";
import "package:flutter_hooks/flutter_hooks.dart"; import "package:flutter_hooks/flutter_hooks.dart";
import "package:hooks_riverpod/hooks_riverpod.dart"; import "package:hooks_riverpod/hooks_riverpod.dart";
import "package:material_ui/material_ui.dart"; import "package:material_ui/material_ui.dart";
import "package:material_emoji_picker/src/controllers/emoji.dart"; import "package:material_emoji_picker/src/controllers/emoji.dart";
import "package:material_emoji_picker/src/models/emoji_category.dart"; import "package:material_emoji_picker/src/models/emoji_category.dart";
import "package:super_sliver_list/super_sliver_list.dart";
final class const EmojiPicker({ class EmojiPicker extends HookConsumerWidget {
final IList<EmojiCategory> prependCategories = const IList.empty(), const EmojiPicker({
final IList<EmojiCategory> appendCategories = const IList.empty(), this.prependCategories = const IList.empty(),
required final FutureOr<void> Function(String value) onSelection, this.appendCategories = const IList.empty(),
final bool allowFreeText = false, required this.onSelection,
super.key, this.allowFreeText = false,
}) extends HookConsumerWidget { super.key,
});
final IList<EmojiCategory> prependCategories;
final IList<EmojiCategory> appendCategories;
final FutureOr<void> Function(String value) onSelection;
final bool allowFreeText;
@override @override
Widget build(BuildContext context, WidgetRef ref) { Widget build(BuildContext context, WidgetRef ref) {
final selectedCategory = useState<int?>(null); final selectedCategory = useState<int>(0);
final search = useState(""); final search = useState("");
final scrollController = useScrollController(); final scrollController = useScrollController();
final listController = useMemoized(ListController.new); final scrollViewKey = useMemoized(() => GlobalKey());
final categoryScrollController = useScrollController(); final categoryScrollController = useScrollController();
final categoryListController = useMemoized(ListController.new);
useEffect(() {
void onChange() {
final range = listController.visibleRange;
if (range != null) {
final firstVisible = range.$1;
if (selectedCategory.value != firstVisible) {
WidgetsBinding.instance.addPostFrameCallback((_) {
selectedCategory.value = firstVisible;
categoryListController.animateToItem(
index: firstVisible,
scrollController: categoryScrollController,
alignment: 0,
duration: (_) => Duration(milliseconds: 300),
curve: (_) => Curves.easeInOut,
);
});
}
}
}
listController.addListener(onChange);
return () => listController.removeListener(onChange);
}, [listController]);
return Container( return Container(
padding: .all(16), padding: .all(16),
@ -64,6 +44,63 @@ final class const EmojiPicker({
prependCategories.addAll(categories).addAll(appendCategories), prependCategories.addAll(categories).addAll(appendCategories),
); );
final headerKeys = useMemoized(
() =>
List.generate(combined.length, (_) => GlobalKey()).toIList(),
[combined],
);
final chipKeys = useMemoized(
() =>
List.generate(combined.length, (_) => GlobalKey()).toIList(),
[combined],
);
useEffect(() {
void syncSelectedCategoryWithScroll() async {
final viewport =
scrollViewKey.currentContext?.findRenderObject()
as RenderBox?;
if (viewport == null) return;
var firstVisibleIndex = 0;
for (var index = 0; index < headerKeys.length; index++) {
final header = headerKeys[index].currentContext
?.findRenderObject();
if (header is! RenderBox) continue;
final headerTop = header
.localToGlobal(Offset.zero, ancestor: viewport)
.dy;
if (headerTop > 1) break;
firstVisibleIndex = index;
}
if (firstVisibleIndex != selectedCategory.value) {
selectedCategory.value = firstVisibleIndex;
final chipContext =
chipKeys[firstVisibleIndex].currentContext;
if (chipContext != null) {
await Scrollable.ensureVisible(
chipContext,
duration: Duration(milliseconds: 300),
curve: Curves.easeInOut,
alignment: 0,
);
}
}
}
scrollController.addListener(syncSelectedCategoryWithScroll);
return () => scrollController.removeListener(
syncSelectedCategoryWithScroll,
);
}, [scrollController, headerKeys]);
return Column( return Column(
children: [ children: [
SearchBar( SearchBar(
@ -85,96 +122,108 @@ final class const EmojiPicker({
height: 48, height: 48,
child: Scrollbar( child: Scrollbar(
controller: categoryScrollController, controller: categoryScrollController,
child: SuperListView( child: ListView(
padding: .only(bottom: 12), padding: .only(bottom: 12),
scrollDirection: .horizontal, scrollDirection: .horizontal,
controller: categoryScrollController, controller: categoryScrollController,
listController: categoryListController, children: [
children: combined for (final (index, category) in combined.indexed)
.mapIndexed( Padding(
(index, category) => Padding( key: chipKeys[index],
padding: .symmetric(horizontal: 4), padding: .symmetric(horizontal: 4),
child: FilterChip( child: FilterChip(
label: Text(category.name), label: Text(category.name),
avatar: category.icon, avatar: category.icon,
selected: selectedCategory.value == index, selected: selectedCategory.value == index,
showCheckmark: false, showCheckmark: false,
onSelected: (_) { onSelected: (_) {
selectedCategory.value = index; selectedCategory.value = index;
final headerContext =
listController.animateToItem( headerKeys[index].currentContext;
index: index, if (headerContext != null) {
scrollController: scrollController, Scrollable.ensureVisible(
curve: (_) => Curves.easeInOut, headerContext,
duration: (_) => duration: Duration(milliseconds: 300),
Duration(milliseconds: 300), curve: Curves.easeInOut,
alignment: 0, alignment: 0,
); );
}, }
), },
), ),
) ),
.toList(), ],
), ),
), ),
), ),
Expanded( Expanded(
child: SuperListView.builder( child: CustomScrollView(
listController: listController, key: scrollViewKey,
controller: scrollController, controller: scrollController,
itemCount: combined.length, slivers: [
itemBuilder: (context, index) { for (final (index, category) in combined.indexed)
final category = combined[index]; Builder(
final emojis = search.value.isEmpty builder: (context) {
? category.emojis final headerKey = headerKeys[index];
: category.emojis final emojis = search.value.isEmpty
.where( ? category.emojis
(emoji) => : category.emojis
emoji.aliases.join().contains( .where(
search.value, (emoji) =>
) || emoji.aliases.join().contains(
emoji.description.contains( search.value,
search.value, ) ||
) || emoji.description.contains(
emoji.tags.join().contains(search.value), search.value,
) ) ||
.toIList(); emoji.tags.join().contains(
search.value,
),
)
.toIList();
if (emojis.isEmpty) return SizedBox.shrink(); if (emojis.isEmpty) {
return SliverToBoxAdapter(
return Column( child: SizedBox.shrink(key: headerKey),
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
category.name,
style: Theme.of(context).textTheme.titleMedium,
),
GridView.builder(
gridDelegate:
const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 56,
mainAxisExtent: 56,
),
itemCount: emojis.length,
shrinkWrap: true,
controller: scrollController,
itemBuilder: (context, index) {
final emoji = emojis[index];
return IconButton(
padding: EdgeInsets.zero,
onPressed: () => onSelection(emoji.value),
icon: SizedBox.square(
dimension: 36,
child: FittedBox(child: emoji.widget),
),
); );
}, }
),
SizedBox(height: 4), return SliverMainAxisGroup(
], slivers: [
); SliverToBoxAdapter(
}, child: Text(
key: headerKey,
category.name,
style: Theme.of(context)
.textTheme
.titleMedium,
),
),
SliverGrid.builder(
gridDelegate:
const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 56,
mainAxisExtent: 56,
),
itemCount: emojis.length,
itemBuilder: (context, index) {
final emoji = emojis[index];
return IconButton(
padding: EdgeInsets.zero,
onPressed: () => onSelection(emoji.value),
icon: SizedBox.square(
dimension: 36,
child: FittedBox(child: emoji.widget),
),
);
},
),
SliverToBoxAdapter(child: SizedBox(height: 4)),
],
);
},
),
],
), ),
), ),
], ],

8
pubspec.lock
View file

@ -581,14 +581,6 @@ packages:
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "1.4.1" version: "1.4.1"
super_sliver_list:
dependency: "direct main"
description:
name: super_sliver_list
sha256: b1e1e64d08ce40e459b9bb5d9f8e361617c26b8c9f3bb967760b0f436b6e3f56
url: "https://pub.dev"
source: hosted
version: "0.4.1"
term_glyph: term_glyph:
dependency: transitive dependency: transitive
description: description:

1
pubspec.yaml
View file

@ -25,7 +25,6 @@ dependencies:
json_annotation: ^4.12.0 json_annotation: ^4.12.0
flutter_hooks: ^0.21.3+1 flutter_hooks: ^0.21.3+1
http: ^1.6.0 http: ^1.6.0
super_sliver_list: ^0.4.1
material_ui: ^1.2.0 material_ui: ^1.2.0
dev_dependencies: dev_dependencies: