Hi, Flutter developers in this fluter article we learn how to make a flutter dropdown list example. Dropdown like a spinner in android user can click on the dropdown shows a list of items to drop a layout. A dropdownbuttonformfield flutter is shown a list of items. If you can create a Form in your app and you want to show the state city name in the dropdown.
In this fluter tutorial, we make a custom dropdown in a flutter. and when you can click on a dropdown item the show as a selected in list. So let’s start o make its Start your android studio and make a flutter project. After creating the project open your main.dart file and clear all code.
flutter dropdown form field.
you can use the flutter dropdown form field class to create a dropdown in your main.dar file sees the below class.
class _MyHomePageState extends State<MyHomePage> {
String dropdownvalue = 'Apple';
var items = ['Apple','Banana','Grapes','Orange','watermelon','Pineapple'];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("DropDownList Example"),
),
body: Container(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
DropdownButton(
value: dropdownvalue,
icon: Icon(Icons.keyboard_arrow_down),
items:items.map((String items) {
return DropdownMenuItem(
value: items,
child: Text(items)
);
}
).toList(),
onChanged: (newValue){
setState(() {
dropdownvalue = newValue.toString();
});
},
),
],
),
),
),
);
}
Complete code for creating a flutter dropdown list Main dart file.
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(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String dropdownvalue = 'Apple';
var items = ['Apple','Banana','Grapes','Orange','watermelon','Pineapple'];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("DropDownList Example"),
),
body: Container(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
DropdownButton(
value: dropdownvalue,
icon: Icon(Icons.keyboard_arrow_down),
items:items.map((String items) {
return DropdownMenuItem(
value: items,
child: Text(items)
);
}
).toList(),
onChanged: (newValue){
setState(() {
dropdownvalue = newValue.toString();
});
},
),
],
),
),
),
);
}
}
used these complete codes for making a customer dropdown list in flutter you can learn more flutter tutorial Click_Hare.
