From 37d7d85abdf5218a0754b2c7b4ccccf25a98fbd6 Mon Sep 17 00:00:00 2001 From: singerdmx Date: Wed, 23 Dec 2020 14:49:12 -0800 Subject: [PATCH] Add Gallery Image and Camera Image buttons in toolbar --- app/lib/pages/home_page.dart | 2 - app/pubspec.lock | 42 +++++++++++++++++++ lib/widgets/toolbar.dart | 80 +++++++++++++++++++++++++++++------- pubspec.lock | 42 +++++++++++++++++++ pubspec.yaml | 1 + 5 files changed, 151 insertions(+), 16 deletions(-) diff --git a/app/lib/pages/home_page.dart b/app/lib/pages/home_page.dart index cea4dfc5..35e05acc 100644 --- a/app/lib/pages/home_page.dart +++ b/app/lib/pages/home_page.dart @@ -91,8 +91,6 @@ class _HomePageState extends State { } Widget _buildMenuBar(BuildContext context) { - final headerStyle = TextStyle( - fontSize: 11, color: Colors.grey.shade500, fontWeight: FontWeight.bold); final itemStyle = TextStyle(color: Colors.white); return ListView( children: [ diff --git a/app/pubspec.lock b/app/pubspec.lock index 71bc7f7d..2afc2e95 100644 --- a/app/pubspec.lock +++ b/app/pubspec.lock @@ -69,6 +69,13 @@ packages: url: "https://pub.dartlang.org" source: hosted version: "0.3.4" + flutter_plugin_android_lifecycle: + dependency: transitive + description: + name: flutter_plugin_android_lifecycle + url: "https://pub.dartlang.org" + source: hosted + version: "1.0.11" flutter_quill: dependency: "direct main" description: @@ -86,6 +93,34 @@ packages: description: flutter source: sdk version: "0.0.0" + http: + dependency: transitive + description: + name: http + url: "https://pub.dartlang.org" + source: hosted + version: "0.12.2" + http_parser: + dependency: transitive + description: + name: http_parser + url: "https://pub.dartlang.org" + source: hosted + version: "3.1.4" + image_picker: + dependency: transitive + description: + name: image_picker + url: "https://pub.dartlang.org" + source: hosted + version: "0.6.7+17" + image_picker_platform_interface: + dependency: transitive + description: + name: image_picker_platform_interface + url: "https://pub.dartlang.org" + source: hosted + version: "1.1.1" matcher: dependency: transitive description: @@ -107,6 +142,13 @@ packages: url: "https://pub.dartlang.org" source: hosted version: "1.8.0-nullsafety.1" + pedantic: + dependency: transitive + description: + name: pedantic + url: "https://pub.dartlang.org" + source: hosted + version: "1.9.2" plugin_platform_interface: dependency: transitive description: diff --git a/lib/widgets/toolbar.dart b/lib/widgets/toolbar.dart index 7700ad6f..c108a864 100644 --- a/lib/widgets/toolbar.dart +++ b/lib/widgets/toolbar.dart @@ -1,13 +1,18 @@ +import 'dart:io'; + import 'package:flutter/material.dart'; import 'package:flutter_colorpicker/flutter_colorpicker.dart'; import 'package:flutter_quill/models/documents/attribute.dart'; import 'package:flutter_quill/models/documents/nodes/embed.dart'; import 'package:flutter_quill/models/documents/style.dart'; +import 'package:image_picker/image_picker.dart'; import 'controller.dart'; const double kToolbarHeight = 56.0; +typedef UploadFileCallback = Future Function(File file); + class InsertEmbedButton extends StatelessWidget { final QuillController controller; final IconData icon; @@ -369,21 +374,48 @@ Widget _selectHeadingStyleButtonBuilder( ); } -class InsertImageButton extends StatefulWidget { +class ImageButton extends StatefulWidget { final IconData icon; final QuillController controller; - InsertImageButton({Key key, @required this.icon, @required this.controller}) + final UploadFileCallback uploadFileCallback; + + final ImageSource imageSource; + + ImageButton( + {Key key, + @required this.icon, + @required this.controller, + @required this.imageSource, + this.uploadFileCallback}) : assert(icon != null), assert(controller != null), super(key: key); @override - _InsertImageButtonState createState() => _InsertImageButtonState(); + _ImageButtonState createState() => _ImageButtonState(); } -class _InsertImageButtonState extends State { +class _ImageButtonState extends State { + final _picker = ImagePicker(); + + Future _pickImage(ImageSource source) async { + final PickedFile pickedFile = await _picker.getImage(source: source); + final File file = File(pickedFile.path); + + if (file == null || widget.uploadFileCallback == null) return null; + // We simply return the absolute path to selected file. + try { + String url = await widget.uploadFileCallback(file); + print('Image uploaded and its url is $url'); + return url; + } catch (error) { + print('Upload image error $error'); + } + return null; + } + @override Widget build(BuildContext context) { final theme = Theme.of(context); @@ -395,7 +427,18 @@ class _InsertImageButtonState extends State { size: 32, icon: Icon(widget.icon, size: 18, color: iconColor), fillColor: fillColor, -// onPressed: , + onPressed: () { + final index = widget.controller.selection.baseOffset; + final length = widget.controller.selection.extentOffset - index; + final image = _pickImage(widget.imageSource); + image.then((imageUploadUrl) => { + if (imageUploadUrl != null) + { + widget.controller.replaceText( + index, length, BlockEmbed(imageUploadUrl), null) + } + }); + }, ); } } @@ -464,7 +507,8 @@ class BackgroundColorButton extends StatefulWidget { final QuillController controller; - BackgroundColorButton({Key key, @required this.icon, @required this.controller}) + BackgroundColorButton( + {Key key, @required this.icon, @required this.controller}) : assert(icon != null), assert(controller != null), super(key: key); @@ -490,8 +534,8 @@ class _BackgroundColorButtonState extends State { } void _changeColor(Color color) { - widget.controller - .formatSelection(BackgroundAttribute('#${color.value.toRadixString(16)}')); + widget.controller.formatSelection( + BackgroundAttribute('#${color.value.toRadixString(16)}')); Navigator.of(context).pop(); } @@ -510,7 +554,6 @@ class _BackgroundColorButtonState extends State { } } - class QuillToolbar extends StatefulWidget implements PreferredSizeWidget { final List children; @@ -525,14 +568,14 @@ class QuillToolbar extends StatefulWidget implements PreferredSizeWidget { bool showStrikeThrough = true, bool showColorButton = true, bool showBackgroundColorButton = true, - bool showInsertImageButton = true, bool showHeaderStyle = true, bool showListNumbers = true, bool showListBullets = true, bool showCodeBlock = true, bool showQuote = true, bool showLink = true, - bool showHorizontalRule = true}) { + bool showHorizontalRule = true, + UploadFileCallback uploadFileCallback}) { return QuillToolbar(key: key, children: [ Visibility( visible: showBoldButton, @@ -581,17 +624,26 @@ class QuillToolbar extends StatefulWidget implements PreferredSizeWidget { Visibility( visible: showBackgroundColorButton, child: BackgroundColorButton( - // attribute: BackgroundAttribute('#ffffff'), icon: Icons.format_color_fill, controller: controller, ), ), SizedBox(width: 1), Visibility( - visible: showInsertImageButton, - child: InsertImageButton( + visible: uploadFileCallback != null, + child: ImageButton( icon: Icons.image, controller: controller, + imageSource: ImageSource.gallery, + ), + ), + SizedBox(width: 1), + Visibility( + visible: uploadFileCallback != null, + child: ImageButton( + icon: Icons.photo_camera, + controller: controller, + imageSource: ImageSource.camera, ), ), Visibility( diff --git a/pubspec.lock b/pubspec.lock index b025d85c..c13b3f11 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -62,6 +62,13 @@ packages: url: "https://pub.dartlang.org" source: hosted version: "0.3.4" + flutter_plugin_android_lifecycle: + dependency: transitive + description: + name: flutter_plugin_android_lifecycle + url: "https://pub.dartlang.org" + source: hosted + version: "1.0.11" flutter_test: dependency: "direct dev" description: flutter @@ -72,6 +79,34 @@ packages: description: flutter source: sdk version: "0.0.0" + http: + dependency: transitive + description: + name: http + url: "https://pub.dartlang.org" + source: hosted + version: "0.12.2" + http_parser: + dependency: transitive + description: + name: http_parser + url: "https://pub.dartlang.org" + source: hosted + version: "3.1.4" + image_picker: + dependency: "direct main" + description: + name: image_picker + url: "https://pub.dartlang.org" + source: hosted + version: "0.6.7+17" + image_picker_platform_interface: + dependency: transitive + description: + name: image_picker_platform_interface + url: "https://pub.dartlang.org" + source: hosted + version: "1.1.1" matcher: dependency: transitive description: @@ -93,6 +128,13 @@ packages: url: "https://pub.dartlang.org" source: hosted version: "1.8.0-nullsafety.1" + pedantic: + dependency: transitive + description: + name: pedantic + url: "https://pub.dartlang.org" + source: hosted + version: "1.9.2" plugin_platform_interface: dependency: transitive description: diff --git a/pubspec.yaml b/pubspec.yaml index 9272c752..e6c95cf1 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -18,6 +18,7 @@ dependencies: tuple: ^1.0.3 url_launcher: ^5.7.10 flutter_colorpicker: ^0.3.4 + image_picker: ^0.6.7+17 dev_dependencies: flutter_test: