Feature/change icon button data (#1634)

* Add a way to change almost properties of IconButton in QuillIconTheme for both selected and unselected state

---------

Co-authored-by: Ellet <ellet@freshplatform.net>
pull/1640/head
Ellet Hnewa 1 year ago committed by GitHub
parent a4dd9b54a8
commit 7c3f6ccf4e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 3
      CHANGELOG.md
  2. 18
      example/lib/presentation/quill/my_quill_toolbar.dart
  3. 1
      flutter_quill_extensions/lib/embeds/formula/toolbar/formula_button.dart
  4. 3
      flutter_quill_extensions/lib/embeds/image/toolbar/image_button.dart
  5. 3
      flutter_quill_extensions/lib/embeds/others/camera_button/camera_button.dart
  6. 3
      flutter_quill_extensions/lib/embeds/video/toolbar/video_button.dart
  7. 114
      lib/src/models/themes/quill_icon_theme.dart
  8. 2
      lib/src/widgets/toolbar/buttons/clear_format_button.dart
  9. 6
      lib/src/widgets/toolbar/buttons/color/color_button.dart
  10. 1
      lib/src/widgets/toolbar/buttons/custom_button_button.dart
  11. 14
      lib/src/widgets/toolbar/buttons/font_family_button.dart
  12. 16
      lib/src/widgets/toolbar/buttons/font_size_button.dart
  13. 15
      lib/src/widgets/toolbar/buttons/hearder_style/select_header_style_buttons.dart
  14. 3
      lib/src/widgets/toolbar/buttons/history_button.dart
  15. 3
      lib/src/widgets/toolbar/buttons/indent_button.dart
  16. 1
      lib/src/widgets/toolbar/buttons/link_style2_button.dart
  17. 1
      lib/src/widgets/toolbar/buttons/link_style_button.dart
  18. 48
      lib/src/widgets/toolbar/buttons/quill_icon_button.dart
  19. 1
      lib/src/widgets/toolbar/buttons/search/search_button.dart
  20. 4
      lib/src/widgets/toolbar/buttons/toggle_style_button.dart

@ -2,6 +2,9 @@
All notable changes to this project will be documented in this file.
## 9.1.0
* Fix the simple toolbar by add properties of `IconButton` and fix some buttons
## 9.1.0-dev.2
* Fix the history buttons

@ -202,6 +202,24 @@ class MyQuillToolbar extends StatelessWidget {
controller: controller,
showAlignmentButtons: true,
multiRowsDisplay: true,
buttonOptions: QuillSimpleToolbarButtonOptions(
base: QuillToolbarBaseButtonOptions(
afterButtonPressed: focusNode.requestFocus
// globalIconSize: 20,
// iconTheme: QuillIconTheme(
// iconButtonSelectedData: IconButtonData(
// style: IconButton.styleFrom(
// foregroundColor: Colors.amberAccent,
// ),
// ),
// iconButtonUnselectedData: IconButtonData(
// style: IconButton.styleFrom(
// foregroundColor: Colors.amberAccent,
// ),
// ),
// ),
),
),
customButtons: [
QuillToolbarCustomButtonOptions(
icon: const Icon(Icons.add_alarm_rounded),

@ -94,6 +94,7 @@ class QuillToolbarFormulaButton extends StatelessWidget {
tooltip: tooltip,
onPressed: () => _sharedOnPressed(context),
isSelected: false,
iconTheme: iconTheme,
);
}

@ -104,8 +104,7 @@ class QuillToolbarImageButton extends StatelessWidget {
tooltip: tooltip,
isSelected: false,
onPressed: () => _sharedOnPressed(context),
iconSelectedStyle: _iconTheme(context)?.iconButtonSelectedStyle,
iconUnselectedStyle: _iconTheme(context)?.iconButtonUnselectedStyle,
iconTheme: _iconTheme(context),
);
}

@ -112,8 +112,7 @@ class QuillToolbarCameraButton extends StatelessWidget {
isSelected: false,
// isDesktop(supportWeb: false) ? null :
onPressed: () => _sharedOnPressed(context),
iconSelectedStyle: iconTheme?.iconButtonSelectedStyle,
iconUnselectedStyle: iconTheme?.iconButtonUnselectedStyle,
iconTheme: iconTheme,
);
}

@ -109,8 +109,7 @@ class QuillToolbarVideoButton extends StatelessWidget {
tooltip: tooltip,
isSelected: false,
onPressed: () => _sharedOnPressed(context),
iconSelectedStyle: _iconTheme(context)?.iconButtonSelectedStyle,
iconUnselectedStyle: _iconTheme(context)?.iconButtonUnselectedStyle,
iconTheme: _iconTheme(context),
);
}

