Search packages, repositories and app categories

Package detailsv0.1.4

dropdown_formfield

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

30-day downloads
317
Likes
111
Pub points
40

Install package

flutter pub add dropdown_formfield

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A Flutter package that provides a dropdown form field widget, combining a DropdownButton with standard form field styling and validation. It simplifies the integration of dropdowns into forms by handling input state, error messages, and form submission logic. The widget supports null safety and is designed for easy use within Flutter's form ecosystem. It is particularly useful when you need a clean, reusable dropdown component that fits seamlessly into form layouts.

Use cases

  • Form inputs with dropdown selection
  • Dynamic form fields based on user choice
  • User preference settings with predefined options
  • Data entry forms requiring category selection
  • Validation-aware dropdown inputs

Key features

  • Integrated with Flutter Form widget
  • Supports validation and error messages
  • Reusable dropdown component
  • Simple API for value binding
  • Works with null safety

Suitable for

  • Developers building form-heavy apps
  • Teams needing consistent form components
  • Projects using Flutter's form validation
  • UI designers wanting accessible dropdowns
  • Apps with dynamic or conditional form fields

Considerations

  • Requires manual handling of dropdown item list
  • Limited customization beyond basic styling
  • No built-in search or filtering
  • Not suitable for very large option lists
  • Depends on external package for advanced features

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

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.

Categories

Source repository

Projects using this package

No data available yet.