material_dropdown_formfield 0.1.5 material_dropdown_formfield: ^0.1.5 copied to clipboard
A material dropdown form field using a dropdown button inside a form field.
Material Dropdown form field #
A 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 #
- OutlinedDropDownDecoration inherits InputDecoration
- RoundedDropDownDecoration inherits InputDecoration
Api and Options #
DropDownFormField Color innerBackgroundColor:-inner background color of dropdownformfield String titleText:-provide labelText String hintText:-provide hint bool required:-field required or no String errorText:-error text dynamic value:-initial source value List dataSource:-list of options String textField:-field to show text String valueField:-field to target for value Function onChanged:-fired when value changes bool filled FocusNode focusNode InputDecoration inputDecoration:-can be OutlinedDropDownDecoration,RoundedDropDownDecoration or your own custom InputDecoration TextStyle innerTextStyle:-inner text style of dropdown Color wedgeColor:-dropdown wedge color Color disabledWedgeColor:-wedge color to be shown when dropdown disabled Icon wedgeIcon:- icon 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;
FocusNode focusNode = FocusNode();
final formKey = new GlobalKey<FormState>();
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.validate()) {
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(
innerBackgroundColor: Colors.green,
wedgeIcon: Icon(Icons.keyboard_arrow_down),
wedgeColor: Colors.lightBlue,
innerTextStyle: TextStyle(color: Colors.blue),
focusNode: focusNode,
inputDecoration: OutlinedDropDownDecoration(
labelStyle: TextStyle(color: Colors.green),
labelText: "Welcome to island",
borderColor: Colors.purple),
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',
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,
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.