搜尋套件、儲存庫與 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.

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。