@ -1,21 +1,121 @@
// ignore_for_file: public_member_api_docs, sort_constructors_first
import 'package:flutter/material.dart';
@immutable
class QuillIconTheme {
const QuillIconTheme({
this.padding,
this.iconButtonSelectedStyle,
this.iconButtonUnselectedStyle,
// this.iconSelectedFillColor,
// this.iconUnselectedFillColor,
this.iconButtonSelectedData,
this.iconButtonUnselectedData,
});
@Deprecated('Please use iconButtonUnselectedData instead')
final ButtonStyle? iconButtonUnselectedStyle;
@Deprecated('Please use iconButtonSelectedData instead')
final ButtonStyle? iconButtonSelectedStyle;
// final Color? iconSelectedFillColor;
// final Color? iconUnselectedFillColor;
final IconButtonData? iconButtonUnselectedData;
final IconButtonData? iconButtonSelectedData;
QuillIconTheme copyWith({
IconButtonData? iconButtonUnselectedData,
IconButtonData? iconButtonSelectedData,
}) {
return QuillIconTheme(
iconButtonUnselectedData:
iconButtonUnselectedData ?? this.iconButtonUnselectedData,
iconButtonSelectedData:
iconButtonSelectedData ?? this.iconButtonSelectedData,
);
}
}
@immutable
class IconButtonData {
const IconButtonData({
this.iconSize,
this.visualDensity,
this.padding,
this.alignment,
this.splashRadius,
this.color,
this.focusColor,
this.hoverColor,
this.highlightColor,
this.splashColor,
this.disabledColor,
this.mouseCursor,
this.autofocus = false,
this.tooltip,
this.enableFeedback,
this.constraints,
this.style,
this.isSelected,
this.selectedIcon,
});
final double? iconSize;
final VisualDensity? visualDensity;
final EdgeInsetsGeometry? padding;
final AlignmentGeometry? alignment;
final double? splashRadius;
final Color? color;
final Color? focusColor;
final Color? hoverColor;
final Color? highlightColor;
final Color? splashColor;
final Color? disabledColor;
final MouseCursor? mouseCursor;
final bool autofocus;
final String? tooltip;
final bool? enableFeedback;
final BoxConstraints? constraints;
final ButtonStyle? style;
final bool? isSelected;
final Widget? selectedIcon;
///The padding for icons
final EdgeInsets? padding;
IconButtonData copyWith({
double? iconSize,
VisualDensity? visualDensity,
EdgeInsetsGeometry? padding,
AlignmentGeometry? alignment,
double? splashRadius,
Color? color,
Color? focusColor,
Color? hoverColor,
Color? highlightColor,
Color? splashColor,
Color? disabledColor,
MouseCursor? mouseCursor,
bool? autofocus,
String? tooltip,
bool? enableFeedback,
BoxConstraints? constraints,
ButtonStyle? style,
bool? isSelected,
Widget? selectedIcon,
}) {
return IconButtonData(
iconSize: iconSize ?? this.iconSize,
visualDensity: visualDensity ?? this.visualDensity,
padding: padding ?? this.padding,
alignment: alignment ?? this.alignment,
splashRadius: splashRadius ?? this.splashRadius,
color: color ?? this.color,
focusColor: focusColor ?? this.focusColor,
hoverColor: hoverColor ?? this.hoverColor,
highlightColor: highlightColor ?? this.highlightColor,
splashColor: splashColor ?? this.splashColor,
disabledColor: disabledColor ?? this.disabledColor,
mouseCursor: mouseCursor ?? this.mouseCursor,
autofocus: autofocus ?? this.autofocus,
tooltip: tooltip ?? this.tooltip,
enableFeedback: enableFeedback ?? this.enableFeedback,
constraints: constraints ?? this.constraints,
style: style ?? this.style,
isSelected: isSelected ?? this.isSelected,
selectedIcon: selectedIcon ?? this.selectedIcon,
);
}
}

@ -114,7 +114,7 @@ class QuillToolbarClearFormatButton extends StatelessWidget {
isSelected: false,
onPressed: _sharedOnPressed,
afterPressed: afterButtonPressed,
iconUnselectedStyle: iconTheme?.iconButtonUnselectedStyle,
iconTheme: iconTheme,
);
}
}

