Let's consider the original code:

  Widget _buildContent(BuildContext context) {
    final theme = Theme.of(context);
    final hasFinalWidth = options.width != null;
    return Padding(
      padding: options.padding ?? const EdgeInsets.fromLTRB(10, 0, 0, 0),
      child: Row(
        mainAxisSize: !hasFinalWidth ? MainAxisSize.min : MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          UtilityWidgets.maybeWidget(
            enabled: hasFinalWidth,
            wrapper: (child) => Expanded(child: child),
            child: Text(
              _valueToText[_selectedAttribute]!,
              overflow: options.labelOverflow,
              style: options.style ??
                  TextStyle(
                    fontSize: iconSize / 1.15,
                    color:
                        iconTheme?.iconUnselectedColor ?? theme.iconTheme.color,
                  ),
            ),
          ),
          const SizedBox(width: 3),
          Icon(
            Icons.arrow_drop_down,
            size: iconSize / 1.15,
            color: iconTheme?.iconUnselectedColor ?? theme.iconTheme.color,
          )
        ],
      ),
    );
  }

The new code:

        builder: (context) {
          final isMaterial3 = Theme.of(context).useMaterial3;
          final child = Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text(
                _label(_selectedItem),
                style: widget.options.textStyle ??
                    TextStyle(
                      fontSize: iconSize / 1.15,
                    ),
              ),
              Icon(
                Icons.arrow_drop_down,
                size: iconSize * iconButtonFactor,
              ),
            ],
          );
          if (!isMaterial3) {
            return RawMaterialButton(
              onPressed: _onDropdownButtonPressed,
              child: child,
            );
          }
          return IconButton(
            onPressed: _onDropdownButtonPressed,
            icon: child,
          );
        },
      ),
    );

You just simply remove padding for the whole Row?! You removed mainAxisAlignment and mainAxisSize even didn't understanding for what it is and that is can be used somewhere?! You removed the _showMenu which is similar to font family selection and where the selected item was highlighted by another color?!

Why? Why did you remove anything if you did not know how it is working.

I'm not removing anything this time, it just conflicts between many buttons made by PRs

Replace with QuillToolbarSelectAlignmentButtons
it has all the old properties you needs

Please restore my code QuillToolbarSelectHeaderStyleDropdownButton because it did not use MenuAnchor and its GUI must be similar to QuillToolbarFontFamilyButton and QuillToolbarFontSizeButton.

I already told you, there was been conflicts and I need you to re add the options but you didn't respond so I had to remove them, I can restore them but I need you to use them in the widget

To make it clear, you did upgrade from your local branch to 9.0.5?? it's not really related to 9.0.5
you can take a look at the the releases using tag

we did not remove them in 9.0.5

Well.

This is a code from 8.6.4 in fil lib/src/widgets/toolbar/buttons/quill_icon_button.dart

  @override
  Widget build(BuildContext context) {
    return ConstrainedBox(
      constraints: BoxConstraints.tightFor(width: size, height: size),
      child: UtilityWidgets.maybeTooltip(
        message: tooltip,
        child: RawMaterialButton(
          visualDensity: VisualDensity.compact,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(borderRadius),
          ),
          fillColor: fillColor,
          elevation: 0,
          hoverElevation: hoverElevation,
          highlightElevation: hoverElevation,
          onPressed: () {
            onPressed?.call();
            afterPressed?.call();
          },
          child: icon,
        ),
      ),
    );
  }

As you may see it contains fillColor depending of isToggle, i.e. icon is colored when some style is selected.

Now let's see on latest code:

  Widget build(BuildContext context) {
    if (isFilled) {
      return IconButton.filled(
        padding: padding,
        onPressed: onPressed,
        icon: icon,
        style: iconStyle,
      );
    }
    return IconButton(
      padding: padding,
      onPressed: () {
        onPressed?.call();
        afterPressed?.call();
      },
      icon: icon,
      style: iconFilledStyle,
    );
  }

