From 1321190926ca67b9c6d7b5a9fe427560cc59de03 Mon Sep 17 00:00:00 2001 From: joahyan Date: Mon, 18 Jul 2022 16:39:32 +0800 Subject: [PATCH] add Emoji --- example/lib/pages/home_page.dart | 5 +- .../Flutter/GeneratedPluginRegistrant.swift | 4 + lib/src/widgets/toolbar.dart | 14 +++ lib/src/widgets/toolbar/emoji_button.dart | 111 ++++++++++++++++++ pubspec.yaml | 3 +- 5 files changed, 133 insertions(+), 4 deletions(-) create mode 100644 lib/src/widgets/toolbar/emoji_button.dart diff --git a/example/lib/pages/home_page.dart b/example/lib/pages/home_page.dart index 3bc1f2ca..e0857ca5 100644 --- a/example/lib/pages/home_page.dart +++ b/example/lib/pages/home_page.dart @@ -6,7 +6,6 @@ import 'package:file_picker/file_picker.dart'; import 'package:filesystem_picker/filesystem_picker.dart'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:flutter/services.dart'; import 'package:flutter_quill/flutter_quill.dart' hide Text; import 'package:path/path.dart'; import 'package:path_provider/path_provider.dart'; @@ -32,8 +31,8 @@ class _HomePageState extends State { Future _loadFromAssets() async { try { - final result = await rootBundle.loadString('assets/sample_data.json'); - final doc = Document.fromJson(jsonDecode(result)); + // final result = await rootBundle.loadString('assets/sample_data.json'); + final doc = Document.fromJson(jsonDecode('[{}]')); setState(() { _controller = QuillController( document: doc, selection: const TextSelection.collapsed(offset: 0)); diff --git a/example/macos/Flutter/GeneratedPluginRegistrant.swift b/example/macos/Flutter/GeneratedPluginRegistrant.swift index 49dbe0da..10f309c7 100644 --- a/example/macos/Flutter/GeneratedPluginRegistrant.swift +++ b/example/macos/Flutter/GeneratedPluginRegistrant.swift @@ -6,11 +6,15 @@ import FlutterMacOS import Foundation import device_info_plus_macos +import emoji_picker_flutter import path_provider_macos +import shared_preferences_macos import url_launcher_macos func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) { DeviceInfoPlusMacosPlugin.register(with: registry.registrar(forPlugin: "DeviceInfoPlusMacosPlugin")) + EmojiPickerFlutterPlugin.register(with: registry.registrar(forPlugin: "EmojiPickerFlutterPlugin")) PathProviderPlugin.register(with: registry.registrar(forPlugin: "PathProviderPlugin")) + SharedPreferencesPlugin.register(with: registry.registrar(forPlugin: "SharedPreferencesPlugin")) UrlLauncherPlugin.register(with: registry.registrar(forPlugin: "UrlLauncherPlugin")) } diff --git a/lib/src/widgets/toolbar.dart b/lib/src/widgets/toolbar.dart index 62aa0211..d1399d1c 100644 --- a/lib/src/widgets/toolbar.dart +++ b/lib/src/widgets/toolbar.dart @@ -13,6 +13,7 @@ import 'toolbar/arrow_indicated_button_list.dart'; import 'toolbar/camera_button.dart'; import 'toolbar/clear_format_button.dart'; import 'toolbar/color_button.dart'; +import 'toolbar/emoji_button.dart'; import 'toolbar/history_button.dart'; import 'toolbar/image_button.dart'; import 'toolbar/image_video_utils.dart'; @@ -107,6 +108,8 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget { bool showVideoButton = true, bool showCameraButton = true, bool showDirection = false, + // Emoji + bool showEmoji = true, OnImagePickCallback? onImagePickCallback, OnVideoPickCallback? onVideoPickCallback, MediaPickSettingSelector? mediaPickSettingSelector, @@ -175,6 +178,7 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget { undo: true, iconTheme: iconTheme, ), + if (showRedo) HistoryButton( icon: Icons.redo_outlined, @@ -183,6 +187,16 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget { undo: false, iconTheme: iconTheme, ), + // Emoji + if (showEmoji) + EmojiButton( + icon: Icons.emoji_emotions, + iconSize: toolbarIconSize, + controller: controller, + iconTheme: iconTheme, + selectEmoji: (emoji, category) { + }, + ), if (showFontSize) QuillFontSizeButton( iconTheme: iconTheme, diff --git a/lib/src/widgets/toolbar/emoji_button.dart b/lib/src/widgets/toolbar/emoji_button.dart new file mode 100644 index 00000000..7b087183 --- /dev/null +++ b/lib/src/widgets/toolbar/emoji_button.dart @@ -0,0 +1,111 @@ +/* + * @Author: joahyan joahyan@163.com + * @Date: 2022-07-18 12:34:30 + * @LastEditors: joahyan joahyan@163.com + * @LastEditTime: 2022-07-18 16:39:08 + * @FilePath: \flutter-quill\lib\src\widgets\toolbar\emoji_button.dart + * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE + */ + + +import 'package:emoji_picker_flutter/emoji_picker_flutter.dart'; +import 'package:flutter/material.dart'; + +import '../../../flutter_quill.dart' hide Text; + +class EmojiButton extends StatefulWidget { + const EmojiButton({ + required this.icon, + required this.controller, + required this.selectEmoji, + this.iconSize = kDefaultIconSize, + this.iconTheme, + Key? key, + this.imageConfig, + }) : super(key: key); + final IconData icon; + final double iconSize; + final Function selectEmoji; + final QuillController controller; + final QuillIconTheme? iconTheme; + final Config? imageConfig; + + @override + _EmojiButtonState createState() => _EmojiButtonState(); +} + +class _EmojiButtonState extends State { + Color? _iconColor; + late ThemeData theme; + + // 默认配置 + final _config = const Config( + columns: 10, + emojiSizeMax: 28, + bgColor: Color(0xffF2F2F2), + iconColor: Colors.grey, + iconColorSelected: Color(0xff333333), + indicatorColor: Color(0xff333333), + progressIndicatorColor: Color(0xff333333), + buttonMode: ButtonMode.CUPERTINO, + initCategory: Category.RECENT, + ); + + // emoji弹窗 + void _showEmojiDialog() { + showDialog( + context: context, + builder: (ctx) => AlertDialog( + contentPadding: EdgeInsets.zero, + content: SingleChildScrollView( + child: Container( + height: 400, + width: 500, + decoration: const BoxDecoration( + color: Colors.blue, + borderRadius: BorderRadius.all(Radius.circular(8)), + ), + child: Column( + children: [ + Expanded( + child: EmojiPicker( + config: widget.imageConfig ?? _config, + onEmojiSelected: (category, emoji) { + _insertEmoji(emoji); + Navigator.pop(context); + }, + ), + ), + ], + ), + ), + ), + ), + ); + } + + // 选择emoji插入至markdown + void _insertEmoji(Emoji emoji) { + final baseOffset = widget.controller.selection.baseOffset; + final extentOffset = widget.controller.selection.extentOffset; + final replaceLen = extentOffset - baseOffset; + final selection = widget.controller.selection.copyWith( + baseOffset: baseOffset + emoji.emoji.length, + extentOffset: baseOffset + emoji.emoji.length, + ); + + widget.controller + .replaceText(baseOffset, replaceLen, emoji.emoji, selection); + } + + @override + Widget build(BuildContext context) { + return QuillIconButton( + icon: Icon(widget.icon, size: widget.iconSize), + onPressed: () { + _showEmojiDialog(); + print('aa'); + }, + ); + } +} diff --git a/pubspec.yaml b/pubspec.yaml index 830c86e5..ec851fd1 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -20,7 +20,7 @@ dependencies: quiver: ^3.1.0 string_validator: ^0.3.0 tuple: ^2.0.0 - url_launcher: ^6.1.2 + url_launcher: ^6.1.2 pedantic: ^1.11.1 video_player: ^2.4.2 characters: ^1.2.0 @@ -30,6 +30,7 @@ dependencies: gallery_saver: ^2.3.2 device_info_plus: ^3.2.3 platform: ^3.1.0 + emoji_picker_flutter: ^1.3.0 dev_dependencies: flutter_test: