From 1f0acf0073b45ce061552d2af75e2b58e4c22481 Mon Sep 17 00:00:00 2001 From: BambinoUA <45417992+bambinoua@users.noreply.github.com> Date: Mon, 17 Apr 2023 10:16:32 +0300 Subject: [PATCH] Add `AxisDivider` instead of `_dividerOnAxis` to tweak divider space and color --- lib/src/widgets/toolbar.dart | 97 +++++++++++++++++++++++++----------- 1 file changed, 69 insertions(+), 28 deletions(-) diff --git a/lib/src/widgets/toolbar.dart b/lib/src/widgets/toolbar.dart index 08c7c6fe..a7bfbb95 100644 --- a/lib/src/widgets/toolbar.dart +++ b/lib/src/widgets/toolbar.dart @@ -37,25 +37,30 @@ export 'toolbar/select_header_style_button.dart'; export 'toolbar/toggle_check_list_button.dart'; export 'toolbar/toggle_style_button.dart'; -// The default size of the icon of a button. +/// The default size of the icon of a button. const double kDefaultIconSize = 18; -// The factor of how much larger the button is in relation to the icon. +/// The factor of how much larger the button is in relation to the icon. const double kIconButtonFactor = 1.77; +/// The horizontal margin between the contents of each toolbar section. +const double kToolbarSectionSpacing = 4; + class QuillToolbar extends StatelessWidget implements PreferredSizeWidget { const QuillToolbar({ required this.children, this.axis = Axis.horizontal, - this.toolbarSize = 36, + this.toolbarSize = kDefaultIconSize * 2, + this.toolbarSectionSpacing = kToolbarSectionSpacing, this.toolbarIconAlignment = WrapAlignment.center, this.toolbarIconCrossAlignment = WrapCrossAlignment.center, - this.toolbarSectionSpacing = 4, this.multiRowsDisplay = true, this.color, this.customButtons = const [], this.locale, VoidCallback? afterButtonPressed, + this.dividerColor, + this.dividerSpace, Key? key, }) : super(key: key); @@ -63,9 +68,10 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget { required QuillController controller, Axis axis = Axis.horizontal, double toolbarIconSize = kDefaultIconSize, - double toolbarSectionSpacing = 4, + double toolbarSectionSpacing = kToolbarSectionSpacing, WrapAlignment toolbarIconAlignment = WrapAlignment.center, WrapCrossAlignment toolbarIconCrossAlignment = WrapCrossAlignment.center, + bool multiRowsDisplay = true, bool showDividers = true, bool showFontFamily = true, bool showFontSize = true, @@ -93,7 +99,6 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget { bool showLink = true, bool showUndo = true, bool showRedo = true, - bool multiRowsDisplay = true, bool showDirection = false, bool showSearchButton = true, List customButtons = const [], @@ -138,6 +143,12 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget { /// The color of the toolbar Color? color, + + /// The color of the toolbar section divider + Color? dividerColor, + + /// The space occupied by toolbar divider + double? dividerSpace, Key? key, }) { final isButtonGroupShown = [ @@ -401,7 +412,7 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget { isButtonGroupShown[3] || isButtonGroupShown[4] || isButtonGroupShown[5])) - _dividerOnAxis(axis), + AxisDivider(axis, color: dividerColor, space: dividerSpace), if (showAlignmentButtons) SelectAlignmentButton( controller: controller, @@ -436,7 +447,7 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget { isButtonGroupShown[3] || isButtonGroupShown[4] || isButtonGroupShown[5])) - _dividerOnAxis(axis), + AxisDivider(axis, color: dividerColor, space: dividerSpace), if (showHeaderStyle) SelectHeaderStyleButton( tooltip: buttonTooltips[ToolbarButtons.headerStyle], @@ -452,7 +463,7 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget { (isButtonGroupShown[3] || isButtonGroupShown[4] || isButtonGroupShown[5])) - _dividerOnAxis(axis), + AxisDivider(axis, color: dividerColor, space: dividerSpace), if (showListNumbers) ToggleStyleButton( attribute: Attribute.ol, @@ -496,7 +507,7 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget { if (showDividers && isButtonGroupShown[3] && (isButtonGroupShown[4] || isButtonGroupShown[5])) - _dividerOnAxis(axis), + AxisDivider(axis, color: dividerColor, space: dividerSpace), if (showQuote) ToggleStyleButton( attribute: Attribute.blockQuote, @@ -528,7 +539,7 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget { afterButtonPressed: afterButtonPressed, ), if (showDividers && isButtonGroupShown[4] && isButtonGroupShown[5]) - _dividerOnAxis(axis), + AxisDivider(axis, color: dividerColor, space: dividerSpace), if (showLink) LinkStyleButton( tooltip: buttonTooltips[ToolbarButtons.link], @@ -549,7 +560,8 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget { afterButtonPressed: afterButtonPressed, ), if (customButtons.isNotEmpty) - if (showDividers) _dividerOnAxis(axis), + if (showDividers) + AxisDivider(axis, color: dividerColor, space: dividerSpace), for (var customButton in customButtons) QuillIconButton( highlightElevation: 0, @@ -565,22 +577,6 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget { ); } - static Widget _dividerOnAxis(Axis axis) { - if (axis == Axis.horizontal) { - return const VerticalDivider( - indent: 12, - endIndent: 12, - color: Colors.grey, - ); - } else { - return const Divider( - indent: 12, - endIndent: 12, - color: Colors.grey, - ); - } - } - final List children; final Axis axis; final double toolbarSize; @@ -602,6 +598,15 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget { /// List of custom buttons final List customButtons; + /// The color to use when painting the line. + /// + /// If this is null, then the [DividerThemeData.color] is used. If that is + /// also null, then [ThemeData.dividerColor] is used. + final Color? dividerColor; + + /// The space occupied by toolbar divider. + final double? dividerSpace; + @override Size get preferredSize => axis == Axis.horizontal ? Size.fromHeight(toolbarSize) @@ -634,3 +639,39 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget { ); } } + +class AxisDivider extends StatelessWidget { + const AxisDivider( + this.axis, { + Key? key, + this.color, + this.space, + }) : super(key: key); + + const AxisDivider.horizontal({Color? color, double? space}) + : this(Axis.horizontal, color: color, space: space); + + const AxisDivider.vertical({Color? color, double? space}) + : this(Axis.vertical, color: color, space: space); + + final Axis axis; + final Color? color; + final double? space; + + @override + Widget build(BuildContext context) { + return axis == Axis.horizontal + ? Divider( + height: space, + color: color, + indent: 12, + endIndent: 12, + ) + : VerticalDivider( + width: space, + color: color, + indent: 12, + endIndent: 12, + ); + } +}