From 947d2fbd73aebdf234c39413cdb187f7d1d8688e Mon Sep 17 00:00:00 2001 From: ArjanAswal Date: Sun, 7 Feb 2021 02:30:28 +0530 Subject: [PATCH] Support the use of custom icon size in toolbar --- CHANGELOG.md | 5 +++- app/pubspec.lock | 2 +- lib/widgets/toolbar.dart | 58 ++++++++++++++++++++++------------------ pubspec.yaml | 2 +- 4 files changed, 38 insertions(+), 29 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 900754d9..8decc4a3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -63,4 +63,7 @@ * Update git repo. ## [0.2.3] -* Support custom styles and image on local device storage without uploading. \ No newline at end of file +* Support custom styles and image on local device storage without uploading. + +## [0.2.4] +* Support the use of custom icon size in toolbar. \ No newline at end of file diff --git a/app/pubspec.lock b/app/pubspec.lock index d0d4a562..1169bd23 100644 --- a/app/pubspec.lock +++ b/app/pubspec.lock @@ -82,7 +82,7 @@ packages: path: ".." relative: true source: path - version: "0.2.1" + version: "0.2.2" flutter_test: dependency: "direct dev" description: flutter diff --git a/lib/widgets/toolbar.dart b/lib/widgets/toolbar.dart index bfc77d67..2d0162d7 100644 --- a/lib/widgets/toolbar.dart +++ b/lib/widgets/toolbar.dart @@ -9,7 +9,8 @@ import 'package:image_picker/image_picker.dart'; import 'controller.dart'; -const double kToolbarHeight = 56.0; +double iconSize = 18.0; +double kToolbarHeight = iconSize * 2; typedef UploadFileCallback = Future Function(File file); @@ -28,10 +29,10 @@ class InsertEmbedButton extends StatelessWidget { return QuillIconButton( highlightElevation: 0, hoverElevation: 0, - size: 32, + size: iconSize * 1.77, icon: Icon( icon, - size: 18, + size: iconSize, color: Theme.of(context).iconTheme.color, ), fillColor: Theme.of(context).canvasColor, @@ -92,10 +93,10 @@ class _LinkStyleButtonState extends State { return QuillIconButton( highlightElevation: 0, hoverElevation: 0, - size: 32, + size: iconSize * 1.77, icon: Icon( widget.icon ?? Icons.link, - size: 18, + size: iconSize, color: isEnabled ? theme.iconTheme.color : theme.disabledColor, ), fillColor: Theme.of(context).canvasColor, @@ -360,8 +361,8 @@ Widget defaultToggleStyleButtonBuilder( return QuillIconButton( highlightElevation: 0, hoverElevation: 0, - size: 32, - icon: Icon(icon, size: 18, color: iconColor), + size: iconSize * 1.77, + icon: Icon(icon, size: iconSize, color: iconColor), fillColor: fillColor, onPressed: onPressed, ); @@ -427,7 +428,7 @@ class _SelectHeaderStyleButtonState extends State { Widget _selectHeadingStyleButtonBuilder( BuildContext context, Attribute value, ValueChanged onSelected) { - final style = TextStyle(fontSize: 12); + final style = TextStyle(fontSize: 13); final Map _valueToText = { Attribute.header: 'Normal text', @@ -439,32 +440,33 @@ Widget _selectHeadingStyleButtonBuilder( return QuillDropdownButton( highlightElevation: 0, hoverElevation: 0, - height: 32, + height: iconSize * 1.77, + fillColor: Theme.of(context).canvasColor, child: Text( _valueToText[value], - style: TextStyle(fontSize: 12, fontWeight: FontWeight.w600), + style: TextStyle(fontSize: 13, fontWeight: FontWeight.w600), ), initialValue: value, items: [ PopupMenuItem( child: Text(_valueToText[Attribute.header], style: style), value: Attribute.header, - height: 32, + height: iconSize * 1.77, ), PopupMenuItem( child: Text(_valueToText[Attribute.h1], style: style), value: Attribute.h1, - height: 32, + height: iconSize * 1.77, ), PopupMenuItem( child: Text(_valueToText[Attribute.h2], style: style), value: Attribute.h2, - height: 32, + height: iconSize * 1.77, ), PopupMenuItem( child: Text(_valueToText[Attribute.h3], style: style), value: Attribute.h3, - height: 32, + height: iconSize * 1.77, ), ], onSelected: onSelected, @@ -521,8 +523,8 @@ class _ImageButtonState extends State { return QuillIconButton( highlightElevation: 0, hoverElevation: 0, - size: 32, - icon: Icon(widget.icon, size: 18, color: iconColor), + size: iconSize * 1.77, + icon: Icon(widget.icon, size: iconSize, color: iconColor), fillColor: fillColor, onPressed: () { final index = widget.controller.selection.baseOffset; @@ -572,8 +574,8 @@ class _ColorButtonState extends State { return QuillIconButton( highlightElevation: 0, hoverElevation: 0, - size: 32, - icon: Icon(widget.icon, size: 18, color: iconColor), + size: iconSize * 1.77, + icon: Icon(widget.icon, size: iconSize, color: iconColor), fillColor: fillColor, onPressed: _showColorPicker, ); @@ -595,6 +597,7 @@ class _ColorButtonState extends State { context: context, builder: (_) => AlertDialog( title: const Text('Select Color'), + backgroundColor: Theme.of(context).canvasColor, content: SingleChildScrollView( child: MaterialPicker( pickerColor: Color(0), @@ -640,8 +643,8 @@ class _HistoryButtonState extends State { return QuillIconButton( highlightElevation: 0, hoverElevation: 0, - size: 32, - icon: Icon(widget.icon, size: 18, color: _iconColor), + size: iconSize * 1.77, + icon: Icon(widget.icon, size: iconSize, color: _iconColor), fillColor: fillColor, onPressed: _changeHistory, ); @@ -706,8 +709,8 @@ class _IndentButtonState extends State { return QuillIconButton( highlightElevation: 0, hoverElevation: 0, - size: 32, - icon: Icon(widget.icon, size: 18, color: iconColor), + size: iconSize * 1.77, + icon: Icon(widget.icon, size: iconSize, color: iconColor), fillColor: fillColor, onPressed: () { final indent = widget.controller @@ -759,8 +762,8 @@ class _ClearFormatButtonState extends State { return QuillIconButton( highlightElevation: 0, hoverElevation: 0, - size: 32, - icon: Icon(widget.icon, size: 18, color: iconColor), + size: iconSize * 1.77, + icon: Icon(widget.icon, size: iconSize, color: iconColor), fillColor: fillColor, onPressed: () { for (Attribute k @@ -779,6 +782,7 @@ class QuillToolbar extends StatefulWidget implements PreferredSizeWidget { factory QuillToolbar.basic( {Key key, @required QuillController controller, + double toolbarIconSize = 18.0, bool showBoldButton = true, bool showItalicButton = true, bool showUnderLineButton = true, @@ -797,6 +801,7 @@ class QuillToolbar extends StatefulWidget implements PreferredSizeWidget { bool showHistory = true, bool showHorizontalRule = false, UploadFileCallback uploadFileCallback}) { + iconSize = toolbarIconSize; return QuillToolbar(key: key, children: [ Visibility( visible: showHistory, @@ -854,7 +859,7 @@ class QuillToolbar extends StatefulWidget implements PreferredSizeWidget { Visibility( visible: showColorButton, child: ColorButton( - icon: Icons.format_color_text, + icon: Icons.color_lens, controller: controller, background: false, ), @@ -996,6 +1001,7 @@ class _QuillToolbarState extends State { return Container( padding: EdgeInsets.symmetric(horizontal: 8), constraints: BoxConstraints.tightFor(height: widget.preferredSize.height), + color: Theme.of(context).canvasColor, child: SingleChildScrollView( scrollDirection: Axis.horizontal, child: Row( @@ -1132,7 +1138,7 @@ class _QuillDropdownButtonState extends State> { children: [ widget.child, Expanded(child: Container()), - Icon(Icons.arrow_drop_down, size: 14) + Icon(Icons.arrow_drop_down, size: 15) ], ), ), diff --git a/pubspec.yaml b/pubspec.yaml index f8a53fdd..be678d06 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,6 +1,6 @@ name: flutter_quill description: One client and affiliated collaborator of Flutter Quill is Bullet Journal App. -version: 0.2.3 +version: 0.2.4 #author: bulletjournal homepage: https://bulletjournal.us/home/index.html repository: https://github.com/singerdmx/flutter-quill.git