Hover color for buttons with hover doesn't display in accordion section content.

[CJBuchel]

AccordionSection(
  contentBackgroundColor: Theme.of(context).cardColor,
  header: const Text("Example"),
  content: IconButton(
    onPressed: () {},
    icon: const Icon(
      Icons.delete,
      color: Colors.red,
    ),
  ),
),

With the above accordion section, buttons that have a hover like an icon button don't display the actual hover. They do actually display, but it's underneath the section content in the z-index/stack.

So far my way around it is wrapping things in material widgets and setting them as the same background color or by making them transparent. But it's not the greatest solution because material messes with a few on my actual widgets in practice by making the background a bit odd.

AccordionSection(
  contentBackgroundColor: Theme.of(context).cardColor,
  header: const Text("Example"),
  content: Material(
    color: Colors.transparent,
    child: IconButton(
      onPressed: () {},
      icon: const Icon(
        Icons.delete,
        color: Colors.red,
      ),
    ),
  ),
),

[GotJimmy]

Which platform is that? Can you send a screen recording?

[CJBuchel]

Flutter 3.13.4, Dart 3.1.2, Machine Pop Os 22.04, And I'm compiling for chrome and linux. In both cases the hover is invisible.

I only caught the issue because my button wasn't padded and I could see the hover working behind the content instead of in front.

Changing the contents background also doesn't solve the issue that I can see either. At first I thought it was because the hover color was just matching the background for some reason. The full implementation that I'm using with the accordion is below.

class TeamEditor extends StatelessWidget {
  final ValueNotifier<String?> selectedTeamNumber;
  const TeamEditor({
    Key? key,
    required this.selectedTeamNumber,
  }) : super(key: key);

  Widget _paddedInner(Widget child) {
    return Padding(
      padding: const EdgeInsets.all(50),
      child: child,
    );
  }

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder(
      valueListenable: selectedTeamNumber,
      builder: (context, String? teamNumber, child) {
        if (teamNumber == null) {
          return const Center(
            child: Text("No Team Selected", style: TextStyle(fontSize: 30)),
          );
        } else {
          return Column(
            children: [
              // info banner
              Container(
                height: 50,
                decoration: BoxDecoration(
                  border: Border(
                    bottom: BorderSide(
                      color: AppTheme.isDarkTheme ? Colors.white : Colors.black,
                    ),
                  ),
                ),
                child: TeamInfoBanner(
                  teamNumber: teamNumber,
                ),
              ),

              // team settings
              Expanded(
                child: SingleChildScrollView(
                  child: _paddedInner(
                    Accordion(
                      maxOpenSections: 1,
                      children: [
                        // general settings
                        AccordionSection(
                          isOpen: true,
                          headerBackgroundColor: Theme.of(context).colorScheme.secondary.withOpacity(0.1),
                          contentBackgroundColor: Theme.of(context).cardColor,
                          header: const SizedBox(
                            height: 50,
                            child: Center(
                              child: Text("General Settings"),
                            ),
                          ),
                          content: TeamGeneralEdit(
                            teamNumber: teamNumber,
                            onTeamDelete: () {
                              selectedTeamNumber.value = null;
                            },
                          ),
                        ),

                        // match scores
                        AccordionSection(
                          isOpen: false,
                          headerBackgroundColor: Theme.of(context).colorScheme.secondary.withOpacity(0.1),
                          contentBackgroundColor: Theme.of(context).cardColor,
                          header: const SizedBox(
                            height: 50,
                            child: Center(
                              child: Text("Match Scores"),
                            ),
                          ),
                          content: MatchScores(teamNumber: teamNumber),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ],
          );
        }
      },
    );
  }
}

[GotJimmy]

I had the same issue as you. Don't know why at this point but I found a possible solution that might work for you:

https://github.com/GotJimmy/accordion/assets/6039735/141d69c9-ed50-4706-93e3-23d09434cc64

[GotJimmy]

Oh, that's replacing the IconButton widget with a TextButton widget:

         AccordionSection(
              isOpen: true,
              headerBackgroundColor:
                  Theme.of(context).colorScheme.secondary.withOpacity(0.1),
              contentBackgroundColor: Theme.of(context).cardColor,
              contentVerticalPadding: 0,
              header: const SizedBox(
                height: 50,
                child: Center(
                  child: Text("General Settings"),
                ),
              ),
              content: TextButton(
                style: ButtonStyle(
                    padding: MaterialStateProperty.all(EdgeInsets.zero)),
                onPressed: () {},
                child: const Icon(Icons.access_alarm, size: 100),
              ),
            ),

[CJBuchel]

Yea, a few other buttons seem to work just fine. Might just be icon buttons which have this hover issue. In any case I've settled on using a the accordion and surrounding my main widget in a material widget with a transparent background. The issue I had before with it was unrelated. So the solution doesn't cause any problems or change with my main content.

AccordionSection(
  isOpen: false,
  headerBackgroundColor: Theme.of(context).colorScheme.secondary.withOpacity(0.1),
  contentBackgroundColor: Theme.of(context).cardColor,
  header: const SizedBox(
    height: 50,
    child: Center(
      child: Text("Match Scores"),
    ),
  ),
  content: Material(
    color: Colors.transparent,
    child: _selectedTeamAutoNotifier(builder: (t) {
      return MatchScores(team: t);
    }),
  ),
),