@ -193,12 +193,14 @@ class QuillToolbarColorButtonState extends State<QuillToolbarColorButton> {
);
}
return IconButton(
return QuillToolbarIconButton(
tooltip: tooltip,
iconSize: iconSize * iconButtonFactor,
isSelected: false,
iconTheme: iconTheme,
icon: Icon(
iconData,
color: widget.isBackground ? iconColorBackground : iconColor,
size: iconSize * iconButtonFactor,
),
onPressed: _showColorPicker,
);

@ -85,6 +85,7 @@ class QuillToolbarCustomButton extends StatelessWidget {
tooltip: tooltip,
onPressed: () => _onPressed(context),
afterPressed: afterButtonPressed,
iconTheme: iconTheme,
);
}
}

@ -190,10 +190,16 @@ class QuillToolbarFontFamilyButtonState
child: _buildContent(context),
);
}
return IconButton(
// tooltip: , // TODO: Use this here
visualDensity: VisualDensity.compact,
style: iconTheme?.iconButtonUnselectedStyle,
return QuillToolbarIconButton(
isSelected: false,
iconTheme: iconTheme?.copyWith(
iconButtonSelectedData: const IconButtonData(
visualDensity: VisualDensity.compact,
),
iconButtonUnselectedData: const IconButtonData(
visualDensity: VisualDensity.compact,
),
),
onPressed: _onPressed,
icon: _buildContent(context),
);

@ -1,13 +1,14 @@
import 'package:flutter/material.dart';
import '../../../../extensions.dart';
import '../../../extensions/quill_configurations_ext.dart';
import '../../../l10n/extensions/localizations.dart';
import '../../../models/config/quill_configurations.dart';
import '../../../models/documents/attribute.dart';
import '../../../models/themes/quill_icon_theme.dart';
import '../../../utils/font.dart';
import '../../quill/quill_controller.dart';
import '../base_toolbar.dart';
class QuillToolbarFontSizeButton extends StatefulWidget {
QuillToolbarFontSizeButton({
@ -150,10 +151,17 @@ class QuillToolbarFontSizeButtonState
child: _buildContent(context),
);
}
return IconButton(
return QuillToolbarIconButton(
tooltip: tooltip,
visualDensity: VisualDensity.compact,
style: iconTheme?.iconButtonUnselectedStyle,
isSelected: false,
iconTheme: iconTheme?.copyWith(
iconButtonSelectedData: const IconButtonData(
visualDensity: VisualDensity.compact,
),
iconButtonUnselectedData: const IconButtonData(
visualDensity: VisualDensity.compact,
),
),
onPressed: _onPressed,
icon: _buildContent(context),
);

@ -155,12 +155,17 @@ class QuillToolbarSelectHeaderStyleButtonsState
width: iconSize * iconButtonFactor,
height: iconSize * iconButtonFactor,
),
child: IconButton(
child: QuillToolbarIconButton(
tooltip: tooltip,
visualDensity: VisualDensity.compact,
style: isSelected
? iconTheme?.iconButtonSelectedStyle
: iconTheme?.iconButtonUnselectedStyle,
iconTheme: iconTheme?.copyWith(
iconButtonSelectedData: const IconButtonData(
visualDensity: VisualDensity.compact,
),
iconButtonUnselectedData: const IconButtonData(
visualDensity: VisualDensity.compact,
),
),
isSelected: isSelected,
onPressed: () => _sharedOnPressed(attribute),
icon: Text(
_valueToText[attribute] ??

@ -104,8 +104,7 @@ class QuillToolbarHistoryButtonState extends State<QuillToolbarHistoryButton> {
size: iconSize * iconButtonFactor,
),
isSelected: false,
iconSelectedStyle: iconTheme?.iconButtonSelectedStyle,
iconUnselectedStyle: iconTheme?.iconButtonUnselectedStyle,
iconTheme: iconTheme,
onPressed: _canPressed ? _updateHistory : null,
afterPressed: afterButtonPressed,
);

@ -116,8 +116,7 @@ class QuillToolbarIndentButtonState extends State<QuillToolbarIndentButton> {
isSelected: false,
onPressed: _sharedOnPressed,
afterPressed: afterButtonPressed,
iconSelectedStyle: iconTheme?.iconButtonSelectedStyle,
iconUnselectedStyle: iconTheme?.iconButtonUnselectedStyle,
iconTheme: iconTheme,
);
}
}

@ -156,6 +156,7 @@ class _QuillToolbarLinkStyleButton2State
),
isSelected: isToggled,
onPressed: _openLinkDialog,
iconTheme: iconTheme,
afterPressed: afterButtonPressed,
);
}

@ -149,6 +149,7 @@ class QuillToolbarLinkStyleButtonState
isSelected: isToggled,
onPressed: () => _openLinkDialog(context),
afterPressed: afterButtonPressed,
iconTheme: iconTheme,
);
}

