Toolbar - Custom toolbars, Export Toolbar buttons

[adrian-moisa]

Currently it is possible only to use the predefined set of buttons. New buttons can be added via the customButtons property however they are inserted only at the end of the toolbar. Adding new editing options in the middle of the Toolbar is impossible. The goal of this ticket is to export the Toolbar buttons such that developers can create custom looking toolbars with a mix of internal buttons and custom made buttons.

Join on discord to get advice and help or follow us on YouTube Visual Coding to learn more about the architecture of Visual Editor and other Flutter apps.

[adrian-moisa]

Now creating custom toolbars is entirely possible:

Widget _toolbar() => Container(
  padding: const EdgeInsets.symmetric(
    vertical: 16,
    horizontal: 8,
  ),
  child: EditorToolbar(
    children: [
      ToggleStyleButton(
        attribute: AttributeM.bold,
        icon: Icons.format_bold,
        iconSize: toolbarIconSize,
        controller: _controller!,
      ),
      ToggleStyleButton(
        attribute: AttributeM.italic,
        icon: Icons.format_italic,
        iconSize: toolbarIconSize,
        controller: _controller!,
      ),
      Padding(
        padding: const EdgeInsets.only(top: 12),
        child: Text(
          'Custom Content',
          style: TextStyle(
            fontSize: 20,
          ),
        ),
      ),
      ToggleStyleButton(
        attribute: AttributeM.small,
        icon: Icons.format_size,
        iconSize: toolbarIconSize,
        controller: _controller!,
      ),
      ToggleStyleButton(
        attribute: AttributeM.underline,
        icon: Icons.format_underline,
        iconSize: toolbarIconSize,
        controller: _controller!,
      ),
      ToggleStyleButton(
        attribute: AttributeM.strikeThrough,
        icon: Icons.format_strikethrough,
        iconSize: toolbarIconSize,
        controller: _controller!,
      ),
    ],
  ),
);