Flutter: Dropdown value is not getting selected

Question

I am developing an app with a dropdown. Below is my code. I have removed the UI design code to isolate the dropdown section itself.

class ShoppingCartUIState extends State<ShoppingCartUI> {
  final _formKey = GlobalKey<FormState>();
  String _checkoutDropdownValue=null;

//**UI design Code Removed**//

  _showCheckoutPopup() {
    String date=DateTime.now().toString();


    return Dialog(
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(20.0)), //this right here
        child: Container(
          height: MediaQuery.of(context).size.height/3,
          child: Column(

            children: <Widget>[
              Row(
                children: <Widget>[
                  Container(
                    margin: EdgeInsets.all(10),
                    child: Text(
                    "What is Your Required Delivery Date?",
                    style: Theme.of(context).textTheme.subtitle,
                  ),)

                ],
              ),
              Row(
                children: <Widget>[
                  IconButton(
                    icon: Icon(Icons.calendar_today),
                    color: Colors.green,
                    onPressed: () {
                      date = "111";
                    },
                  ),
                  Text(date)
                ],
              ),
              Row(
                children: <Widget>[
                  Container(
                    margin: EdgeInsets.only(top:20, left:10),
                    child: Text(
                    "What is your Airport of delivery?",
                    style: Theme.of(context).textTheme.subtitle,
                  ),)

                ],
              ),
              Row(
                children: <Widget>[
                  Container(
                    margin: EdgeInsets.only(top:5, left:10),
                    child: DropdownButton(
                    hint: Text(
                      "Please Select          ",
                      style: TextStyle(
                        fontSize: 14,
                      ),
                    ),
                    items: <String>[
                      'Skinless Boneless, Full Loins',
                      'brown',
                      'silver'
                    ].map((data) {
                      return DropdownMenuItem(
                        child: new Text(data,
                            style: Theme.of(context).textTheme.body1),
                        value: data,
                      );
                    }).toList(),
                    onChanged: (String newValue) {
                      setState(() {
                        _checkoutDropdownValue = newValue;
                        print(newValue);
                      });
                    },
                    value: _checkoutDropdownValue),
                    )

                ],
              ),
            ],
          ),
        ));
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }
}

The issue is when I change the dropdown item, the new value never get selected. The previously selected value is always displayed. However since i am using a print when dropdown is done, I can see the item has changed.

How can I solved this issue?

Answer 1

Wrap your Dialog widget with StatefulBuilder to rebuild the dialog.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyPage(), //TODO: Add Scaffold
    );
  }
}

class MyPage extends StatefulWidget {
  @override
  _MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  String date = "";
  String _checkoutDropdownValue;

  _showCheckoutPopup() {
    return StatefulBuilder(
      builder: (context, setState){
        return Dialog(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(20.0),
          ), //this r// ight here
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Container(
                  margin: EdgeInsets.all(10),
                  alignment: Alignment.centerLeft,
                  child: Text(
                    "What is Your Required Delivery Date?",
                    style: Theme.of(context).textTheme.subtitle,
                  ),
                ),
                Row(
                  children: <Widget>[
                    IconButton(
                      icon: Icon(Icons.calendar_today),
                      color: Colors.green,
                      onPressed: () {
                        setState(() {
                          date = "111";
                        });
                      },
                    ),
                    Text(date)
                  ],
                ),
                Container(
                  margin: EdgeInsets.only(top: 20, left: 10),
                  alignment: Alignment.centerLeft,
                  child: Text(
                    "What is your Airport of delivery?",
                    style: Theme.of(context).textTheme.subtitle,
                  ),
                ),
                Row(
                  children: <Widget>[
                    Container(
                      margin: EdgeInsets.only(top: 5, left: 10),
                      child: DropdownButton<String>(
                        hint: Text(
                          "Please Select          ",
                          style: TextStyle(
                            fontSize: 14,
                          ),
                        ),
                        items: <String>[
                          'Skinless Boneless, Full Loins',
                          'brown',
                          'silver'
                        ].map((data) {
                          return DropdownMenuItem(
                            child: new Text(data,
                                style: Theme.of(context).textTheme.body1),
                            value: data,
                          );
                        }).toList(),
                        onChanged: (String newValue) {
                          setState(() {
                            _checkoutDropdownValue = newValue;
                          });
                        },
                        value: _checkoutDropdownValue,
                      ),
                    )
                  ],
                ),
              ],
            ),
          ),
        );
      },

    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          child: Text("Click Here"),
          onPressed: () {
            showDialog(
              context: context,
              builder: (context) => _showCheckoutPopup(),
            );
          },
        ),
      ),
    );
  }
}

Answer 2

can you change your onPressed to print(_checkoutDropdownValue); instead of print(newValue); that way we can see if there is a problem with the assignment