Rich text editor for Flutter
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.
 
 
 
 
 

124 lines
3.7 KiB

# Custom Toolbar
If you want to use a custom toolbar but still want the support of this library,
You can use the `QuillBaseToolbar` which is the base for the `QuillToolbar`
Example:
```dart
QuillToolbar.simple(
configurations: const QuillSimpleToolbarConfigurations(
buttonOptions: QuillToolbarButtonOptions(
base: QuillToolbarBaseButtonOptions(
globalIconSize: 20,
globalIconButtonFactor: 1.4,
),
),
),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [
IconButton(
onPressed: () => context
.read<SettingsCubit>()
.updateSettings(
state.copyWith(useCustomQuillToolbar: false)),
icon: const Icon(
Icons.width_normal,
),
),
QuillToolbarHistoryButton(
isUndo: true,
controller: controller,
),
QuillToolbarHistoryButton(
isUndo: false,
controller: controller,
),
QuillToolbarToggleStyleButton(
options: const QuillToolbarToggleStyleButtonOptions(),
controller: controller,
attribute: Attribute.bold,
),
QuillToolbarToggleStyleButton(
options: const QuillToolbarToggleStyleButtonOptions(),
controller: controller,
attribute: Attribute.italic,
),
QuillToolbarToggleStyleButton(
controller: controller,
attribute: Attribute.underline,
),
QuillToolbarClearFormatButton(
controller: controller,
),
const VerticalDivider(),
QuillToolbarImageButton(
controller: controller,
),
QuillToolbarCameraButton(
controller: controller,
),
QuillToolbarVideoButton(
controller: controller,
),
const VerticalDivider(),
QuillToolbarColorButton(
controller: controller,
isBackground: false,
),
QuillToolbarColorButton(
controller: controller,
isBackground: true,
),
const VerticalDivider(),
// This is an implementation that only is used on
// flutter_quill and it's not originally
// implemented in Quill JS API, so it could cause conflicts
// with the original Quill Delta format
QuillToolbarSelectLineHeightStyleDropdownButton(
controller: globalController,
),
const VerticalDivider(),
QuillToolbarSelectHeaderStyleButton(
controller: controller,
),
const VerticalDivider(),
QuillToolbarToggleCheckListButton(
controller: controller,
),
QuillToolbarToggleStyleButton(
controller: controller,
attribute: Attribute.ol,
),
QuillToolbarToggleStyleButton(
controller: controller,
attribute: Attribute.ul,
),
QuillToolbarToggleStyleButton(
controller: controller,
attribute: Attribute.inlineCode,
),
QuillToolbarToggleStyleButton(
controller: controller,
attribute: Attribute.blockQuote,
),
QuillToolbarIndentButton(
controller: controller,
isIncrease: true,
),
QuillToolbarIndentButton(
controller: controller,
isIncrease: false,
),
const VerticalDivider(),
QuillToolbarLinkStyleButton(controller: controller),
],
),
),
)
```
if you want a 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 work