material_dropdown_formfield 0.1.9

discontinued

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

since in latest flutter update this plugin was already introduced, So there's no point maintaining this plugin. Kindly refer DropDownButtonFormField

Material Dropdown form fieldA material dropdown form field using a dropdown button inside a form field. #

this plugin is improved version of dropdown_formfield plugin originally developed by cetorres

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.

Helper Classes for customizing look and feel of dropdownbutton #

  1. OutlinedDropDownDecoration inherits InputDecoration
  2. RoundedDropDownDecoration inherits InputDecoration

Api and Options #

OptionTypeDescription
innerBackgroundColorColorinner background color of dropdownformfield
titleTextStringprovide labelText
hintTextStringprovide hint
requiredboolfield required or no
errorTextStringerror text
valuedynamicinitial source value
dataSourceListlist of options
textFieldStringfield to show text
valueFieldStringfield to target for value
onChangedFunctionfired when value changes
filedbool
focusNodeFocusNodeprovide focus node
inputDecorationInputDecorationcan be OutlinedDropDownDecoration,RoundedDropDownDecoration or your own custom InputDecoration
innerTextStyleTextStyleinner text style of dropdown
wedgeColorColordropdown wedge color
disabledWedgeColorColorwedge color to be shown when dropdown disabled
wedgeIconIconicon of wedge default:-(Icon(Icons.arrow_drop_down))

Example #

import 'package:flutter/material.dart';
import 'package:material_dropdown_formfield/material_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;
  GlobalKey<FormState> form = GlobalKey<FormState>();
  FocusNode focusNode = FocusNode();
  List 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",
    },
  ];

  @override
  void initState() {
    super.initState();
    _myActivity = '';
    _myActivityResult = '';
    focusNode.addListener(() {
      focusNode.unfocus(disposition: UnfocusDisposition.previouslyFocusedChild);
//      focusNode.
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dropdown Formfield Example'),
      ),
      body: Center(
        child: Form(
            key: form,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Container(
                  color: Colors.black,
                  padding: EdgeInsets.all(16),
                  child: DropDownFormField(
                    autovalidate: true,
                    validator: (value) {
                      if (value == '') {
                        return "can't be empty";
                      }
                      if (value == 'Swimming') {
                        return 'Swimming Not Allowed!';
                      } else {
                        return null;
                      }
                    },
                    innerBackgroundColor: Colors.green,
                    wedgeIcon: Icon(Icons.keyboard_arrow_down),
                    wedgeColor: Colors.lightBlue,
                    innerTextStyle: TextStyle(color: Colors.white),
                    focusNode: focusNode,
                    inputDecoration: OutlinedDropDownDecoration(
                        labelStyle: TextStyle(color: Colors.white),
                        labelText: "Welcome to island",
                        borderColor: Colors.white),
                    hintText: 'Please choose one',
                    value: _myActivity,
                    onSaved: (value) {
                      setState(() {
                        _myActivity = value;
                      });
                    },
                    onChanged: (value) {
                      setState(() {
                        _myActivity = value;
                      });
                    },
                    dataSource: dataSource,
                    textField: 'display',
                    valueField: 'value',
                  ),
                ),
                Container(
                  padding: EdgeInsets.all(16),
                  child: DropDownFormField(
                    titleText: 'My workout',
                    hintText: 'Please choose one',
                    validator: (value) {
                      if (value == 'Swimming') {
                        return 'Swimming Not Allowed!';
                      } else {
                        return null;
                      }
                    },
                    value: _myActivity,
                    onSaved: (value) {
                      setState(() {
                        _myActivity = value;
                      });
                    },
                    onChanged: (value) {
                      setState(() {
                        _myActivity = value;
                      });
                    },
                    dataSource: dataSource,
                    textField: 'display',
                    valueField: 'value',
                  ),
                ),
                Container(
                  padding: EdgeInsets.all(16),
                  child: DropDownFormField(
                    inputDecoration: RoundedDropDownDecoration(
                        labelText: "Welcome to island"),
                    hintText: 'Please choose one',
                    value: _myActivity,
                    validator: (value) {
                      if (value == 'Swimming') {
                        return 'Swimming Not Allowed!';
                      } else {
                        return null;
                      }
                    },
                    onSaved: (value) {
                      setState(() {
                        _myActivity = value;
                      });
                    },
                    onChanged: (value) {
                      setState(() {
                        _myActivity = value;
                      });
                    },
                    dataSource: dataSource,
                    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.

4
likes
0
pub points
61%
popularity

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

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

shivanshtalwar0@gmail.com

More

Packages that depend on material_dropdown_formfield