Flutter下拉表单字段插件dropdown_formfield的使用

Flutter下拉表单字段插件dropdown_formfield的使用

一个使用下拉按钮作为表单字段的下拉表单字段。

Demo

特性

• 可以作为常规表单字段使用。
• 实现简单。
• 在应用程序中使用简单直观。
• 提供数据验证。
• 提供字段的要求。
• 遵循应用程序的主题和颜色。

示例

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _myActivity;
  String _myActivityResult;
  final formKey = new GlobalKey<FormState>();

  [@override](/user/override)
  void initState() {
    super.initState();
    _myActivity = '';
    _myActivityResult = '';
  }

  _saveForm() {
    var form = formKey.currentState;
    if (form.validate()) {
      form.save();
      setState(() {
        _myActivityResult = _myActivity;
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dropdown Formfield Example'),
      ),
      body: Center(
        child: Form(
          key: formKey,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Container(
                padding: EdgeInsets.all(16),
                child: DropDownFormField(
                  titleText: 'My workout', // 表单字段的标题
                  hintText: 'Please choose one', // 提示文字
                  value: _myActivity, // 当前选中的值
                  onSaved: (value) { // 表单保存时触发
                    setState(() {
                      _myActivity = value;
                    });
                  },
                  onChanged: (value) { // 值改变时触发
                    setState(() {
                      _myActivity = value;
                    });
                  },
                  dataSource: [ // 数据源
                    {
                      "display": "Running", // 显示的文本
                      "value": "Running", // 实际值
                    },
                    {
                      "display": "Climbing",
                      "value": "Climbing",
                    },
                    {
                      "display": "Walking",
                      "value": "Walking",
                    },
                    {
                      "display": "Swimming",
                      "value": "Swimming",
                    },
                    {
                      "display": "Soccer Practice",
                      "value": "Soccer Practice",
                    },
                    {
                      "display": "Baseball Practice",
                      "value": "Baseball Practice",
                    },
                    {
                      "display": "Football Practice",
                      "value": "Football Practice",
                    },
                  ],
                  textField: 'display', // 数据源中的键，用于显示的文本
                  valueField: 'value', // 数据源中的键，用于实际值
                ),
              ),
              Container(
                padding: EdgeInsets.all(8),
                child: RaisedButton(
                  child: Text('Save'), // 按钮文本
                  onPressed: _saveForm, // 按钮点击事件
                ),
              ),
              Container(
                padding: EdgeInsets.all(16),
                child: Text(_myActivityResult), // 显示选中的值
              )
            ],
          ),
        ),
      ),
    );
  }
}