搜索插件、代码仓与 APP 分类

插件详情v0.1.4

dropdown_formfield

使用下拉按钮的下拉表单字段。

近 30 天下载
317
喜欢数
111
Pub 分数
40

安装插件

flutter pub add dropdown_formfield

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个 Flutter 包,提供下拉表单字段小部件,将 DropdownButton 与标准表单字段样式和验证结合在一起。它通过处理输入状态、错误消息和表单提交逻辑,简化了在表单中集成下拉菜单的过程。该小部件支持空安全,并专为在 Flutter 表单生态系统中轻松使用而设计。当您需要一个简洁、可重用的下拉组件并能无缝融入表单布局时,它尤其有用。

适合场景

  • 带下拉选择的表单输入
  • 基于用户选择的动态表单字段
  • 用户偏好设置,包含预设选项
  • 需要选择类别的数据录入表单
  • 验证感知下拉输入

主要特点

  • 与 Flutter 表单小部件集成
  • 支持验证和错误消息
  • 可重用的下拉组件
  • 用于值绑定的简单 API
  • 与空安全兼容

适合对象

  • 开发表单密集型应用的开发者
  • 需要一致表单组件的团队
  • 使用 Flutter 表单验证的项目
  • 希望实现可访问下拉菜单的UI设计师
  • 具有动态或条件表单字段的应用程序

使用建议

  • 需要手动处理下拉项列表
  • 超出基础样式的有限自定义
  • 无内置搜索或筛选
  • 不适合非常大的选项列表
  • 依赖外部包以实现高级功能

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

Donate - Buy Me A Coffee

Dropdown form field

A dropdown form field using a dropdown button inside a form field.

Demo

Features

  • Can be used as regular form field.
  • Simple to implement.
  • Simple and intuitive to use in the app.
  • Provides validation of data.
  • Provides requirement of the field.
  • Follows the app theme and colors.

Example

import 'package:dropdown_formfield/dropdown_formfield.dart';

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

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

  @override
  void initState() {
    super.initState();
    _myActivity = '';
    _myActivityResult = '';
  }

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

  @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),
              )
            ],
          ),
        ),
      ),
    );
  }
}

License

This project is licensed under the BSD License. See the LICENSE file for details.

所属分类

源码仓库

使用此插件的项目

暂无相关数据。