Here’s a custom method I wrote to build drop down menu fields in Flutter. I’m guessing a few newbies like me will find it useful!
- Add a list of items for the drop down menu:
List<String> _colors = <String>['', 'red', 'green', 'blue', 'orange']; List<String> _dogs = <String>['', 'muff', 'rover']; List<String> _people = <String>['', 'mum', 'dad', 'sister', 'brother'];
2. Add another list to hold the selected results:
var resultsList = new List.filled(3, '');
3. Set the initial values for the fields:
@override
void initState() {
resultsList[0] = 'red';
resultsList[1] = 'muff';
resultsList[2] = 'mum';
return super.initState();
}
4. Add the custom method:
//method that builds and updates the drop down menu
_fieldDropDown(List theList, int resultPosition, var dbField) {
return new FormField(builder: (FormFieldState state) {
return InputDecorator(
decoration: InputDecoration(),
child: new DropdownButtonHideUnderline(
child: new DropdownButton(
value: this.resultsList[resultPosition],
isDense: true,
onChanged: (String newValue) {
setState(() {
this.resultsList[resultPosition] = newValue;
state.didChange(newValue);
print(
'The List result = ' + this.resultsList[resultPosition]);
//write newValue to a database field, which can be used in the override init to set the field originally
});
},
items: theList.map((String value) {
return new DropdownMenuItem(
value: value,
child: new Text(value),
);
}).toList(),
),
),
);
},
);
}
5. And call the method in the body like this:
_fieldDropDown(_colors, 0, 'colorDBfield'),
_fieldDropDown(_dogs, 1, 'dogDBfield'),
_fieldDropDown(_people, 2, 'peopleDBfield'),
Here’s the complete sample, make a default Flutter app, remove all code from main and paste this in:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Drop Down Field Method Demo'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
//lists that are used to build the drop down menus attached to fields
List _colors = ['', 'red', 'green', 'blue', 'orange'];
List _dogs = ['', 'muff', 'rover'];
List _people = ['', 'mum', 'dad', 'sister', 'brother'];
//one list that holds all the selected results for the three drop down menus
var resultsList = new List.filled(3, '');
@override
void initState() {
//set the intial feild value
resultsList[0] = 'red'; //this would be set from a database field
resultsList[1] = 'muff'; //this would be set from a database field
resultsList[2] = 'mum'; //this would be set from a database field
return super.initState();
}
//method that builds and updates the drop down menu
_fieldDropDown(List theList, int resultPosition, var dbField) {
return new FormField(
builder: (FormFieldState state) {
return InputDecorator(
decoration: InputDecoration(),
child: new DropdownButtonHideUnderline(
child: new DropdownButton(
value: this.resultsList[resultPosition],
isDense: true,
onChanged: (String newValue) {
setState(() {
this.resultsList[resultPosition] = newValue;
state.didChange(newValue);
print(
'The List result = ' + this.resultsList[resultPosition]);
//write newValue to a database field, which can be used in the override init to set the field originally
});
},
items: theList.map((String value) {
return new DropdownMenuItem(
value: value,
child: new Text(value),
);
}).toList(),
),
),
);
},
);
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new SafeArea(
top: false,
bottom: false,
child: new Form(
//key: _formKey,
autovalidate: true,
child: new ListView(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
children: [
//create some fields, hand in the list
_fieldDropDown(_colors, 0, 'colorDBfield'),
_fieldDropDown(_dogs, 1, 'dogDBfield'),
_fieldDropDown(_people, 2, 'peopleDBfield'),
],
))),
);
}
}
Please follow and like us:
