Toggling a formatting option in toolbar does not indicate that the option is selected, Button has no "selected" state.

[Wizzel1]

Is there an existing issue for this?

• [X] I have searched the existing issues

Flutter Quill version

9.2.10

Steps to reproduce

Create a page with this widget

QuillEditor(
                  configurations: QuillEditorConfigurations(
                    controller: _controller!,
                    scrollable: false,
                    readOnly: readOnly,
                    placeholder:
                        readOnly ? null : T.of(context).richTextNoteHint,
                    padding:
                        kIsWeb ? EdgeInsets.zero : const EdgeInsets.all(20),
                  ),
                ),

and toggle Bold, Talic or underlined.

Expected results

I expected the buttons of the selected buttons to be hightlighted

Actual results

Buttons had no "selected" state

[szuwest]

I found that you have to use useMaterial3 ThemeData for the selected state...

[Wizzel1]

I found that you have to use useMaterial3 ThemeData for the selected state...

Can you please provide an example? Its not working for me even if I wrap it in a material 3 theme

[CatHood0]

Update to the last version of the editor (10.0.2). This issue is from that version

[Wizzel1]

Update to the last version of the editor (10.0.2). This issue is from that version

The update didn't change anything. I still don't have a toggled formatting button

[CatHood0]

The update didn't change anything.

I made the same but, i get the expected behavior with the version 10.0.2

[szuwest]

I found that you have to use useMaterial3 ThemeData for the selected state...

Can you please provide an example? Its not working for me even if I wrap it in a material 3 theme

You have to set MaterialApp's theme in the main.dart, not just wrap it.

[szuwest]

I found that you have to use useMaterial3 ThemeData for the selected state...

Can you please provide an example? Its not working for me even if I wrap it in a material 3 theme

If you don't want to use material3, you have to set this QuillToolbar.simple( configurations: QuillSimpleToolbarConfigurations( buttonOptions: QuillSimpleToolbarButtonOptions( base: QuillToolbarBaseButtonOptions( iconTheme: QuillIconTheme( color: Color.red //important here

[Wizzel1]

I found that you have to use useMaterial3 ThemeData for the selected state...

Can you please provide an example? Its not working for me even if I wrap it in a material 3 theme

If you don't want to use material3, you have to set this QuillToolbar.simple( configurations: QuillSimpleToolbarConfigurations( buttonOptions: QuillSimpleToolbarButtonOptions( base: QuillToolbarBaseButtonOptions( iconTheme: QuillIconTheme( color: Color.red //important here

Thanks changing the iconcolor works but for some reason I cant set a background color for the IconButton. Any idea why this doesn't work:

   iconTheme: QuillIconTheme(
    iconButtonSelectedData: IconButtonData(
      style: IconButton.styleFrom(
        backgroundColor: Colors.green,
      ),
      color: Theme.of(context).primaryColor,
    ),
  ),