flutter-dropdown.dart

import 'package:flutter/material.dart';

import '../../components/my_flat_button.dart';
import 'question2.dart';

class Question1 extends StatefulWidget {
  @override
  Question1State createState() {
    return Question1State();
  }
}

class Question1State extends State<Question1> {
  final _formKey = GlobalKey<FormState>();
  String dropdownValue = "one";
  int index = 0;
  List<Widget> v = [];
  List<DropdownMenuItem<String>> dropdownItems = [];

  @override
  void initState() {
    super.initState();
    _buildDropDown();
    buildDropdown();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Builder(
            builder: (context) => Scrollbar(
                    child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: <Widget>[
                      Padding(
                        padding: EdgeInsets.all(25.0),
                        child: Container(
                          height: MediaQuery.of(context).size.height / 1.2,
                          width: MediaQuery.of(context).size.width,
                          padding: EdgeInsets.all(25.0),
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(10.0),
                            color: Colors.teal[100],
                          ),
                          child: Form(
                            key: _formKey,
                            child: Column(
                              mainAxisSize: MainAxisSize.max,
                              mainAxisAlignment: MainAxisAlignment.center,
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: <Widget>[
                                SizedBox(height: 20),
                                Column(children: v),
                                SizedBox(height: 15),
                                Row(
                                  mainAxisSize: MainAxisSize.max,
                                  children: <Widget>[
                                    Expanded(
                                      child: 
                                      MyFlatButton('Add more', (){
                                        setState(() {
                                          buildDropdown();             
                                        });                                      
                                      }, Colors.grey, borderColor: Colors.grey[400],),
                                    ),
                                  ],
                                ),
                                SizedBox(height: 15),
                                Row(
                                  mainAxisSize: MainAxisSize.max,
                                  children: <Widget>[
                                    Expanded(
                                      child: 
                                      MyFlatButton('Skip', (){
                                        setState(() {
                                            Navigator.push(
                                              context,
                                              MaterialPageRoute(
                                                  builder: (context) =>
                                                      Question2()),
                                            );            
                                        });                                      
                                      }, Colors.grey, borderColor: Colors.grey[400],),
                                    ),
                                  ],
                                ),
                             
                                SizedBox(height: 40),
                              ],
                            ),
                          ),
                        ),
                      )
                    ]))));
  }

  _buildDropDown(){
    setState((){
    dropdownItems = <String>["one", "tow", "three"]
                            .map<DropdownMenuItem<String>>((String value) {
                              return DropdownMenuItem<String>(
                                value: value,
                                child: Text(value),
                              );
                            })
                            .toList();
    });
  }


  buildDropdown() {
    if(index >= 2) return;
    v.add( Container(
                height: 38,
                padding: EdgeInsets.only(left: 5.0, right: 5.0, top: 0, bottom: 0),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10.0),
                  color: Colors.grey[100],
                ),                
                child: Row(
                  mainAxisSize: MainAxisSize.max,
                  children: <Widget>[
                  Expanded(
                    child: DropdownButton<String>(
                      isExpanded: true,
                      value: dropdownValue,
                      icon: Icon(Icons.arrow_drop_down),
                      iconSize: 24,
                      elevation: 16,
                      style: TextStyle(
                        color: Colors.grey
                      ),
                      underline: Container(
                        height: 0,
                        color: Colors.grey,
                      ),
                      onChanged: (String newValue) {
                        setState(() {
                          dropdownValue = newValue;
                        });
                      },
                      items: dropdownItems,
                    ),
                  ),  
                ],),
              ),
    );
    v.add(SizedBox(height: 10),);
    index += 1;
  }

}