dartlangeditorflutterflutter-appsflutter-examplesflutter-packageflutter-widgetquillquill-deltaquilljsreactquillrich-textrich-text-editorwysiwygwysiwyg-editor
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
141 lines
4.9 KiB
141 lines
4.9 KiB
# Custom Toolbar |
|
|
|
If you want to use custom toolbar but still want the support of this libray |
|
You can use the `QuillBaseToolbar` which is the base for the `QuillToolbar` |
|
|
|
Example: |
|
|
|
```dart |
|
QuillProvider( |
|
configurations: QuillConfigurations( |
|
controller: _controller, |
|
sharedConfigurations: const QuillSharedConfigurations(), |
|
), |
|
child: Column( |
|
children: [ |
|
QuillBaseToolbar( |
|
configurations: QuillBaseToolbarConfigurations( |
|
toolbarSize: 15 * 2, |
|
multiRowsDisplay: false, |
|
childrenBuilder: (context) { |
|
final controller = context.requireQuillController; |
|
return [ |
|
QuillToolbarImageButton( |
|
controller: controller, |
|
options: const QuillToolbarImageButtonOptions(), |
|
), |
|
QuillToolbarHistoryButton( |
|
controller: controller, |
|
options: |
|
const QuillToolbarHistoryButtonOptions(isUndo: true), |
|
), |
|
QuillToolbarHistoryButton( |
|
controller: controller, |
|
options: |
|
const QuillToolbarHistoryButtonOptions(isUndo: false), |
|
), |
|
QuillToolbarToggleStyleButton( |
|
attribute: Attribute.bold, |
|
controller: controller, |
|
options: const QuillToolbarToggleStyleButtonOptions( |
|
iconData: Icons.format_bold, |
|
iconSize: 20, |
|
), |
|
), |
|
QuillToolbarToggleStyleButton( |
|
attribute: Attribute.italic, |
|
controller: controller, |
|
options: const QuillToolbarToggleStyleButtonOptions( |
|
iconData: Icons.format_italic, |
|
iconSize: 20, |
|
), |
|
), |
|
QuillToolbarToggleStyleButton( |
|
attribute: Attribute.underline, |
|
controller: controller, |
|
options: const QuillToolbarToggleStyleButtonOptions( |
|
iconData: Icons.format_underline, |
|
iconSize: 20, |
|
), |
|
), |
|
QuillToolbarClearFormatButton( |
|
controller: controller, |
|
options: const QuillToolbarClearFormatButtonOptions( |
|
iconData: Icons.format_clear, |
|
iconSize: 20, |
|
), |
|
), |
|
VerticalDivider( |
|
indent: 12, |
|
endIndent: 12, |
|
color: Colors.grey.shade400, |
|
), |
|
QuillToolbarSelectHeaderStyleButtons( |
|
controller: controller, |
|
options: const QuillToolbarSelectHeaderStyleButtonsOptions( |
|
iconSize: 20, |
|
), |
|
), |
|
QuillToolbarToggleStyleButton( |
|
attribute: Attribute.ol, |
|
controller: controller, |
|
options: const QuillToolbarToggleStyleButtonOptions( |
|
iconData: Icons.format_list_numbered, |
|
iconSize: 20, |
|
), |
|
), |
|
QuillToolbarToggleStyleButton( |
|
attribute: Attribute.ul, |
|
controller: controller, |
|
options: const QuillToolbarToggleStyleButtonOptions( |
|
iconData: Icons.format_list_bulleted, |
|
iconSize: 20, |
|
), |
|
), |
|
QuillToolbarToggleStyleButton( |
|
attribute: Attribute.blockQuote, |
|
controller: controller, |
|
options: const QuillToolbarToggleStyleButtonOptions( |
|
iconData: Icons.format_quote, |
|
iconSize: 20, |
|
), |
|
), |
|
VerticalDivider( |
|
indent: 12, |
|
endIndent: 12, |
|
color: Colors.grey.shade400, |
|
), |
|
QuillToolbarIndentButton( |
|
controller: controller, |
|
isIncrease: true, |
|
options: const QuillToolbarIndentButtonOptions( |
|
iconData: Icons.format_indent_increase, |
|
iconSize: 20, |
|
)), |
|
QuillToolbarIndentButton( |
|
controller: controller, |
|
isIncrease: false, |
|
options: const QuillToolbarIndentButtonOptions( |
|
iconData: Icons.format_indent_decrease, |
|
iconSize: 20, |
|
), |
|
), |
|
]; |
|
}, |
|
), |
|
), |
|
Expanded( |
|
child: QuillEditor.basic( |
|
configurations: const QuillEditorConfigurations( |
|
readOnly: false, |
|
placeholder: 'Write your notes', |
|
padding: EdgeInsets.all(16), |
|
), |
|
), |
|
) |
|
], |
|
), |
|
) |
|
``` |
|
|
|
if you want more customized toolbar feel free to create your own and use the `controller` to interact with the editor. checkout the `QuillToolbar` and the buttons inside it to see an example of how that will works |