Flutter dropdown list example
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.
Table of Contents
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.