Add Font Size dropdown to the toolbar (#790)

* Update quill_dropdown_button.dart

* Update toolbar.dart

* Update quill_dropdown_button.dart

* Update quill_dropdown_button.dart

* Update toolbar.dart

* Update quill_dropdown_button.dart

* Update toolbar.dart

* Update toolbar.dart

* Update toolbar.dart

* Update toolbar.dart

* Update toolbar.dart

* Update quill_dropdown_button.dart

* Update toolbar.dart

* Update quill_dropdown_button.dart

* Update toolbar.dart
pull/791/head
mark8044 3 years ago committed by GitHub
parent e697c4fc2b
commit 7b330c95f0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 40
      lib/src/widgets/toolbar.dart
  2. 20
      lib/src/widgets/toolbar/quill_dropdown_button.dart

@ -21,6 +21,7 @@ import 'toolbar/select_header_style_button.dart';
import 'toolbar/toggle_check_list_button.dart'; import 'toolbar/toggle_check_list_button.dart';
import 'toolbar/toggle_style_button.dart'; import 'toolbar/toggle_style_button.dart';
import 'toolbar/video_button.dart'; import 'toolbar/video_button.dart';
import 'toolbar/quill_dropdown_button.dart';
export 'toolbar/clear_format_button.dart'; export 'toolbar/clear_format_button.dart';
export 'toolbar/color_button.dart'; export 'toolbar/color_button.dart';
@ -72,6 +73,7 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget {
double toolbarSectionSpacing = 4, double toolbarSectionSpacing = 4,
WrapAlignment toolbarIconAlignment = WrapAlignment.center, WrapAlignment toolbarIconAlignment = WrapAlignment.center,
bool showDividers = true, bool showDividers = true,
bool showFontSize = true,
bool showBoldButton = true, bool showBoldButton = true,
bool showItalicButton = true, bool showItalicButton = true,
bool showSmallButton = false, bool showSmallButton = false,
@ -108,6 +110,10 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget {
WebImagePickImpl? webImagePickImpl, WebImagePickImpl? webImagePickImpl,
WebVideoPickImpl? webVideoPickImpl, WebVideoPickImpl? webVideoPickImpl,
///List of font sizes in [int]
List? fontSizeValues,
int? initialFontSizeValue,
///The theme to use for the icons in the toolbar, uses type [QuillIconTheme] ///The theme to use for the icons in the toolbar, uses type [QuillIconTheme]
QuillIconTheme? iconTheme, QuillIconTheme? iconTheme,
@ -121,6 +127,7 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget {
Key? key, Key? key,
}) { }) {
final isButtonGroupShown = [ final isButtonGroupShown = [
showFontSize ||
showBoldButton || showBoldButton ||
showItalicButton || showItalicButton ||
showSmallButton || showSmallButton ||
@ -143,6 +150,20 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget {
showLink showLink
]; ];
//default font size values
final fontSizes = fontSizeValues ?? [
10,
12,
14,
16,
18,
20,
24,
28,
32,
48
];
return QuillToolbar( return QuillToolbar(
key: key, key: key,
toolbarHeight: toolbarIconSize * 2, toolbarHeight: toolbarIconSize * 2,
@ -167,6 +188,25 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget {
undo: false, undo: false,
iconTheme: iconTheme, iconTheme: iconTheme,
), ),
if (showFontSize)
QuillDropdownButton(
iconTheme: iconTheme,
height:toolbarIconSize*2,
items:[
for (var fontSize in fontSizes)
PopupMenuItem<int>(
value: fontSize,
child: Text(fontSize.toString()),
),
],
onSelected:(newSize){
if (newSize != null)
{
controller.formatSelection(Attribute.fromKeyValue('size', newSize));
}
},
initialValue: fontSizes[initialFontSizeValue ?? 0],
),
if (showBoldButton) if (showBoldButton)
ToggleStyleButton( ToggleStyleButton(
attribute: Attribute.bold, attribute: Attribute.bold,

@ -1,10 +1,8 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import '../../models/themes/quill_icon_theme.dart'; import '../../models/themes/quill_icon_theme.dart';
@Deprecated('Not being used')
class QuillDropdownButton<T> extends StatefulWidget { class QuillDropdownButton<T> extends StatefulWidget {
const QuillDropdownButton({ const QuillDropdownButton({
required this.child,
required this.initialValue, required this.initialValue,
required this.items, required this.items,
required this.onSelected, required this.onSelected,
@ -20,7 +18,6 @@ class QuillDropdownButton<T> extends StatefulWidget {
final Color? fillColor; final Color? fillColor;
final double hoverElevation; final double hoverElevation;
final double highlightElevation; final double highlightElevation;
final Widget child;
final T initialValue; final T initialValue;
final List<PopupMenuEntry<T>> items; final List<PopupMenuEntry<T>> items;
final ValueChanged<T> onSelected; final ValueChanged<T> onSelected;
@ -32,6 +29,14 @@ class QuillDropdownButton<T> extends StatefulWidget {
// ignore: deprecated_member_use_from_same_package // ignore: deprecated_member_use_from_same_package
class _QuillDropdownButtonState<T> extends State<QuillDropdownButton<T>> { class _QuillDropdownButtonState<T> extends State<QuillDropdownButton<T>> {
int _currentValue = 0;
@override
void initState(){
_currentValue = widget.initialValue as int;
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return ConstrainedBox( return ConstrainedBox(
@ -81,18 +86,21 @@ class _QuillDropdownButtonState<T> extends State<QuillDropdownButton<T>> {
// if (widget.onCanceled != null) widget.onCanceled(); // if (widget.onCanceled != null) widget.onCanceled();
return null; return null;
} }
widget.onSelected(newValue); setState(() {
_currentValue = newValue as int;
widget.onSelected(newValue);
});
}); });
} }
Widget _buildContent(BuildContext context) { Widget _buildContent(BuildContext context) {
return ConstrainedBox( return ConstrainedBox(
constraints: const BoxConstraints.tightFor(width: 110), constraints: const BoxConstraints.tightFor(width: 60),
child: Padding( child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8), padding: const EdgeInsets.symmetric(horizontal: 8),
child: Row( child: Row(
children: [ children: [
widget.child, Text(_currentValue.toString()),
Expanded(child: Container()), Expanded(child: Container()),
const Icon(Icons.arrow_drop_down, size: 15) const Icon(Icons.arrow_drop_down, size: 15)
], ],

Loading…
Cancel
Save