Do you understand that this is not equivalent modification? You removed constraints, you removed tooltip, you removed rounded rectangle, you removed afterPressed call. You break the visual representation completely.

How do you suggest me to restore rounded rectangle hovering, how do you suggest me to have the buttons size? Use the addiional ThemeData, wrap each icon in ConstarainedBox? Why do I need to do this if all was working fine before?

To make it clear, you did upgrade from your local branch to 9.0.5??
No. I upgraded from pub.dev:

dependency:
flutter_quill: ^9.0.5

Replace with QuillToolbarSelectAlignmentButtons

Are you sure? I see the parameter options which I used to pass my own tooltips and where in the code of this class is it handled? So again breaking change without backward compability. This class is no go.

Just for experiment I added those class and what I see?

Where is correct vertical alignment for all buttons? Also I see different icon looks. Look at aligment sharp icons and remain ones which looks bigger. Again breaking change without backward compability.

@singerdmx versions from 8.6.4 is buggy and not backward compatible.

Just for experiment I added those class and what I see?

Where is correct vertical alignment for all buttons? Also I see different icon looks. Look at aligment sharp icons and remain ones which looks bigger. Again breaking change without backward compability.

@singerdmx versions from 8.6.4 is buggy and not backward compatible.

I don't know about your code sample, I test things in the example and it looks fine
Please send it so I can test it

Why font family has rectangle highlighting (where rounding as before) and bold button has circle hightling (as it was rounding rectangle)?

I don't know about your code sample, I test things in the example and it looks fine
What are you talking about. Until version 8.6.4 I updated version and I never had problems with GUI, it was not changed. The problems occurred on each new version

Please send it so I can test it

Are you kidding? How can I send you a whole project? Just create and example for yourself (on all platforms!). It is simple - just quill controlls separated by divider.

P.S. The simple solution is to revert to 8.6.4 or at least 9.0.0-dev where you make QuillProvider optional and try to implement new modification carefull with testing at least on 4 platforms: adnroid, ios, web, windows.

I don't know about your code sample, I test things in the example and it looks fine
What are you talking about. Until version 8.6.4 I updated version and I never had problems with GUI, it was not changed. The problems occurred on each new version

Please send it so I can test it

Are you kidding? How can I send you a whole project? Just create and example for yourself (on all platforms!). It is simple - just quill controlls separated by divider.

P.S. The simple solution is to revert to 8.6.4 or at least 9.0.0-dev where you make QuillProvider optional and try to implement new modification carefull with testing at least on 4 platforms: adnroid, ios, web, windows.

I meant the code sample

I don't know about your code sample, I test things in the example and it looks fine
What are you talking about. Until version 8.6.4 I updated version and I never had problems with GUI, it was not changed. The problems occurred on each new version

Please send it so I can test it

Are you kidding? How can I send you a whole project? Just create and example for yourself (on all platforms!). It is simple - just quill controlls separated by divider.

P.S. The simple solution is to revert to 8.6.4 or at least 9.0.0-dev where you make QuillProvider optional and try to implement new modification carefull with testing at least on 4 platforms: adnroid, ios, web, windows.

Reverting as not an option, give me second chance, I will fix the font size issue with the dropdown buttons then the styling using material 3 but I will need you to test thing on the pre release channel

Why font family has rectangle highlighting (where rounding as before) and bold button has circle hightling (as it was rounding rectangle)?

It's new material 3 behavior

Just for experiment I added those class and what I see?

Where is correct vertical alignment for all buttons? Also I see different icon looks. Look at aligment sharp icons and remain ones which looks bigger. Again breaking change without backward compability.

@singerdmx versions from 8.6.4 is buggy and not backward compatible.

Now it's fixed, the justify min width is back

Now I'm fixing the toolbar when multiRowsDisplay is false

You removed the _showMenu which is similar to font family selection and where the selected item was highlighted by another color?!

