QuillToolbar.basic constructor
QuillToolbar.basic({
- required QuillController controller,
- Axis axis = Axis.horizontal,
- double toolbarIconSize = kDefaultIconSize,
- double toolbarSectionSpacing = kToolbarSectionSpacing,
- WrapAlignment toolbarIconAlignment = WrapAlignment.center,
- WrapCrossAlignment toolbarIconCrossAlignment = WrapCrossAlignment.center,
- bool showDividers = true,
- bool showFontFamily = true,
- bool showFontSize = true,
- bool showBoldButton = true,
- bool showItalicButton = true,
- bool showSmallButton = false,
- bool showUnderLineButton = true,
- bool showStrikeThrough = true,
- bool showInlineCode = true,
- bool showClearFormat = true,
- bool showAlignmentButtons = false,
- bool showLeftAlignment = true,
- bool showCenterAlignment = true,
- bool showRightAlignment = true,
- bool showJustifyAlignment = true,
- bool showHeaderStyle = true,
- bool showListNumbers = true,
- bool showListBullets = true,
- bool showListCheck = true,
- bool showCodeBlock = true,
- bool showQuote = true,
- bool showIndent = true,
- bool showLink = true,
- bool showUndo = true,
- bool showRedo = true,
- bool showDirection = false,
- bool showSearchButton = true,
- List<
QuillCustomButton> customButtons = const [], - Map<
String, String> ? fontSizeValues, - Map<
String, String> ? fontFamilyValues, - List<
EmbedButtonBuilder> ? embedButtons, - QuillIconTheme? iconTheme,
- QuillDialogTheme? dialogTheme,
- VoidCallback? afterButtonPressed,
- Map<
ToolbarButtons, String> ? tooltips, - Locale? locale,
- Color? color,
- Color? sectionDividerColor,
- double? sectionDividerSpace,
- Key? key,
Implementation
factory QuillToolbar.basic({
required QuillController controller,
Axis axis = Axis.horizontal,
double toolbarIconSize = kDefaultIconSize,
double toolbarSectionSpacing = kToolbarSectionSpacing,
WrapAlignment toolbarIconAlignment = WrapAlignment.center,
WrapCrossAlignment toolbarIconCrossAlignment = WrapCrossAlignment.center,
bool showDividers = true,
bool showFontFamily = true,
bool showFontSize = true,
bool showBoldButton = true,
bool showItalicButton = true,
bool showSmallButton = false,
bool showUnderLineButton = true,
bool showStrikeThrough = true,
bool showInlineCode = true,
bool showClearFormat = true,
bool showAlignmentButtons = false,
bool showLeftAlignment = true,
bool showCenterAlignment = true,
bool showRightAlignment = true,
bool showJustifyAlignment = true,
bool showHeaderStyle = true,
bool showListNumbers = true,
bool showListBullets = true,
bool showListCheck = true,
bool showCodeBlock = true,
bool showQuote = true,
bool showIndent = true,
bool showLink = true,
bool showUndo = true,
bool showRedo = true,
bool showDirection = false,
bool showSearchButton = true,
List<QuillCustomButton> customButtons = const [],
///Map of font sizes in string
Map<String, String>? fontSizeValues,
///Map of font families in string
Map<String, String>? fontFamilyValues,
/// Toolbar items to display for controls of embed blocks
List<EmbedButtonBuilder>? embedButtons,
///The theme to use for the icons in the toolbar, uses type [QuillIconTheme]
QuillIconTheme? iconTheme,
///The theme to use for the theming of the [LinkDialog()],
///shown when embedding an image, for example
QuillDialogTheme? dialogTheme,
/// Callback to be called after any button on the toolbar is pressed.
/// Is called after whatever logic the button performs has run.
VoidCallback? afterButtonPressed,
///Map of tooltips for toolbar buttons
///
///The example is:
///```dart
/// tooltips = <ToolbarButtons, String>{
/// ToolbarButtons.undo: 'Undo',
/// ToolbarButtons.redo: 'Redo',
/// }
///
///```
///
/// To disable tooltips just pass empty map as well.
Map<ToolbarButtons, String>? tooltips,
/// The locale to use for the editor toolbar, defaults to system locale
/// More at https://github.com/singerdmx/flutter-quill#translation
Locale? locale,
/// The color of the toolbar
Color? color,
/// The color of the toolbar section divider
Color? sectionDividerColor,
/// The space occupied by toolbar divider
double? sectionDividerSpace,
Key? key,
}) {
final isButtonGroupShown = [
showFontFamily ||
showFontSize ||
showBoldButton ||
showItalicButton ||
showSmallButton ||
showUnderLineButton ||
showStrikeThrough ||
showInlineCode ||
showClearFormat ||
embedButtons?.isNotEmpty == true,
showAlignmentButtons || showDirection,
showLeftAlignment,
showCenterAlignment,
showRightAlignment,
showJustifyAlignment,
showHeaderStyle,
showListNumbers || showListBullets || showListCheck || showCodeBlock,
showQuote || showIndent,
showLink || showSearchButton
];
//default font size values
final fontSizes = fontSizeValues ?? {'Small': 'small', 'Large': 'large', 'Huge': 'huge', 'Clear': '0'};
//default font family values
final fontFamilies = fontFamilyValues ??
{
'Sans Serif': 'sans-serif',
'Serif': 'serif',
'Monospace': 'monospace',
'Ibarra Real Nova': 'ibarra-real-nova',
'SquarePeg': 'square-peg',
'Nunito': 'nunito',
'Pacifico': 'pacifico',
'Roboto Mono': 'roboto-mono',
'Clear': 'Clear'
};
//default button tooltips
final buttonTooltips = tooltips ??
<ToolbarButtons, String>{
ToolbarButtons.undo: 'Undo',
ToolbarButtons.redo: 'Redo',
ToolbarButtons.fontFamily: 'Font family',
ToolbarButtons.fontSize: 'Font size',
ToolbarButtons.bold: 'Bold',
ToolbarButtons.italic: 'Italic',
ToolbarButtons.small: 'Small',
ToolbarButtons.underline: 'Underline',
ToolbarButtons.strikeThrough: 'Strike through',
ToolbarButtons.inlineCode: 'Inline code',
ToolbarButtons.color: 'Font color',
ToolbarButtons.backgroundColor: 'Background color',
ToolbarButtons.clearFormat: 'Clear format',
ToolbarButtons.leftAlignment: 'Align left',
ToolbarButtons.centerAlignment: 'Align center',
ToolbarButtons.rightAlignment: 'Align right',
ToolbarButtons.justifyAlignment: 'Justify win width',
ToolbarButtons.direction: 'Text direction',
ToolbarButtons.headerStyle: 'Header style',
ToolbarButtons.listNumbers: 'Numbered list',
ToolbarButtons.listBullets: 'Bullet list',
ToolbarButtons.listChecks: 'Checked list',
ToolbarButtons.codeBlock: 'Code block',
ToolbarButtons.quote: 'Quote',
ToolbarButtons.indentIncrease: 'Increase indent',
ToolbarButtons.indentDecrease: 'Decrease indent',
ToolbarButtons.link: 'Insert URL',
ToolbarButtons.search: 'Search',
};
return QuillToolbar(
key: key,
axis: axis,
color: color,
toolbarSize: toolbarIconSize * 2,
toolbarSectionSpacing: toolbarSectionSpacing,
toolbarIconAlignment: toolbarIconAlignment,
toolbarIconCrossAlignment: toolbarIconCrossAlignment,
customButtons: customButtons,
locale: locale,
afterButtonPressed: afterButtonPressed,
children: [
if (showUndo)
HistoryButton(
icon: Icons.undo_outlined,
iconSize: toolbarIconSize,
tooltip: buttonTooltips[ToolbarButtons.undo],
controller: controller,
undo: true,
iconTheme: iconTheme,
afterButtonPressed: afterButtonPressed,
),
if (showRedo)
HistoryButton(
icon: Icons.redo_outlined,
iconSize: toolbarIconSize,
tooltip: buttonTooltips[ToolbarButtons.redo],
controller: controller,
undo: false,
iconTheme: iconTheme,
afterButtonPressed: afterButtonPressed,
),
if (showFontFamily)
QuillFontFamilyButton(
iconTheme: iconTheme,
iconSize: toolbarIconSize,
tooltip: buttonTooltips[ToolbarButtons.fontFamily],
attribute: Attribute.font,
controller: controller,
rawItemsMap: fontFamilies,
afterButtonPressed: afterButtonPressed,
),
if (showFontSize)
QuillFontSizeButton(
iconTheme: iconTheme,
iconSize: toolbarIconSize,
tooltip: buttonTooltips[ToolbarButtons.fontSize],
attribute: Attribute.size,
controller: controller,
rawItemsMap: fontSizes,
afterButtonPressed: afterButtonPressed,
),
if (showBoldButton)
ToggleStyleButton(
attribute: Attribute.bold,
icon: Icons.format_bold,
iconSize: toolbarIconSize,
tooltip: buttonTooltips[ToolbarButtons.bold],
controller: controller,
iconTheme: iconTheme,
afterButtonPressed: afterButtonPressed,
),
if (showItalicButton)
ToggleStyleButton(
attribute: Attribute.italic,
icon: Icons.format_italic,
iconSize: toolbarIconSize,
tooltip: buttonTooltips[ToolbarButtons.italic],
controller: controller,
iconTheme: iconTheme,
afterButtonPressed: afterButtonPressed,
),
if (showSmallButton)
ToggleStyleButton(
attribute: Attribute.small,
icon: Icons.format_size,
iconSize: toolbarIconSize,
tooltip: buttonTooltips[ToolbarButtons.small],
controller: controller,
iconTheme: iconTheme,
afterButtonPressed: afterButtonPressed,
),
if (showUnderLineButton)
ToggleStyleButton(
attribute: Attribute.underline,
icon: Icons.format_underline,
iconSize: toolbarIconSize,
tooltip: buttonTooltips[ToolbarButtons.underline],
controller: controller,
iconTheme: iconTheme,
afterButtonPressed: afterButtonPressed,
),
if (showStrikeThrough)
ToggleStyleButton(
attribute: Attribute.strikeThrough,
icon: Icons.format_strikethrough,
iconSize: toolbarIconSize,
tooltip: buttonTooltips[ToolbarButtons.strikeThrough],
controller: controller,
iconTheme: iconTheme,
afterButtonPressed: afterButtonPressed,
),
if (showInlineCode)
ToggleStyleButton(
attribute: Attribute.inlineCode,
icon: Icons.code,
iconSize: toolbarIconSize,
tooltip: buttonTooltips[ToolbarButtons.inlineCode],
controller: controller,
iconTheme: iconTheme,
afterButtonPressed: afterButtonPressed,
),
if (showClearFormat)
ClearFormatButton(
icon: Icons.format_clear,
iconSize: toolbarIconSize,
tooltip: buttonTooltips[ToolbarButtons.clearFormat],
controller: controller,
iconTheme: iconTheme,
afterButtonPressed: afterButtonPressed,
),
if (embedButtons != null)
for (final builder in embedButtons) builder(controller, toolbarIconSize, iconTheme, dialogTheme),
if (showDividers &&
isButtonGroupShown[0] &&
(isButtonGroupShown[1] ||
isButtonGroupShown[2] ||
isButtonGroupShown[3] ||
isButtonGroupShown[4] ||
isButtonGroupShown[5]))
AxisDivider(axis, color: sectionDividerColor, space: sectionDividerSpace),
if (showAlignmentButtons)
SelectAlignmentButton(
controller: controller,
tooltips: Map.of(buttonTooltips)
..removeWhere((key, value) => ![
ToolbarButtons.leftAlignment,
ToolbarButtons.centerAlignment,
ToolbarButtons.rightAlignment,
ToolbarButtons.justifyAlignment,
].contains(key)),
iconSize: toolbarIconSize,
iconTheme: iconTheme,
showLeftAlignment: showLeftAlignment,
showCenterAlignment: showCenterAlignment,
showRightAlignment: showRightAlignment,
showJustifyAlignment: showJustifyAlignment,
afterButtonPressed: afterButtonPressed,
),
if (showDirection)
ToggleStyleButton(
attribute: Attribute.rtl,
tooltip: buttonTooltips[ToolbarButtons.direction],
controller: controller,
icon: Icons.format_textdirection_r_to_l,
iconSize: toolbarIconSize,
iconTheme: iconTheme,
afterButtonPressed: afterButtonPressed,
),
if (showDividers &&
isButtonGroupShown[1] &&
(isButtonGroupShown[2] || isButtonGroupShown[3] || isButtonGroupShown[4] || isButtonGroupShown[5]))
AxisDivider(axis, color: sectionDividerColor, space: sectionDividerSpace),
if (showHeaderStyle)
SelectHeaderStyleButton(
tooltip: buttonTooltips[ToolbarButtons.headerStyle],
controller: controller,
axis: axis,
iconSize: toolbarIconSize,
iconTheme: iconTheme,
afterButtonPressed: afterButtonPressed,
),
if (showDividers &&
showHeaderStyle &&
isButtonGroupShown[2] &&
(isButtonGroupShown[3] || isButtonGroupShown[4] || isButtonGroupShown[5]))
AxisDivider(axis, color: sectionDividerColor, space: sectionDividerSpace),
if (showListNumbers)
ToggleStyleButton(
attribute: Attribute.ol,
tooltip: buttonTooltips[ToolbarButtons.listNumbers],
controller: controller,
icon: Icons.format_list_numbered,
iconSize: toolbarIconSize,
iconTheme: iconTheme,
afterButtonPressed: afterButtonPressed,
),
if (showListBullets)
ToggleStyleButton(
attribute: Attribute.ul,
tooltip: buttonTooltips[ToolbarButtons.listBullets],
controller: controller,
icon: Icons.format_list_bulleted,
iconSize: toolbarIconSize,
iconTheme: iconTheme,
afterButtonPressed: afterButtonPressed,
),
if (showListCheck)
ToggleCheckListButton(
attribute: Attribute.unchecked,
tooltip: buttonTooltips[ToolbarButtons.listChecks],
controller: controller,
icon: Icons.check_box,
iconSize: toolbarIconSize,
iconTheme: iconTheme,
afterButtonPressed: afterButtonPressed,
),
if (showCodeBlock)
ToggleStyleButton(
attribute: Attribute.codeBlock,
tooltip: buttonTooltips[ToolbarButtons.codeBlock],
controller: controller,
icon: Icons.code,
iconSize: toolbarIconSize,
iconTheme: iconTheme,
afterButtonPressed: afterButtonPressed,
),
if (showDividers && isButtonGroupShown[3] && (isButtonGroupShown[4] || isButtonGroupShown[5]))
AxisDivider(axis, color: sectionDividerColor, space: sectionDividerSpace),
if (showQuote)
ToggleStyleButton(
attribute: Attribute.blockQuote,
tooltip: buttonTooltips[ToolbarButtons.quote],
controller: controller,
icon: Icons.format_quote,
iconSize: toolbarIconSize,
iconTheme: iconTheme,
afterButtonPressed: afterButtonPressed,
),
if (showIndent)
IndentButton(
icon: Icons.format_indent_increase,
iconSize: toolbarIconSize,
tooltip: buttonTooltips[ToolbarButtons.indentIncrease],
controller: controller,
isIncrease: true,
iconTheme: iconTheme,
afterButtonPressed: afterButtonPressed,
),
if (showIndent)
IndentButton(
icon: Icons.format_indent_decrease,
iconSize: toolbarIconSize,
tooltip: buttonTooltips[ToolbarButtons.indentDecrease],
controller: controller,
isIncrease: false,
iconTheme: iconTheme,
afterButtonPressed: afterButtonPressed,
),
if (showDividers && isButtonGroupShown[4] && isButtonGroupShown[5])
AxisDivider(axis, color: sectionDividerColor, space: sectionDividerSpace),
if (showLink)
LinkStyleButton(
tooltip: buttonTooltips[ToolbarButtons.link],
controller: controller,
iconSize: toolbarIconSize,
iconTheme: iconTheme,
dialogTheme: dialogTheme,
afterButtonPressed: afterButtonPressed,
),
if (showSearchButton)
SearchButton(
icon: Icons.search,
iconSize: toolbarIconSize,
tooltip: buttonTooltips[ToolbarButtons.search],
controller: controller,
iconTheme: iconTheme,
dialogTheme: dialogTheme,
afterButtonPressed: afterButtonPressed,
),
if (customButtons.isNotEmpty)
if (showDividers) AxisDivider(axis, color: sectionDividerColor, space: sectionDividerSpace),
for (var customButton in customButtons)
QuillIconButton(
highlightElevation: 0,
hoverElevation: 0,
size: toolbarIconSize * kIconButtonFactor,
icon: Icon(customButton.icon, size: toolbarIconSize),
tooltip: customButton.tooltip,
borderRadius: iconTheme?.borderRadius ?? 2,
onPressed: customButton.onTap,
afterPressed: afterButtonPressed,
),
],
);
}