How to change toolbar icons space?

[toknT]

Is there an existing issue for this?

• [X] I have searched the existing issues

The question

toolbarSectionSpacing not working...

QuillToolbar.simple(
                  configurations: QuillSimpleToolbarConfigurations(
                    toolbarSectionSpacing: 0,
                    toolbarIconAlignment: WrapAlignment.start,
                    buttonOptions: const QuillSimpleToolbarButtonOptions(
                      base: QuillToolbarBaseButtonOptions(
                          iconSize: 14,
                          iconButtonFactor: 1,
                          iconTheme: QuillIconTheme(
                              iconButtonUnselectedData:
                                  IconButtonData(iconSize: 10))),
                    ),
)

[EchoEllet]

It seems that it only works if multiRowDisplay is true and it seems to be not documented. I'm not quite sure why however I have poorly added this property in 2023 due to the lack of time.

We will refactor the toolbar to fix common design issues but unfortunately, it will not be anytime soon.

I would suggest to write your own toolbar for now, you can use all of the buttons, and customize them directly:

QuillToolbar(
  configurations: const QuillToolbarConfigurations(),
  child: SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    child: Wrap(
      children: [
        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(),
        QuillToolbarSelectHeaderStyleDropdownButton(
          controller: controller,
        ),
        const VerticalDivider(),
        QuillToolbarSelectLineHeightStyleDropdownButton(
          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),
      ],
    ),
  ),
);

You can use and edit the code snippet above to fit your needs.

[toknT]

We will refactor the toolbar ...

@EchoEllet oh, thanks.