Again, I used the material 3 dropdown instead of the current one

Well.

This is a code from 8.6.4 in fil lib/src/widgets/toolbar/buttons/quill_icon_button.dart

  @override
  Widget build(BuildContext context) {
    return ConstrainedBox(
      constraints: BoxConstraints.tightFor(width: size, height: size),
      child: UtilityWidgets.maybeTooltip(
        message: tooltip,
        child: RawMaterialButton(
          visualDensity: VisualDensity.compact,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(borderRadius),
          ),
          fillColor: fillColor,
          elevation: 0,
          hoverElevation: hoverElevation,
          highlightElevation: hoverElevation,
          onPressed: () {
            onPressed?.call();
            afterPressed?.call();
          },
          child: icon,
        ),
      ),
    );
  }

As you may see it contains fillColor depending of isToggle, i.e. icon is colored when some style is selected.

Now let's see on latest code:

  Widget build(BuildContext context) {
    if (isFilled) {
      return IconButton.filled(
        padding: padding,
        onPressed: onPressed,
        icon: icon,
        style: iconStyle,
      );
    }
    return IconButton(
      padding: padding,
      onPressed: () {
        onPressed?.call();
        afterPressed?.call();
      },
      icon: icon,
      style: iconFilledStyle,
    );
  }

Do you understand that this is not equivalent modification? You removed constraints, you removed tooltip, you removed rounded rectangle, you removed afterPressed call. You break the visual representation completely.

How do you suggest me to restore rounded rectangle hovering, how do you suggest me to have the buttons size? Use the addiional ThemeData, wrap each icon in ConstarainedBox? Why do I need to do this if all was working fine before?

This issue has been fixed in the latest pre-release

Again, I used the material 3 dropdown instead of the current one.

What do you mean material dropdown? Is it different than one which is avaiable for years?
My QuillToolbarSelectHeaderStyleDropdownButton was created similar to font family and font size dropdowns. So why than you modified only one class but leave 2 others?

This issue has been fixed in the latest pre-release

I don't know which pre-release are you talking about. Now I have the problem - my GUI is away different after changes.
How can I restore my GUI exactly?

For example, how can I make rounded rectangle highlighting over all toggle buttons? Using Theme with overriden property will not bring any effect. Suggestion?

Again, I used the material 3 dropdown instead of the current one.

What do you mean material dropdown? Is it different than one which is avaiable for years? My QuillToolbarSelectHeaderStyleDropdownButton was created similar to font family and font size dropdowns. So why than you modified only one class but leave 2 others?

I will change the others soon in the pre release

QuillToolbarSelectHeaderStyleDropdownButton

Let's make it clear, @singerdmx and I agreed that it should be dropdown button for the select header style as a default, I create it from scratch but I forgot that it didn't match with the font family and font size

This issue has been fixed in the latest pre-release

I don't know which pre-release are you talking about. Now I have the problem - my GUI is away different after changes. How can I restore my GUI exactly?

For example, how can I make rounded rectangle highlighting over all toggle buttons? Using Theme with overriden property will not bring any effect. Suggestion?

Please use IconButton.styleFrom() to style things, it exists in the QuillIconTheme

Why do you think that I use QuillToolbar.simple? I use QuillToolbar and show only those buttons which I need. So I cannot specify any options you suggested.

Why size of icons and dropdowns in your example image is different? Why normal is away different?

Why do you think that I use QuillToolbar.simple? I use QuillToolbar and show only those buttons which I need.

You still have buttonOptions

Why do you think that I use QuillToolbar.simple? I use QuillToolbar and show only those buttons which I need. So I cannot specify any options you suggested.

You can customize them and decide which button you want with which size,
You can still pass quill icon theme to the options of any button you want to use.

Why size of icons and dropdowns in your example image is different? Why normal is away different?

