I am using flex_color_scheme in my app for the theming the app, and for implementing combo box, I needed to add the animated_custom_dropdown package and use its CustomDropdown widget. With these combined, I am noticing some problems. When using flex color scheme, there appears an opaque rectangular area behind the CustomDropdown. I tried setting closedFillColor to transparent, but that wasn't what I actually needed. I instead need to make the rectangular background behind the custom dropdown to be transparent, and also remove a small padding introduced when flex theme is active. You should be able to notice these by using the toggle button in the minimal code below.

Please help me fix this. Thank you.

The minimal code:

import 'package:animated_custom_dropdown/custom_dropdown.dart';
import 'package:flex_color_scheme/flex_color_scheme.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

// A global (or top-level) notifier for the theme state
final ValueNotifier useFlexThemeNotifier = ValueNotifier(false);

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

  @override
  Widget build(BuildContext context) {
    return ListenableBuilder(
      listenable: useFlexThemeNotifier,
      builder: (context, child) {
        return MaterialApp(
          theme: useFlexThemeNotifier.value
              ? flexThemeLight
              : defaultThemeLight,
          darkTheme: useFlexThemeNotifier.value
              ? flexThemeDark
              : defaultThemeDark,
          home: MyHomePage(),
        );
      },
    );
  }
}

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

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

class _MyHomePageState extends State {
  final List myList = [
    "Developer",
    "Designer",
    "Consultant",
    "Student",
  ];

  @override
  Widget build(BuildContext context) {
    final colorScheme = Theme.of(context).colorScheme;

    return Scaffold(
      appBar: AppBar(
        title: const Text("custom dropdown and flex color"),
        // backgroundColor: Colors.blue.shade700,
      ),
      body: Padding(
        padding: const EdgeInsets.all(25.0),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            children: [
              ElevatedButton(
                onPressed: () {
                  useFlexThemeNotifier.value = !useFlexThemeNotifier.value;
                },
                child: useFlexThemeNotifier.value
                    ? const Text("Use Default color scheme")
                    : const Text("Use Flex color scheme"),
              ),
              const SizedBox(height: 10.0),
              CustomDropdown(
                decoration: CustomDropdownDecoration(
                  // closedFillColor: Colors.transparent,
                  closedBorderRadius: BorderRadius.circular(30),
                  headerStyle: TextStyle(color: colorScheme.primary),
                  listItemStyle: TextStyle(color: colorScheme.primary),
                ),
                hintText: 'Select job role',
                items: myList,
                initialItem: myList[0],
                onChanged: (value) {
                  print("### changed value to: $value");
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

abstract final class AppTheme {
  // The FlexColorScheme defined light mode ThemeData.
  static ThemeData light = FlexThemeData.light(
    // Using FlexColorScheme built-in FlexScheme enum based colors
    // greenM3 a.k.a. Camarone Green in FlexColorScheme v8.
    scheme: FlexScheme.greenM3,
    appBarStyle: FlexAppBarStyle.primary,
    fontFamily: "Roboto",
    // Scaffold background customization - START:
    // scaffoldBackground: Colors.grey,
    // surfaceMode: FlexSurfaceMode.levelSurfacesLowScaffold,
    surfaceMode: FlexSurfaceMode.highScaffoldLowSurface,
    // A blendLevel of 2-5 gives a professional, slightly tinted off-white
    blendLevel: 3,
    // Scaffold background customization - END.
    // Component theme configurations for light mode.
    subThemesData: const FlexSubThemesData(
      interactionEffects: true,
      tintedDisabledControls: true,
      useM2StyleDividerInM3: true,
      inputDecoratorIsFilled: true,
      inputDecoratorBorderType: FlexInputBorderType.outline,
      alignedDropdown: true,
      navigationRailUseIndicator: true,
    ),
    // Direct ThemeData properties.
    visualDensity: FlexColorScheme.comfortablePlatformDensity,
    cupertinoOverrideTheme: const CupertinoThemeData(applyThemeToAll: true),
  );

  // The FlexColorScheme defined dark mode ThemeData.
  static ThemeData dark = FlexThemeData.dark(
    // Using FlexColorScheme built-in FlexScheme enum based colors.
    scheme: FlexScheme.greenM3,
    appBarStyle:
        FlexAppBarStyle.surface, // .primary in dark mode doesn't look good.
    fontFamily: "Roboto",
    // Scaffold background customization - START:
    // scaffoldBackground: Colors.grey,
    // surfaceMode: FlexSurfaceMode.levelSurfacesLowScaffold,
    surfaceMode: FlexSurfaceMode.highScaffoldLowSurface,
    // A blendLevel of 2-5 gives a professional, slightly tinted off-white
    blendLevel: 3,
    // Scaffold background customization - END.
    // Component theme configurations for dark mode.
    subThemesData: const FlexSubThemesData(
      interactionEffects: true,
      tintedDisabledControls: true,
      blendOnColors: true,
      useM2StyleDividerInM3: true,
      inputDecoratorIsFilled: true,
      inputDecoratorBorderType: FlexInputBorderType.outline,
      alignedDropdown: true,
      navigationRailUseIndicator: true,
    ),
    // Direct ThemeData properties.
    visualDensity: FlexColorScheme.comfortablePlatformDensity,
    cupertinoOverrideTheme: const CupertinoThemeData(applyThemeToAll: true),
  );
}

final ThemeData defaultThemeLight = ThemeData.light(useMaterial3: true);
final ThemeData defaultThemeDark = ThemeData.dark(useMaterial3: true);
final ThemeData flexThemeLight = AppTheme.light;
final ThemeData flexThemeDark = AppTheme.dark;