How can I add a button inside a dropdownButton in Flutter

Question

I just started learning flutter, I have programming knowledge before, but I am just getting used to the widget structure. What I want to do is add a button to the last element of the DropdownButton list and I used the DropdownMenuItem widget to do that. And I used Text as child and I put Button in the last element. The problem is, I can't give Text to the value property of the DropdownButton. That's why I'm getting an error because I've given a value that isn't in items [ ]. Is there any way I can get the value of the Text widget? Or can I do it another way? I hope I was explanatory.

code:

class _TodoPageState extends State<TodoPage> {
  Text dropdownValue = Text('123'); // **FOR DEFAULT VALUE**

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Center(
      child: Column(
        // mainAxisAlignment: MainAxisAlignment.center,
        // crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          MyTabBar(),
          Row(
            children: [
              Expanded(
                child: Container(
                  margin: EdgeInsets.only(left: 3, top: 5),
                  child: Row(
                    children: [
                      Ink(
                        width: 152,
                        height: 45,
                        padding: EdgeInsets.all(6),
                        decoration: BoxDecoration(
                          border: Border.all(color: Colors.black, width: 2),
                          borderRadius: BorderRadius.circular(10),
                        ),
                        child: DropdownButtonHideUnderline(
                          child: DropdownButton<String>(
                            value: dropdownValue, **// CANT SET THE DEFAULT VALUE**
                            isExpanded: true,
                            icon: Image.asset('assets/down-list-arrow.png'),
                            iconSize: 10,
                            elevation: 16,
                            onChanged: (newValue) {
                              setState(() {
                                dropdownValue = newValue!; **// CANT SET THE DEFAULT VALUE** 
                              });
                            },
                            items: [
                              DropdownMenuItem(child: Text('123'), value: ''),
                              DropdownMenuItem(child: Text('123'), value: ''),
                              DropdownMenuItem(
                                  child: TextButton(
                                child: Text('Create'),
                                onPressed: () {},
                              ))
                            ],
                          ),
                        ),
                      )
                    ],
                  ),
                ),
              ),
            ],
          ),
          MyListView()
        ],
      ),
    ));
  }
}

Answer 1

I found 2 ways: Assigning create on values or check new value before assigning on onChanged and using FocusNode.

Test Widget

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

  @override
  _TodoPageState createState() => _TodoPageState();
}

class _TodoPageState extends State<TodoPage> {
  late String selectedValue; // **FOR DEFAULT VALUE**
  late String selectedValue2;
  List<String> dropDownItemValue = ['123', '2', '4', 'Create'];
  List<String> dropDownItemValue2 = ['xx', '2', '4'];

  late final dropDownKey2;

  final FocusNode dropDownFocus = FocusNode();

  @override
  void initState() {
    super.initState();

    ///selected value must be contained at dropDownItemValue
    selectedValue = dropDownItemValue[0];
    selectedValue2 = dropDownItemValue2[0];
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      backgroundColor: Colors.deepPurple,
      body: Center(
        child: Column(
          // mainAxisAlignment: MainAxisAlignment.center,
          // crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            // MyTabBar(),

            DropdownButtonHideUnderline(
              child: DropdownButton<String>(
                value: selectedValue, // CAN'T SET THE DEFAULT VALUE**
                isExpanded: true,
                // icon: Image.asset('assets/down-list-arrow.png'),
                iconSize: 10,
                elevation: 16,
                onChanged: (newValue) {
                  print(newValue);
                  setState(() {
                    selectedValue = newValue!; //   SET THE DEFAULT VALUE**
                  });
                },

                /// don't assign same value on multiple widgets
                items: List.generate(
                  dropDownItemValue.length,
                  (index) => DropdownMenuItem(
                      child: Text('${dropDownItemValue[index]}'),
                      value: '${dropDownItemValue[index]}'),
                ),
              ),
            ),

            SizedBox(
              height: 100,
            ),
            DropdownButtonHideUnderline(
              child: DropdownButton<String>(
                focusNode: dropDownFocus,
                value: selectedValue2, // CAN'T SET THE DEFAULT VALUE**
                isExpanded: true,
                // icon: Image.asset('assets/down-list-arrow.png'),
                iconSize: 10,
                elevation: 16,
                onChanged: (newValue) {
                  print(newValue == null);
                  // if value doesn't contain just close the dropDown
                  if (newValue == null) {
                    dropDownFocus.unfocus();
                  } else
                    setState(() {
                      selectedValue2 = newValue; //   SET THE DEFAULT VALUE**
                    });
                },

                /// don't assign the same value on multiple widgets
                items: List.generate(
                  dropDownItemValue2.length + 1,
                  (index) => index < dropDownItemValue2.length
                      ? DropdownMenuItem(
                          child: Text('${dropDownItemValue2[index]}'),
                          value: '${dropDownItemValue2[index]}')
                      : DropdownMenuItem(
                          child: TextButton(
                            child: Text('Create'),
                            onPressed: () {},
                          ),
                        ),
                ),
              ),
            ),
          ],
        ),
      ),
    ));
  }
}