Flutter DropdownButton / DropdownButtonFormField 下拉選單

 

DropdownButton

import 'package:flutter/material.dart';

class dropdownButton extends StatefulWidget {
  @override
  _dropdownButtonState createState() => _dropdownButtonState();
}

class _dropdownButtonState extends State<dropdownButton> {
  List<DropdownMenuItem<String>> listDrop = [];
  String selected = "1";

  void loadData() {
    listDrop = [];
    listDrop.add(DropdownMenuItem(child: Text("item 1"), value: "1"));
    listDrop.add(DropdownMenuItem(child: Text("item 2"), value: "2"));
    listDrop.add(DropdownMenuItem(child: Text("item 3"), value: "3"));
    listDrop.add(DropdownMenuItem(child: Text("item 4"), value: "4"));
    listDrop.add(DropdownMenuItem(child: Text("item 5"), value: "5"));
  }

  @override
  Widget build(BuildContext context) {
    loadData();

    return Scaffold(
        body: Center(
      child: Column(children: [
        DropdownButton(
          dropdownColor: Colors.amber,
          style: TextStyle(color: Colors.white,),
          icon: Icon(Icons.arrow_drop_down_circle),
          elevation: 36,
          items: listDrop,
          value: selected,
          hint: Text("Select item..."),
          onChanged: (String? newValue) {
            setState(() {
              selected = newValue!;
            });
          },
        ),
      ]),
    ));
  }
}

DropdownButtonFormField

import 'package:flutter/material.dart';
import 'package:untitled/Constants.dart';

class dropdownButton extends StatefulWidget {
  @override
  _dropdownButtonState createState() => _dropdownButtonState();
}

class _dropdownButtonState extends State<dropdownButton> {
  List<DropdownMenuItem<String>> listDrop = [];
  String selected = "1";

  void loadData() {
    listDrop = [];
    listDrop.add(DropdownMenuItem(child: Text("item 1"), value: "1"));
    listDrop.add(DropdownMenuItem(child: Text("item 2"), value: "2"));
    listDrop.add(DropdownMenuItem(child: Text("item 3"), value: "3"));
    listDrop.add(DropdownMenuItem(child: Text("item 4"), value: "4"));
    listDrop.add(DropdownMenuItem(child: Text("item 5"), value: "5"));
  }

  @override
  Widget build(BuildContext context) {
    loadData();

    void Function() Button_OnClick = () {
      Navigator.pop(context);
    };

    return Scaffold(
      backgroundColor: appGreyColor,
        body: Center(
      child: Column(children: [
        DropdownButtonFormField(
          decoration: InputDecoration(
            icon: Icon(Icons.bug_report),
            labelText: "Select item...",
            labelStyle: TextStyle(
              color: Colors.black,
            ),
            contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(32.0),
            ),
            hintStyle: TextStyle(
              color: Colors.white,
            ),
          ),
          style: TextStyle(
            color: Colors.white,
          ),
          items: listDrop,
          onChanged: (String? newValue) {
            setState(() {
              selected = newValue!;
            });
          },
          dropdownColor: appBackgroundGreyColor,
          icon: Icon(Icons.arrow_drop_down_circle, color: Colors.white,),
        ),
      ]),
    ));
  }
}