Flutter DropDown 按钮不显示所选值

Question

The dropdown doesn't show it as the chosen one, it just continues as though nothing was selected. Please help me to solve the problem.

I created this custom dropdown widget for multiple usages...

class _AddItemWidgetState extends State<AddItemWidget> {
  static const categoryTypes = [ 
    "SL",
    "KA",
  ];
  static const subCategoryType = [
    "10KG",
    "20KG",
    "5KG",
  ];
  static const Type = [
    "Big Tray",
    "Small Tray",
  ];

  String categorySelectedValue;
  String subCategorySelectedValue;
  String itemType;

  Widget categoryFieldWidget(
      {String name, List<String> nameList, String selectedValue}) {
    return Container(
      height: 49,
      child: FormField<String>(
        builder: (FormFieldState<String> state) {
          return InputDecorator(
            decoration: InputDecoration(
                contentPadding: EdgeInsets.only(left: 10, right: 10),
                border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(5.0))),
            child: DropdownButtonHideUnderline(
              child: DropdownButton<String>(
                icon: Icon(Icons.keyboard_arrow_down),
                hint: Text(
                  name,
                ),
                onChanged: (String newValue) {
                  setState(() {
                    selectedValue = newValue;
                  });
                  print(selectedValue);
                },
                value: selectedValue,
                isDense: true,
                items: nameList.map((String value) {
                  return DropdownMenuItem<String>(
                    value: value,
                    child: Text(value),
                  );
                }).toList(),
              ),
            ),
          );
        },
      ),
    );
  }

Usage:-

But when I use this custom dropdown widget in other widgets, the value is not showing on the Ui. "categorySelectedValue"'s value changes...but it's not showing on the Ui...

Expanded(
   child: categoryFieldWidget(
            name: "Category", 
            nameList: categoryTypes,
            selectedValue: categorySelectedValue)),
                              

Answer 1

Just check out this example

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Users'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  static const categoryTypes = [
    "SL",
    "KA",
  ];
  static const subCategoryType = [
    "10KG",
    "20KG",
    "5KG",
  ];
  static const itemtype = [
    "Big Tray",
    "Small Tray",
  ];

  String categorySelectedValue;
  String subCategorySelectedValue;
  String itemType;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: <Widget>[
            Container(
              height: 100,
              child: CustomDropDown(
                callback: (value) {
                  print('This is the category callbackValue : $value');
                },
                name: 'Category',
                list: categoryTypes,
                selectedValue: categorySelectedValue,
              ),
            ),
            Container(
              height: 100,
              child: CustomDropDown(
                callback: (value) {
                  print('This is the subcategory callbackValue : $value');
                },
                name: 'SubCategory',
                list: subCategoryType,
                selectedValue: subCategorySelectedValue,
              ),
            ),
            Container(
              height: 100,
              child: CustomDropDown(
                callback: (value) {
                  print('This is the type callbackValue : $value');
                },
                name: 'Type',
                list: itemtype,
                selectedValue: itemType,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

typedef void StringCallback(String val);

class CustomDropDown extends StatefulWidget {
  final StringCallback callback;
  final List<String> list;
  final String name;
  final String selectedValue;

  const CustomDropDown(
      {Key key, this.list, this.name, this.selectedValue, this.callback})
      : super(key: key);

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

class _CustomDropDownState extends State<CustomDropDown> {
  List<String> currentList = List();
  String name;
  String currentSelectedValue;

  @override
  void initState() {
    super.initState();
    currentList = widget.list;
    name = widget.name;
    currentSelectedValue = widget.selectedValue;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 49,
      child: FormField<String>(
        builder: (FormFieldState<String> state) {
          return InputDecorator(
            decoration: InputDecoration(
                contentPadding: EdgeInsets.only(left: 10, right: 10),
                border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(5.0))),
            child: DropdownButtonHideUnderline(
              child: DropdownButton<String>(
                icon: Icon(Icons.keyboard_arrow_down),
                hint: Text(
                  widget.name,
                ),
                onChanged: (String newValue) {
                  print('This is the value on select $newValue');
                  setState(() {
                    currentSelectedValue = newValue;
                  });
                  widget.callback(currentSelectedValue);
                },
                value: currentSelectedValue,
                isDense: true,
                items: currentList.map((String value) {
                  return DropdownMenuItem<String>(
                    value: value,
                    child: Text(value),
                  );
                }).toList(),
              ),
            ),
          );
        },
      ),
    );
  }
}

Let me know if it works.