パッケージ、リポジトリ、アプリカテゴリを検索

パッケージ詳細v0.1.4

dropdown_formfield

フォームフィールド内にドロップダウンボタンを使用したドロップダウンフォームフィールド。

30日間ダウンロード
317
いいね数
111
Pub ポイント
40

パッケージをインストール

flutter pub add dropdown_formfield

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

Flutterパッケージで、ドロップダウンボタンと標準的なフォームフィールドのスタイルおよび検証を組み合わせたドロップダウンフォームフィールドウィジェットを提供します。入力状態、エラーメッセージ、フォーム送信ロジックを処理することで、フォームへのドロップダウンの統合を簡素化します。このウィジェットはnull安全をサポートしており、Flutterのフォームエコシステム内での簡単な使用を目的として設計されています。フォームレイアウトにスムーズに統合できるクリーンで再利用可能なドロップダウンコンポーネントが必要な場合に特に役立ちます。

用途

  • ドロップダウン選択付きのフォーム入力
  • ユーザーの選択に基づく動的フォームフィールド
  • 事前定義されたオプション付きのユーザー設定
  • カテゴリ選択を必要とするデータ入力フォーム
  • 検証対応ドロップダウン入力

主な機能

  • Flutter Form ウィジェットと統合
  • 検証およびエラーメッセージをサポート
  • 再利用可能なドロップダウンコンポーネント
  • 値バインディング用のシンプルな API
  • null セーフティと互換性があります

適している対象

  • フォーム中心のアプリを開発する開発者
  • 一貫したフォームコンポーネントを必要とするチーム
  • 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.

カテゴリー

ソースリポジトリ

このパッケージを使用しているプロジェクト

データはまだありません。