Make emoji search view look like other emoji picker tabs (#5756)
This commit is contained in:
parent
e933df7e36
commit
d4884e6215
2 changed files with 108 additions and 1 deletions
|
|
@ -4,6 +4,7 @@ import 'package:emoji_picker_flutter/emoji_picker_flutter.dart';
|
|||
|
||||
import 'package:fluffychat/config/themes.dart';
|
||||
import 'package:fluffychat/l10n/l10n.dart';
|
||||
import 'package:fluffychat/pangea/chat/widgets/pangea_emoji_search_view.dart';
|
||||
import 'chat.dart';
|
||||
|
||||
class ChatEmojiPicker extends StatelessWidget {
|
||||
|
|
@ -89,8 +90,19 @@ class ChatEmojiPicker extends StatelessWidget {
|
|||
bottom: EmojiPickerItem.emojiView,
|
||||
),
|
||||
searchViewConfig: SearchViewConfig(
|
||||
backgroundColor: theme.colorScheme.surface,
|
||||
backgroundColor:
|
||||
theme.colorScheme.surfaceContainer,
|
||||
buttonIconColor: theme.colorScheme.onSurface,
|
||||
customSearchView:
|
||||
(
|
||||
Config config,
|
||||
EmojiViewState state,
|
||||
VoidCallback showEmojiView,
|
||||
) => PangeaEmojiSearchView(
|
||||
config,
|
||||
state,
|
||||
showEmojiView,
|
||||
),
|
||||
),
|
||||
// Pangea#
|
||||
),
|
||||
|
|
|
|||
95
lib/pangea/chat/widgets/pangea_emoji_search_view.dart
Normal file
95
lib/pangea/chat/widgets/pangea_emoji_search_view.dart
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'package:emoji_picker_flutter/emoji_picker_flutter.dart';
|
||||
|
||||
class PangeaEmojiSearchView extends SearchView {
|
||||
const PangeaEmojiSearchView(
|
||||
super.config,
|
||||
super.state,
|
||||
super.showEmojiView, {
|
||||
super.key,
|
||||
});
|
||||
|
||||
@override
|
||||
PangeaEmojiSearchViewState createState() => PangeaEmojiSearchViewState();
|
||||
}
|
||||
|
||||
class PangeaEmojiSearchViewState extends SearchViewState {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
final emojiSize = widget.config.emojiViewConfig.getEmojiSize(
|
||||
constraints.maxWidth,
|
||||
);
|
||||
final emojiBoxSize = widget.config.emojiViewConfig.getEmojiBoxSize(
|
||||
constraints.maxWidth,
|
||||
);
|
||||
|
||||
return Container(
|
||||
color: widget.config.searchViewConfig.backgroundColor,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.max,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
IconButton(
|
||||
onPressed: () {
|
||||
widget.showEmojiView();
|
||||
},
|
||||
color: widget.config.searchViewConfig.buttonIconColor,
|
||||
icon: const Icon(Icons.arrow_back),
|
||||
),
|
||||
Expanded(
|
||||
child: TextField(
|
||||
onChanged: onTextInputChanged,
|
||||
focusNode: focusNode,
|
||||
style: widget.config.searchViewConfig.inputTextStyle,
|
||||
decoration: InputDecoration(
|
||||
border: InputBorder.none,
|
||||
hintText: widget.config.searchViewConfig.hintText,
|
||||
hintStyle: widget.config.searchViewConfig.hintTextStyle,
|
||||
contentPadding: const EdgeInsets.symmetric(
|
||||
horizontal: 16,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
Expanded(
|
||||
child: Material(
|
||||
color: Theme.of(context).colorScheme.onInverseSurface,
|
||||
child: EmojiContainer(
|
||||
color: widget.config.emojiViewConfig.backgroundColor,
|
||||
buttonMode: widget.config.emojiViewConfig.buttonMode,
|
||||
child: GridView.builder(
|
||||
padding: const EdgeInsets.symmetric(vertical: 4.0),
|
||||
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
|
||||
childAspectRatio: 1,
|
||||
crossAxisCount: widget.config.emojiViewConfig.columns,
|
||||
mainAxisSpacing:
|
||||
widget.config.emojiViewConfig.verticalSpacing,
|
||||
crossAxisSpacing:
|
||||
widget.config.emojiViewConfig.horizontalSpacing,
|
||||
),
|
||||
scrollDirection: Axis.vertical,
|
||||
itemCount: results.length,
|
||||
itemBuilder: (context, index) {
|
||||
return buildEmoji(
|
||||
results[index],
|
||||
emojiSize,
|
||||
emojiBoxSize,
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue