How To Add Dropdown Form Field Using Flutter Android

admin_img Posted By Bajarangi soft , Posted On 05-10-2020

DropDownButton is used to select a option from a list For better understanding we create one variable String dropdownValue=‘A’; For decoration purpose we use extra Container widget outside of DropDownButton field value is used to initialized the value is Expanded is used to create DropDownButton with full width icon is used to give Custom icon underline: SizedBox() is used to remove the default underline of DropDownButton field

How To Add Dropdown Form Field Using Flutter Android

COmplete Code For DropDown TextField In Flutter

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);


  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String dropdownValue= 'A';
  @override
  Widget build(BuildContext context) {
    var currentSelectedValue;
    const deviceTypes = ["Mac", "Windows", "Mobile"];
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        backgroundColor: Colors.pink,
        title: Text('DropDown TextField'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(15.0),
        child:  Container(
          height: 60,
          child:  Container(
            padding: EdgeInsets.symmetric(horizontal: 3),
            child: FormField<String>(
              builder: (FormFieldState<String> state) {
                return InputDecorator(
                  decoration: InputDecoration(
                      border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(5.0))),
                  child: DropdownButtonHideUnderline(
                    child: DropdownButton<String>(
                      hint: Text("Dropdown"),
                      value: currentSelectedValue,
                      isDense: true,
                      onChanged: (newValue) {
                        setState(() {
                          currentSelectedValue = newValue;
                        });
                        print(currentSelectedValue);
                      },
                      items: deviceTypes.map((String value) {
                        return DropdownMenuItem<String>(
                          value: value,
                          child: Text(value),
                        );
                      }).toList(),
                    ),
                  ),
                );
              },
            ),
          ),
        ),
      ),
    );
  }
}

Related Post