Flutter下拉菜单插件flutter_dropdown的使用

flutter_dropdown 是一个简化了Flutter框架中复杂下拉按钮操作的插件。本文将介绍如何使用这个插件，并提供完整的示例代码。

简单使用示例

以下是一个简单的下拉菜单实现，展示了如何设置基本的下拉选项和回调函数：

import 'package:flutter/material.dart';
import 'package:flutter_dropdown/flutter_dropdown.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Dropdown Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Dropdown Example'),
        ),
        body: Center(
          child: DropDown(
            items: ["Male", "Female", "Other"],
            hint: Text("Select Gender"),
            icon: Icon(Icons.expand_more, color: Colors.blue),
            onChanged: (value) {
              print(value);
            },
          ),
        ),
      ),
    );
  }
}

自定义下拉项

你也可以为每个下拉选项创建自定义的小部件，比如添加图片或图标：

DropDown<String>(
  items: <String>["Male", "Female", "Other"],
  icon: Icon(Icons.expand_more, color: Colors.blue),
  customWidgets: <Widget>[
    Row(
      children: <Widget>[
        Text("Male"),
        CircleAvatar(
          backgroundImage: NetworkImage("https://example.com/male.jpg"),
        ),
      ],
    ),
    Row(
      children: <Widget>[
        Text("Female"),
        CircleAvatar(
          backgroundImage: NetworkImage("https://example.com/female.jpg"),
        ),
      ],
    ),
    Row(
      children: <Widget>[
        Text("Other"),
        CircleAvatar(
          backgroundImage: NetworkImage("https://example.com/other.jpg"),
        ),
      ],
    )
  ],
  hint: Text("Select Gender"),
  onChanged: (value) {
    print(value);
  },
)

完整示例

下面是一个更复杂的例子，演示了如何与对象一起使用下拉菜单，并根据选择更新UI。

import 'package:flutter/material.dart';
import 'package:flutter_dropdown/flutter_dropdown.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Dropdown Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Dropdown Home Page'),
    );
  }
}

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

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Person> persons = [
    Person(gender: "Male", url: "https://example.com/male.jpg"),
    Person(gender: "Female", url: "https://example.com/female.jpg"),
    Person(gender: "Other", url: "https://example.com/other.jpg"),
  ];

  Person selectedPerson;

  [@override](/user/override)
  void initState() {
    selectedPerson = persons.first;
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text("Selected person's gender is: ${selectedPerson?.gender ?? "None"}"),
            SizedBox(height: 20),
            DropDown<Person>(
              items: persons,
              initialValue: persons.first,
              hint: Text("Select Gender"),
              onChanged: (Person p) {
                setState(() {
                  selectedPerson = p;
                });
              },
              customWidgets: persons.map((p) => buildDropDownRow(p)).toList(),
              isExpanded: true,
            ),
          ],
        ),
      ),
    );
  }

  Row buildDropDownRow(Person person) {
    return Row(
      children: <Widget>[
        Expanded(child: Text(person?.gender ?? "Select")),
        CircleAvatar(
          backgroundImage: NetworkImage(person.url),
        ),
      ],
    );
  }
}

class Person {
  final String gender;
  final String url;

  Person({this.gender, this.url});
}