That's because when I migrated to material 3, both the buttons and dropdown buttons, it was not constant for some reasons, I copied the workaround from the old code and it worked (divide the iconSize by 1.15, but then we had a PR which add iconButtonFactor), now it looks exactly the same to me right now

What do you mean by the size is different?

Also I've just enable useMaterial3 and what I see...

Blue color must be on icon but not on background. Font size is looks weird.

I hope this image from flutter web environment?

I just tested the custom toolbar example and it work perfectly fine

no hovering issues or anything, please use the latest pre-release

What do you mean by the size is different?

Look at dropdowns and toggle buttons.

Where is the problem?

Also I've just enable useMaterial3 and what I see...

Blue color must be on icon but not on background. Font size is looks weird.

Again can you send me the code sample?

Where is the problem?

Don't you see the different height of buttons and dropdowns?

It's not specific to web

Where is the problem?

Don't you see the different height of buttons and dropdowns?

That's another issue, let's fix your current one

All what I did I used the icon button and dropdown from material 3 and that's all, I didn't change anything else like the height

Without the code sample unfortunately I can't help you

All what I did I used the icon button and dropdown from material 3 and that's all, I didn't change anything else like the height
No. You changed code of some classes completely. I am tied to point you.
You changed QuillToolbarToggleStyleButton, QuillToolbarIconButton which affects all toogle buttons. You change header dropdown and select alignment.

If you say you used the icon button and dropdown from material 3 so your code should be looks like:

Widget build(...) {
  if (useMaterial3) {
    return YourNewFunctionality();
  } else {
    return OldTestedAndWorkingFunctionality(); // But you actually changed the functionality of this
  }
}

Without the code sample unfortunately I can't help you

You don't need the example.

How can implement the round rectangle highlightin on mouse hover using current version?

I told you to try to fix it but you dissapeared

Sorry man but I am not a freelancer and developer, and I am not a supporter of this package. I can just suggest the features and fix bugs if I have time and I have some functionality which is absent in a Quill.

Without the code sample unfortunately I can't help you

You don't need the example.

How can implement the round rectangle highlightin on mouse hover using current version?

Use the childBuilder in the base button options and add the old code there to use the old code for all buttons
Just send me your code sample and I will do it

Let me adjust the code and I will send it to you

@MacDeveloper1 @ellet0
I'm also struggling with the same issue. I was relying on the previous toolbar with rounded rectangle buttons (which looked like this in my case):

Now I need to upgrade the package, but it looks like there is a breaking change and it's impossible to get the same design with the new options, leading to much larger, circular buttons, with icons with inconsistent sizes, like so:

Does either of you have a solution or a workaround for this issue?

@MacDeveloper1 @ellet0
I'm also struggling with the same issue. I was relying on the previous toolbar with rounded rectangle buttons (which looked like this in my case):

Now I need to upgrade the package, but it looks like there is a breaking change and it's impossible to get the same design with the new options, leading to much larger, circular buttons, with icons with inconsistent sizes, like so:

Does either of you have a solution or a workaround for this issue?

Thank you for your feedback. I understand this challenge with the transition from Material 2 to Material 3 with the changes that impact the design and user experience of the toolbar

As of Flutter 3.16, Material 3 is the new standard and enabled by default, and we decided to fully adopt it to maintain code simplicity and ensure forward compatibility

Support both Material 2 and 3 not only requires different options and configurations with different widgets, but it would also require extensive conditional checks, complicating the codebase and increasing the maintenance overhead we already tried to improve the source code quality in the past but that's another subject

Here are a few potential workarounds

1. Custom the toolbar and use all the classes and helpers we use in the simple toolbar
2. Use childBuilder, which is a property that allows you to render a different widget with the same widget state and functionality
3. If there's a significant demand for maintaining a Material 2 style option, we would consider creating a new package that has the old widgets without affecting the new one
4. Theme adjustments, Material 3, provide more options to customize the widgets, try to customize them, and see if they fit your needs