@ -1,16 +1,16 @@
import 'package:flutter/material.dart';
import '../../../models/themes/quill_icon_theme.dart';
class QuillToolbarIconButton extends StatelessWidget {
const QuillToolbarIconButton({
required this.onPressed,
required this.icon,
required this.isSelected,
required this.iconTheme,
this.afterPressed,
this.tooltip,
this.padding,
super.key,
this.iconSelectedStyle,
this.iconUnselectedStyle,
});
final VoidCallback? onPressed;
@ -18,25 +18,37 @@ class QuillToolbarIconButton extends StatelessWidget {
final Widget icon;
final String? tooltip;
final EdgeInsets? padding;
final bool isSelected;
final ButtonStyle? iconUnselectedStyle;
final ButtonStyle? iconSelectedStyle;
final QuillIconTheme? iconTheme;
@override
Widget build(BuildContext context) {
if (isSelected) {
return IconButton.filled(
tooltip: tooltip,
padding: padding,
onPressed: onPressed,
icon: icon,
style: iconSelectedStyle,
style: iconTheme?.iconButtonSelectedData?.style,
visualDensity: iconTheme?.iconButtonSelectedData?.visualDensity,
iconSize: iconTheme?.iconButtonSelectedData?.iconSize,
padding: iconTheme?.iconButtonSelectedData?.padding,
alignment: iconTheme?.iconButtonSelectedData?.alignment,
splashRadius: iconTheme?.iconButtonSelectedData?.splashRadius,
color: iconTheme?.iconButtonSelectedData?.color,
focusColor: iconTheme?.iconButtonSelectedData?.focusColor,
hoverColor: iconTheme?.iconButtonSelectedData?.hoverColor,
highlightColor: iconTheme?.iconButtonSelectedData?.highlightColor,
splashColor: iconTheme?.iconButtonSelectedData?.splashColor,
disabledColor: iconTheme?.iconButtonSelectedData?.disabledColor,
mouseCursor: iconTheme?.iconButtonSelectedData?.mouseCursor,
autofocus: iconTheme?.iconButtonSelectedData?.autofocus ?? false,
enableFeedback: iconTheme?.iconButtonSelectedData?.enableFeedback,
constraints: iconTheme?.iconButtonSelectedData?.constraints,
selectedIcon: iconTheme?.iconButtonSelectedData?.selectedIcon,
);
}
return IconButton(
tooltip: tooltip,
padding: padding,
onPressed: onPressed != null
? () {
onPressed?.call();
@ -44,7 +56,23 @@ class QuillToolbarIconButton extends StatelessWidget {
}
: null,
icon: icon,
style: iconUnselectedStyle,
style: iconTheme?.iconButtonUnselectedData?.style,
visualDensity: iconTheme?.iconButtonUnselectedData?.visualDensity,
iconSize: iconTheme?.iconButtonUnselectedData?.iconSize,
padding: iconTheme?.iconButtonUnselectedData?.padding,
alignment: iconTheme?.iconButtonUnselectedData?.alignment,
splashRadius: iconTheme?.iconButtonUnselectedData?.splashRadius,
color: iconTheme?.iconButtonUnselectedData?.color,
focusColor: iconTheme?.iconButtonUnselectedData?.focusColor,
hoverColor: iconTheme?.iconButtonUnselectedData?.hoverColor,
highlightColor: iconTheme?.iconButtonUnselectedData?.highlightColor,
splashColor: iconTheme?.iconButtonUnselectedData?.splashColor,
disabledColor: iconTheme?.iconButtonUnselectedData?.disabledColor,
mouseCursor: iconTheme?.iconButtonUnselectedData?.mouseCursor,
autofocus: iconTheme?.iconButtonUnselectedData?.autofocus ?? false,
enableFeedback: iconTheme?.iconButtonUnselectedData?.enableFeedback,
constraints: iconTheme?.iconButtonUnselectedData?.constraints,
selectedIcon: iconTheme?.iconButtonUnselectedData?.selectedIcon,
);
}
}

@ -122,6 +122,7 @@ class QuillToolbarSearchButton extends StatelessWidget {
isSelected: false,
onPressed: () => _sharedOnPressed(context),
afterPressed: afterButtonPressed,
iconTheme: iconTheme,
);
}

@ -256,8 +256,6 @@ Widget defaultToggleStyleButtonBuilder(
isSelected: isEnabled ? isToggled == true : false,
onPressed: onPressed,
afterPressed: afterPressed,
padding: iconTheme?.padding,
iconUnselectedStyle: iconTheme?.iconButtonUnselectedStyle,
iconSelectedStyle: iconTheme?.iconButtonSelectedStyle,
iconTheme: iconTheme,
);
}

Loading…
Cancel
Save