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_style_button.dart';
import 'toolbar/video_button.dart';
import 'toolbar/quill_dropdown_button.dart';
export 'toolbar/clear_format_button.dart';
export 'toolbar/color_button.dart';
@ -72,6 +73,7 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget {
double toolbarSectionSpacing = 4,
WrapAlignment toolbarIconAlignment = WrapAlignment.center,
bool showDividers = true,
bool showFontSize = true,
bool showBoldButton = true,
bool showItalicButton = true,
bool showSmallButton = false,
@ -108,6 +110,10 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget {
WebImagePickImpl? webImagePickImpl,
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]
QuillIconTheme? iconTheme,
@ -121,6 +127,7 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget {
Key? key,
}) {
final isButtonGroupShown = [
showFontSize ||
showBoldButton ||
showItalicButton ||
showSmallButton ||
@ -143,6 +150,20 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget {
showLink
];
//default font size values
final fontSizes = fontSizeValues ?? [
10,
12,
14,
16,
18,
20,
24,
28,
32,
48
];
return QuillToolbar(
key: key,
toolbarHeight: toolbarIconSize * 2,
@ -167,6 +188,25 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget {
undo: false,
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)
ToggleStyleButton(
attribute: Attribute.bold,

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

Loading…
Cancel
Save