We increased the number from 8.x.x to 9.x.x after this new change, indicating it's a breaking change

Consider migrating to Material 3. At some point, Material 2 might be deprecated, or it will no longer receive updates for bug fixes, improvements, and new features

Feel free to ask any questions.

@MacDeveloper1 @ellet0
I'm also struggling with the same issue. I was relying on the previous toolbar with rounded rectangle buttons (which looked like this in my case):

Now I need to upgrade the package, but it looks like there is a breaking change and it's impossible to get the same design with the new options, leading to much larger, circular buttons, with icons with inconsistent sizes, like so:

Does either of you have a solution or a workaround for this issue?

Thank you for your feedback. I understand this challenge with the transition from Material 2 to Material 3 with the changes that impact the design and user experience of the toolbar

As of Flutter 3.16, Material 3 is the new standard and enabled by default, and we decided to fully adopt it to maintain code simplicity and ensure forward compatibility

Support both Material 2 and 3 not only requires different options and configurations with different widgets, but it would also require extensive conditional checks, complicating the codebase and increasing the maintenance overhead we already tried to improve the source code quality in the past but that's another subject

Here are a few potential workarounds

1. Custom the toolbar and use all the classes and helpers we use in the simple toolbar
2. Use childBuilder, which is a property that allows you to render a different widget with the same widget state and functionality
3. If there's a significant demand for maintaining a Material 2 style option, we would consider creating a new package that has the old widgets without affecting the new one
4. Theme adjustments, Material 3, provide more options to customize the widgets, try to customize them, and see if they fit your needs

We increased the number from 8.x.x to 9.x.x after this new change, indicating it's a breaking change

Consider migrating to Material 3. At some point, Material 2 might be deprecated, or it will no longer receive updates for bug fixes, improvements, and new features

Feel free to ask any questions.

Thank you for the quick reply!
I've managed to get something similar to the old UI by using the following options (in case anyone else is having this issue):

final iconButtonData = IconButtonData(
    padding: const EdgeInsets.all(4),
    splashRadius: 32,
    style: ButtonStyle(
      minimumSize: WidgetStateProperty.all(const Size(32, 32)),
      tapTargetSize: MaterialTapTargetSize.shrinkWrap,
      shape: WidgetStateProperty.all(const RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(4)),
      )),
    ),
  );

QuillToolbar.simple(
    configurations: QuillSimpleToolbarConfigurations(
    ...
buttonOptions: QuillSimpleToolbarButtonOptions(
        base: QuillToolbarBaseButtonOptions(
          iconTheme: QuillIconTheme(
            iconButtonUnselectedData: iconButtonData,
            iconButtonSelectedData: iconButtonData,
          ),
          iconSize: 16,
          iconButtonFactor: 1,
        ),
        selectHeaderStyleButtons:
            const QuillToolbarSelectHeaderStyleButtonsOptions(
          attributes: [
            Attribute.header,
            Attribute.h1,
            Attribute.h2,
          ],
        ),
      ),
    ...
  ),
)

Note that this issue had nothing to do with the material version of my app. I was already using Material 3 before flutter_quill did, but flutter_quill changed to using different components when upgrading from 2 to 3, which is why the design of the toolbar is different. In a case like this (where a UI plugin completely changes how the component looks), it'd be nice for the plugin to either:

• Provide default settings (like the above) to make sure the UI stays the same as before, or
• Provide a migration guide, so that people upgrading to the new version of the package know what to do if they want to keep their UI the same as before.

I'm glad you could restore the old look and feel, most of the new used components are the new one from Material 3, Material 2 components can still be used in Materail 3, for example the BottomNavigationBar now it's NavigationBar

While the old component is not deprecated yet and can still be used, we used the new recommended components mentioned in the release changes of Material 3 and Flutter 3.16

We might include an option to use the old look and feel by using something similar to the code snippet you provided.

One of the biggest changes in 8.x.x and 9.x.x is the customization.