emoji_picker_flutter 1.0.3 emoji_picker_flutter: ^1.0.3 copied to clipboard
A Flutter package that provides an Emoji picker widget with 1500+ emojis in 8 categories.
import 'package:emoji_picker_flutter/emoji_picker_flutter.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
/// Example for EmojiPickerFlutter
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
final TextEditingController _controller = TextEditingController();
bool emojiShowing = false;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: const Text('Emoji Picker Example App'),
),
body: Column(
children: [
Expanded(child: Container()),
Container(
height: 66.0,
color: Colors.blue,
child: Row(
children: [
Material(
color: Colors.transparent,
child: IconButton(
onPressed: () {
setState(() {
emojiShowing = !emojiShowing;
});
},
icon: const Icon(
Icons.emoji_emotions,
color: Colors.white,
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: TextFormField(
controller: _controller,
style: const TextStyle(
fontSize: 20.0, color: Colors.black87),
decoration: InputDecoration(
hintText: 'Type a message',
filled: true,
fillColor: Colors.white,
contentPadding: const EdgeInsets.only(
left: 16.0,
bottom: 8.0,
top: 8.0,
right: 16.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(50.0),
),
)),
),
),
Material(
color: Colors.transparent,
child: IconButton(
onPressed: () {
// send message
},
icon: const Icon(
Icons.send,
color: Colors.white,
)),
)
],
)),
Offstage(
offstage: !emojiShowing,
child: SizedBox(
height: 250,
child: EmojiPicker(
onEmojiSelected: (category, emoji) {
_controller
..text += emoji.emoji
..selection = TextSelection.fromPosition(
TextPosition(offset: _controller.text.length));
},
config: const Config(
columns: 7,
emojiSizeMax: 32.0,
verticalSpacing: 0,
horizontalSpacing: 0,
initCategory: Category.RECENT,
bgColor: Color(0xFFF2F2F2),
indicatorColor: Colors.blue,
iconColor: Colors.grey,
iconColorSelected: Colors.blue,
progressIndicatorColor: Colors.blue,
showRecentsTab: true,
recentsLimit: 28,
noRecentsText: 'No Recents',
noRecentsStyle:
TextStyle(fontSize: 20, color: Colors.black26),
categoryIcons: CategoryIcons(),
buttonMode: ButtonMode.MATERIAL)),
),
),
],
),
),
);
}
}