overlayColor has no effect

[NotTsunami]

Hi, I'm using dropdown_button2 in a project and it has been wonderful. Thank you for your work on this great library. I've come across a single issue and that is that overlayColor appears to have no effect on the button. I want to be able to change the color of the button whenever it is hovered over or focused, and the description of overlayColor implies it can do that, but it seems to have no effect at all.

Flutter: 3.16.9 dropdown_button2: 3.0.0-beta.10

Attached below is a reproducible example:

import 'package:dropdown_button2/dropdown_button2.dart';
import 'package:flutter/material.dart';

final MaterialStateProperty<Color?> overlayColor = MaterialStateProperty.resolveWith<Color?>(
  (Set<MaterialState> states) {
    if (states.contains(MaterialState.focused)) {
      return const Color.fromARGB(255, 255, 0, 0);
    } else if (states.contains(MaterialState.hovered)) {
      return const Color.fromARGB(255, 0, 255, 115);
    }
    return null;
  },
);

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> values = ['Test 1', 'Test 2', 'Test 3', 'Test 4'];
  String value = 'Test 2';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('My Project'),
      ),
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text(
              'My Project',
              style: TextStyle(fontSize: 12.0, height: 1.0),
            ),
            Container(
              height: 28.0,
              width: 200,
              margin: const EdgeInsets.only(top: 6.0),
              child: DropdownButtonHideUnderline(
                child: DropdownButton2<String>(
                  isExpanded: true,
                  hint: Row(
                    children: [
                      Expanded(
                        child: Text(
                          value,
                          style: const TextStyle(fontSize: 14.0, height: 1.0, color: Colors.white),
                        ),
                      ),
                    ],
                  ),
                  items: values
                      .map(
                        (String item) => DropdownItem<String>(
                          value: item,
                          height: 40,
                          child: Text(
                            item,
                            style: const TextStyle(fontSize: 14.0, height: 1.0, color: Colors.white),
                          ),
                        ),
                      )
                      .toList(),
                  value: value,
                  onChanged: (ret) {
                    setState(() {
                      value = ret!;
                    });
                  },
                  buttonStyleData: ButtonStyleData(
                    height: 50,
                    width: 200,
                    padding: const EdgeInsets.only(left: 8.0),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(4.0),
                      border: Border.all(
                        color: Colors.white.withAlpha(150),
                      ),
                      color: const Color.fromARGB(255, 36, 68, 109),
                    ),
                    overlayColor: overlayColor,
                  ),
                  dropdownStyleData: DropdownStyleData(
                    maxHeight: 300,
                    width: 200,
                    isOverButton: true,
                    padding: EdgeInsets.zero,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(4.0),
                      color: const Color.fromARGB(255, 36, 68, 109),
                    ),
                  ),
                  menuItemStyleData: MenuItemStyleData(
                    padding: const EdgeInsets.only(left: 8.0),
                    overlayColor: overlayColor,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

[EbriusQuasimodo]

hi! I also have this issue. any solution?

[NotTsunami]

hi! I also have this issue. any solution?

I have not come across a solution for this yet, no. @AhmedLSayed9 Any thoughts?

[AhmedLSayed9]

The issue is related to the flutter framework, check https://github.com/flutter/flutter/issues/110565.

overlayColor has no effect when it's used with color set at decoration. If you remove decoration's color or set it to transparent it should work fine.

[AhmedLSayed9]

I can't find a workaround for now. Using the old "focusColor/hoverColor/highlightColor/splashColor" instead of overlayColor produces the same issue.

[NotTsunami]

Thanks for the update. Appreciate your work on this library! I suppose we should leave this open until it is fixed on the Flutter side.

[AhmedLSayed9]

I suppose we should leave this open until it is fixed on the Flutter side.

Sure.