Sireen Ibnu Kabeer
Sireen Ibnu Kabeer

Reputation: 46

Is there any way to customize the colors of DropDownMenuItem's color in the DropDownButtonFormField (Flutter Web)

I want to change the selected DropDownMenuItem's backgroundColor and colors such as hove color, splash color, highlight color of these menu items.

I'am developing it in the flutter web.

I've tried Wrapping ButtonTheme to the DropdownButtonFormField and given colors to all possible color properties no changes.

I also tried the Theme no changes.

Here is the final code

ButtonTheme(
            alignedDropdown: true,
            child: Theme(
              data: Theme.of(context).copyWith(
                  dropdownMenuTheme: const DropdownMenuThemeData(
                      menuStyle: MenuStyle(
                surfaceTintColor: WidgetStatePropertyAll(Colors.yellow),
                backgroundColor: WidgetStatePropertyAll(Colors.blue),
                shadowColor: WidgetStatePropertyAll(Colors.red),
              ))),
              child: DropdownButtonFormField(
                borderRadius: BorderRadius.circular(16),
                decoration: InputDecoration(
                  enabledBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(16),
                    borderSide: BorderSide.none,
                  ),
                  focusedBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(16),
                    borderSide: BorderSide.none,
                  ),
                  hintText: "Select export option",
                  hintStyle: context.typography.body.copyWith(
                    color: context.colors.onSurfaceVariant,
                  ),
                  fillColor: context.colors.surfaceContainer,
                  filled: true,
                  focusColor: context.colors.onPrimary,
                  hoverColor: context.colors.onPrimary,
                ),
                dropdownColor: context.colors.surfaceContainer,
                value: null,
                style: context.typography.body.copyWith(
                  color: context.colors.onSurface,
                ),
                items: const [
                  DropdownMenuItem(
                    value: "option",
                    child: Text("Select export option"),
                  ),
                  DropdownMenuItem(
                    value: "qr",
                    child: Text("Export only QR codes"),
                  ),
                  DropdownMenuItem(
                    value: "excel",
                    child: Text("Export products list"),
                  ),
                ],
                onChanged: (value) {},
              ),
            ),
          ),

OutPut

Output I got

I want to change the selected color, hover color, splash color and highlight color

Upvotes: 1

Views: 78

Answers (0)

Related Questions