Flutter how to user hint and value DropdownButton

Question

While coding an app i realized, that if you use a hint: with the DropdownButton and a value you only see the value. After some research and trying to work my way around it i finally found a solution. Idk if this is helpful or not but i wanted to share this with you and maybe it does help you in your own project. But without further ado here is the "not functional code":

import 'package:flutter/material.dart';

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

class ButtonClass extends StatefulWidget {
  const ButtonClass({Key? key}) : super(key: key);

  @override
  State<ButtonClass> createState() => _ButtonClassState();
}

class _ButtonClassState extends State<ButtonClass> {
  List<DropdownMenuItem<String>> get dropdownItems {
    List<DropdownMenuItem<String>> menuItems = [
      const DropdownMenuItem(child: Text("One"), value: "Option1"),
      const DropdownMenuItem(child: Text("Two"), value: "Option2"),
      const DropdownMenuItem(
        child: Text("Three"),
        value: "Option3",
      ),
      const DropdownMenuItem(
        child: Text("Four"),
        value: "Option4",
      ),
      const DropdownMenuItem(
        child: Text("Five"),
        value: "Option5",
      ),
    ];
    return menuItems;
  }

  String selectedValue = "Option1";

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            width: 200.0,
            height: 200.0,
            child: DropdownButtonHideUnderline(
              child: DropdownButton(
                isExpanded: true,
                hint: const Center(
              child: FittedBox(
                fit: BoxFit.contain,
                child: Text(
                  "Displayed Text",
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: 30.0,
                    fontFamily: 'Arial',
                  ),
                ),
              ),
            ),
                items: dropdownItems,
                value: selectedValue,
                onChanged: (String? newValue) {
                  setState(() {
                    selectedValue = newValue!;
                  });
                },
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

And here is the solution:

Change the

String selectedValue = "Option1";

to (example)

String? _selectedColor;

and also change

value: selectedValue,
                onChanged: (String? newValue) {
                  setState(() {
                    selectedValue = newValue!;
                  });
                },

to

value: _selectedColor,
                onChanged: (String? newValue) {
                  setState(() {
                    _selectedColor= newValue!;
                  });
                },

Here is the full main.dart file:

import 'package:flutter/material.dart';

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

class ButtonClass extends StatefulWidget {
  const ButtonClass({Key? key}) : super(key: key);

  @override
  State<ButtonClass> createState() => _ButtonClassState();
}

class _ButtonClassState extends State<ButtonClass> {
  List<DropdownMenuItem<String>> get dropdownItems {
    List<DropdownMenuItem<String>> menuItems = [
      const DropdownMenuItem(child: Text("One"), value: "Option1"),
      const DropdownMenuItem(child: Text("Two"), value: "Option2"),
      const DropdownMenuItem(
        child: Text("Three"),
        value: "Option3",
      ),
      const DropdownMenuItem(
        child: Text("Four"),
        value: "Option4",
      ),
      const DropdownMenuItem(
        child: Text("Five"),
        value: "Option5",
      ),
    ];
    return menuItems;
  }

  String? _selectedColor;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            width: 200.0,
            height: 200.0,
            child: DropdownButtonHideUnderline(
              child: DropdownButton(
                isExpanded: true,
                hint: const Center(
                  child: FittedBox(
                    fit: BoxFit.contain,
                    child: Text(
                      "Displayed Text",
                      style: TextStyle(
                        color: Colors.black,
                        fontSize: 30.0,
                        fontFamily: 'Arial',
                      ),
                    ),
                  ),
                ),
                items: dropdownItems,
                value: _selectedColor,
                onChanged: (String? newValue) {
                  setState(() {
                    _selectedColor = newValue!;
                  });
                },
              ),
            ),
          ),
        ),
      ),
    );
  }
}