flutterdrop-down-menu

How to indicate that the selected DropdownMenuEntry is disabled

In Flutter, a DropdownMenuEntry can be disabled with enabled: false option.

I have such disabled entries in my menu, and I don't know how to make user aware that such an option is selected. Disabled options can be selected, because it depends on another field which are enabled or not.

I can select a menu entry which is enabled and a possible choice. Then I change another value that causes the selected value to become disabled. It is OK, that a selected value is disabled, but I would like to warn the user that it would be nice to do something with it and select some other (enabled) menu entry.

It would be perfect to display selected value in red in this case. However, there are lot of conditions that determine if a menu entry is disabled. So, I would not like to repeat all these conditions in the style of DropDownMenuEntry to determine if it is going to be displayed in red or not.

Is it possible to indicate somehow visually that a disabled entry is selected?

Here is an example with selected disabled value. Disabled option is selected, but it is not indicated in any way that selection is not allowed.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(colorSchemeSeed: Colors.blue),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({super.key, required this.title});

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Center(
        child: DropdownMenu(
          initialSelection: 2,
          dropdownMenuEntries: [
            DropdownMenuEntry(value: 0, label: "Option 0"),
            DropdownMenuEntry(value: 1, label: "Option 1"),
            DropdownMenuEntry(value: 2, label: "Option 2", enabled: false),
            DropdownMenuEntry(value: 3, label: "Option 3", enabled: false),
          ],
        ),
      ),
    );
  }
}
Solution

  • You can use the textStyle property of DropdownMenu to visually indicate when a disabled entry is selected. Here's a clean solution without duplicating your disable conditions:

    Solution

    Create a getter to check if the selected value is disabled, then apply conditional styling:

    import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(colorSchemeSeed: Colors.blue),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({super.key, required this.title});

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

class _MyHomePageState extends State<MyHomePage> {
  int? selectedValue = 2; // Initially select disabled option
  
  // Your dropdown entries with disable conditions
  List<DropdownMenuEntry<int>> get dropdownEntries => [
    const DropdownMenuEntry(value: 0, label: "Option 0"),
    const DropdownMenuEntry(value: 1, label: "Option 1"),
    const DropdownMenuEntry(value: 2, label: "Option 2", enabled: false), // disabled
    const DropdownMenuEntry(value: 3, label: "Option 3", enabled: false),
  ];
  
  // Check if selected value is disabled
  bool get isSelectedDisabled {
    if (selectedValue == null) return false;
    try {
      return dropdownEntries
          .firstWhere((entry) => entry.value == selectedValue)
          .enabled == false;
    } catch (e) {
      return false;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            DropdownMenu<int>(
              initialSelection: selectedValue,
              // Apply red color when selected value is disabled
              textStyle: TextStyle(
                color: isSelectedDisabled ? Colors.red : null,
              ),
              onSelected: (value) => setState(() => selectedValue = value),
              dropdownMenuEntries: dropdownEntries,
            ),
            const SizedBox(height: 20),
            Text(
              'Selected: $selectedValue',
              style: const TextStyle(fontSize: 16),
            ),
            if (isSelectedDisabled)
              const Text(
                'Selected option is disabled!',
                style: TextStyle(color: Colors.red, fontWeight: FontWeight.bold),
              ),
          ],
        ),
      ),
    );
  }
}

    This is dart pad code you can check it here dartpad

    How it works:

    1. dropdownEntries getter - Centralizes your disable logic

    2. isSelectedDisabled getter - Checks if current selection is disabled

    3. textStyle - Applies red color conditionally

    This approach keeps your disable conditions in one place and automatically updates the visual indication when conditions change.

    Result: