Add Backspace Button and Callback Method (#14)

Fintasys · May 14, 2021 · 2927f83 · 2927f83
1 parent ab87faa
commit 2927f83
Show file tree

Hide file tree

Showing 10 changed files with 251 additions and 185 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ## 1.0.5
 
 * Fix appearance of emoji when device font size is not default 🖥
+* Add Backspace-Button & OnBackspacePressed-Callback for easier deletion of added Emoji's
 
 ## 1.0.4
 

diff --git a/README.md b/README.md
@@ -29,6 +29,10 @@ EmojiPicker(
     onEmojiSelected: (category, emoji) {
         // Do something when emoji is tapped
     },
+    onBackspacePressed: () {
+        // Backspace-Button tapped logic
+        // Remove this line to also remove the button in the UI
+    },
     config: Config(
         columns: 7,
         emojiSizeMax: 32.0,
@@ -66,13 +70,19 @@ See the [demo](https://github.com/Fintasys/emoji_picker_flutter/blob/master/exam
 | iconColor    | The color of the category icons                                                       | Colors.grey      |
 | iconColorSelected      | The color of the category icon when selected                                                 | Colors.blue |
 | progressIndicatorColor     | The color of the loading indicator during initalization                                | Colors.blue     |
+| backspaceColor     | The color of the backspace icon button                               | Colors.blue     |
 | showRecentsTab     | Show extra tab with recently used emoji                                | true     |
 | recentsLimit     | Limit of recently used emoji that will be saved                                | 28     |
 | noRecentsText     | The text to be displayed if no recent emojis to display                                | "No Recents"     |
 | noRecentsStyle     | The text style for [noRecentsText]                                | TextStyle(fontSize:  20, color:  Colors.black26)     |
 | categoryIcons     | Determines the icon to display for each Category. You can change icons by setting them in the constructor.                               | CategoryIcons()     |
 | buttonMode     | Choose between Material and Cupertino button style                                | ButtonMode.MATERIAL     |
 
+## Backspace-Button
+You can add an Backspace-Button to the end category list by adding the callback method `onBackspacePressed: () { }` to the EmojiPicker-Widget. This will make it easier for your user to remove an added Emoji without showing the keyboard. Check out the example for more details about usage.
+
+<img src="https://raw.githubusercontent.com/Fintasys/emoji_picker_flutter/master/screenshot/backspace.png" width="300">
+
 ## Custom view
 The appearance is completely customizable by setting `customWidget` property. If properties in Config are not enough you can inherit from `EmojiPickerBuilder` (recommended but not necessary) to make further adjustments. 
 ```

diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -15,6 +15,20 @@ class _MyAppState extends State<MyApp> {
   final TextEditingController _controller = TextEditingController();
   bool emojiShowing = false;
 
+  _onEmojiSelected(Emoji emoji) {
+    _controller
+      ..text += emoji.emoji
+      ..selection = TextSelection.fromPosition(
+          TextPosition(offset: _controller.text.length));
+  }
+
+  _onBackspacePressed() {
+    _controller
+      ..text = _controller.text.characters.skipLast(1).toString()
+      ..selection = TextSelection.fromPosition(
+          TextPosition(offset: _controller.text.length));
+  }
+
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
@@ -86,11 +100,9 @@ class _MyAppState extends State<MyApp> {
                 height: 250,
                 child: EmojiPicker(
                     onEmojiSelected: (Category category, Emoji emoji) {
-                      _controller
-                        ..text += emoji.emoji
-                        ..selection = TextSelection.fromPosition(
-                            TextPosition(offset: _controller.text.length));
+                      _onEmojiSelected(emoji);
                     },
+                    onBackspacePressed: _onBackspacePressed,
                     config: const Config(
                         columns: 7,
                         emojiSizeMax: 32.0,
@@ -102,6 +114,7 @@ class _MyAppState extends State<MyApp> {
                         iconColor: Colors.grey,
                         iconColorSelected: Colors.blue,
                         progressIndicatorColor: Colors.blue,
+                        backspaceColor: Colors.blue,
                         showRecentsTab: true,
                         recentsLimit: 28,
                         noRecentsText: 'No Recents',

diff --git a/example/pubspec.lock b/example/pubspec.lock
@@ -2,7 +2,7 @@
 # See https://dart.dev/tools/pub/glossary#lockfile
 packages:
   characters:
-    dependency: transitive
+    dependency: "direct main"
     description:
       name: characters
       url: "https://pub.dartlang.org"

diff --git a/example/pubspec.yaml b/example/pubspec.yaml
@@ -8,6 +8,7 @@ environment:
 dependencies:
   flutter:
     sdk: flutter
+  characters: ^1.1.0
 
   emoji_picker_flutter:
     path: ../

diff --git a/lib/src/config.dart b/lib/src/config.dart
@@ -18,6 +18,7 @@ class Config {
       this.iconColor = Colors.grey,
       this.iconColorSelected = Colors.blue,
       this.progressIndicatorColor = Colors.blue,
+      this.backspaceColor = Colors.blue,
       this.showRecentsTab = true,
       this.recentsLimit = 28,
       this.noRecentsText = 'No Recents',
@@ -58,6 +59,9 @@ class Config {
   /// The color of the loading indicator during initalization
   final Color progressIndicatorColor;
 
+  /// The color of the backspace icon button
+  final Color backspaceColor;
+
   /// Show extra tab with recently used emoji
   final bool showRecentsTab;
 

diff --git a/lib/src/default_emoji_picker_view.dart b/lib/src/default_emoji_picker_view.dart
@@ -36,6 +36,24 @@ class _DefaultEmojiPickerViewState extends State<DefaultEmojiPickerView>
     super.initState();
   }
 
+  Widget _buildBackspaceButton() {
+    if (widget.state.onBackspacePressed != null) {
+      return Material(
+        type: MaterialType.transparency,
+        child: IconButton(
+            padding: const EdgeInsets.only(bottom: 2),
+            icon: Icon(
+              Icons.backspace,
+              color: widget.config.backspaceColor,
+            ),
+            onPressed: () {
+              widget.state.onBackspacePressed!();
+            }),
+      );
+    }
+    return Container();
+  }
+
   @override
   Widget build(BuildContext context) {
     return LayoutBuilder(
@@ -46,21 +64,28 @@ class _DefaultEmojiPickerViewState extends State<DefaultEmojiPickerView>
           color: widget.config.bgColor,
           child: Column(
             children: [
-              TabBar(
-                labelColor: widget.config.iconColorSelected,
-                indicatorColor: widget.config.indicatorColor,
-                unselectedLabelColor: widget.config.iconColor,
-                controller: _tabController,
-                labelPadding: EdgeInsets.zero,
-                onTap: (index) {
-                  _pageController!.jumpToPage(index);
-                },
-                tabs: widget.state.categoryEmoji
-                    .asMap()
-                    .entries
-                    .map<Widget>(
-                        (item) => _buildCategory(item.key, item.value.category))
-                    .toList(),
+              Row(
+                children: [
+                  Expanded(
+                    child: TabBar(
+                      labelColor: widget.config.iconColorSelected,
+                      indicatorColor: widget.config.indicatorColor,
+                      unselectedLabelColor: widget.config.iconColor,
+                      controller: _tabController,
+                      labelPadding: EdgeInsets.zero,
+                      onTap: (index) {
+                        _pageController!.jumpToPage(index);
+                      },
+                      tabs: widget.state.categoryEmoji
+                          .asMap()
+                          .entries
+                          .map<Widget>((item) =>
+                              _buildCategory(item.key, item.value.category))
+                          .toList(),
+                    ),
+                  ),
+                  _buildBackspaceButton(),
+                ],
               ),
               Flexible(
                 child: PageView.builder(