Ecosystem/stack_wallet
1
0
Fork 0
mirror of https://github.com/cypherstack/stack_wallet.git synced 2025-03-30 11:08:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

emoji search

Browse source
This commit is contained in:
julian 2022-11-25 16:49:43 -06:00
parent 276d08d22f
commit 4b0d44a239
1 changed files with 143 additions and 35 deletions

178
lib/widgets/emoji_select_sheet.dart
View file

@ -1,14 +1,19 @@
import 'package:emojis/emoji.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:stackwallet/utilities/assets.dart';
import 'package:stackwallet/utilities/constants.dart';
import 'package:stackwallet/utilities/text_styles.dart';
import 'package:stackwallet/utilities/theme/stack_colors.dart';
import 'package:stackwallet/utilities/util.dart';
import 'package:stackwallet/widgets/conditional_parent.dart';
import 'package:stackwallet/widgets/desktop/secondary_button.dart';
import 'package:stackwallet/widgets/icon_widgets/x_icon.dart';
import 'package:stackwallet/widgets/stack_text_field.dart';
import 'package:stackwallet/widgets/textfield_icon_button.dart';
class EmojiSelectSheet extends ConsumerWidget {
class EmojiSelectSheet extends ConsumerStatefulWidget {
const EmojiSelectSheet({
Key? key,
}) : super(key: key);
@ -18,17 +23,59 @@ class EmojiSelectSheet extends ConsumerWidget {
final double minimumEmojiSpacing = 25;
@override
Widget build(BuildContext context, WidgetRef ref) {
final isDesktop = Util.isDesktop;
ConsumerState<EmojiSelectSheet> createState() => _EmojiSelectSheetState();
}
class _EmojiSelectSheetState extends ConsumerState<EmojiSelectSheet> {
final isDesktop = Util.isDesktop;
late final TextEditingController _searchController;
late final FocusNode _searchFocusNode;
late final double horizontalPadding = 24;
late final double emojiSize = 24;
late final double minimumEmojiSpacing = 25;
String _searchTerm = "";
List<Emoji> filtered(String text) {
if (text.isEmpty) {
return Emoji.all();
}
text = text.toLowerCase();
return Emoji.all()
.where((e) => e.keywords
.where(
(e) => e.contains(text),
)
.isNotEmpty)
.toList(growable: false);
}
@override
void initState() {
_searchController = TextEditingController();
_searchFocusNode = FocusNode();
super.initState();
}
@override
void dispose() {
_searchController.dispose();
_searchFocusNode.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
final size = isDesktop ? const Size(600, 700) : MediaQuery.of(context).size;
final double maxHeight = size.height * 0.60;
final double availableWidth = size.width - (2 * horizontalPadding);
final int emojisPerRow =
final maxHeight = size.height * (isDesktop ? 0.6 : 0.9);
final availableWidth = size.width - (2 * horizontalPadding);
final emojisPerRow =
((availableWidth - emojiSize) ~/ (emojiSize + minimumEmojiSpacing)) + 1;
final itemCount = Emoji.all().length;
return ConditionalParent(
condition: !isDesktop,
builder: (child) => Container(
@ -81,40 +128,101 @@ class EmojiSelectSheet extends ConsumerWidget {
: STextStyles.pageTitleH2(context),
textAlign: TextAlign.left,
),
SizedBox(
height: isDesktop ? 16 : 12,
),
ClipRRect(
borderRadius: BorderRadius.circular(
Constants.size.circularBorderRadius,
),
child: TextField(
autocorrect: Util.isDesktop ? false : true,
enableSuggestions: Util.isDesktop ? false : true,
controller: _searchController,
focusNode: _searchFocusNode,
onChanged: (newString) {
setState(() => _searchTerm = newString);
},
style: STextStyles.field(context),
decoration: standardInputDecoration(
"Search",
_searchFocusNode,
context,
).copyWith(
prefixIcon: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 10,
vertical: 16,
),
child: SvgPicture.asset(
Assets.svg.search,
width: 16,
height: 16,
),
),
suffixIcon: _searchController.text.isNotEmpty
? Padding(
padding: const EdgeInsets.only(right: 0),
child: UnconstrainedBox(
child: Row(
children: [
TextFieldIconButton(
child: const XIcon(),
onTap: () async {
setState(() {
_searchController.text = "";
_searchTerm = "";
});
},
),
],
),
),
)
: null,
),
),
),
SizedBox(
height: isDesktop ? 28 : 16,
),
Flexible(
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Flexible(
child: GridView.builder(
itemCount: itemCount,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: emojisPerRow,
),
itemBuilder: (context, index) {
final emoji = Emoji.all()[index];
return GestureDetector(
onTap: () {
Navigator.of(context).pop(emoji);
},
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100),
color: Colors.transparent,
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
emoji.char,
style: isDesktop
? STextStyles.desktopTextSmall(context)
: null,
),
),
Expanded(
child: Builder(
builder: (context) {
final emojis = filtered(_searchTerm);
final itemCount = emojis.length;
return GridView.builder(
itemCount: itemCount,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: emojisPerRow,
),
itemBuilder: (context, index) {
final emoji = emojis[index];
return GestureDetector(
onTap: () {
Navigator.of(context).pop(emoji);
},
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100),
color: Colors.transparent,
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
emoji.char,
style: isDesktop
? STextStyles.desktopTextSmall(context)
: null,
),
),
),
);
},
);
},
),