
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.