Skip to content

Latest commit

 

History

History
49 lines (42 loc) · 1.17 KB

custom_buttons.md

File metadata and controls

49 lines (42 loc) · 1.17 KB

Custom QuillToolbar Buttons ✨

You may add custom buttons to the end of the toolbar, via the customButtons option, which is a List of QuillToolbarCustomButtonOptions.

Adding an Icon 🖌️

To add an Icon, we should use a new QuillToolbarCustomButtonOptions class

    QuillToolbarCustomButtonOptions(
        icon: const Icon(Icons.ac_unit),
        tooltip: '',
        onPressed: () {},
        afterButtonPressed: () {},
      ),

Example Usage 📚

Each QuillCustomButton is used as part of the customButtons option as follows:

QuillToolbar.simple(
  controller: _controller,
  configurations: QuillSimpleToolbarConfigurations(
    customButtons: [
      QuillToolbarCustomButtonOptions(
        icon: const Icon(Icons.ac_unit),
        onPressed: () {
          debugPrint('snowflake1');
        },
      ),
      QuillToolbarCustomButtonOptions(
        icon: const Icon(Icons.ac_unit),
        onPressed: () {
          debugPrint('snowflake2');
        },
      ),
      QuillToolbarCustomButtonOptions(
        icon: const Icon(Icons.ac_unit),
        onPressed: () {
          debugPrint('snowflake3');
        },
      ),
    ],
  ),
),