Hello everyone, welcome back at porkaone. On this occasion we will learn how to create a select input dropdown in Flutter quickly and easily. Are you curious? Come on, follow the tutorial below.

Our exercise this time is to create a simple select input dropdown. The method is a little tricky, but actually easy to use. So we will create a simple flutter project that displays a name input form, a dropdown form selecting gender, religion, and education. Then there is a button to display the results.

Read Another Article ✨

📰 1. How to Display a Website in Flutter with Webview  read more

📰 2. How to Make a Bubble Bottom Bar in Flutter read more

📰 3. How to Install Java Development Kit and Add Variable Path to ENV read more

📰 4. How to Make Copy Feature in Flutter Apps read more

How to Create a Select Input Dropdown in Flutter

1. Create a new flutter project with a free name. Use the latest version of flutter or flutter that supports null safety.

2. Open lib/main.dart then replace it with the script below.

import 'package:flutter/material.dart';

  void main() {
    runApp(MyApp());
  }
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Form Example',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyForm(),
      );
    }
  }
  
  class MyForm extends StatefulWidget {
    @override
    _MyFormState createState() => _MyFormState();
  }
  
  class _MyFormState extends State<MyForm> {
    final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
    String? name;
    String? gender;
    String? religion;
    String? education;
  
    List<String> genderOptions = ['Male', 'Female'];
    List<String> religionOptions = [
      'Islam',
      'Christianity',
      'Catholicism',
      'Hinduism',
      'Buddhism'
    ];
    List<String> educationOptions = [
      'Elementary School',
      'Junior High School',
      'Senior High School',
      'Bachelor',
      'Master',
      'Doctorate'
    ];
  
    String result = '';
  
    void _submitForm() {
      if (_formKey.currentState!.validate()) {
        _formKey.currentState!.save();
        setState(() {
          result =
              'Name: $name\n\nGender: $gender\n\nReligion: $religion\n\nEducation: $education';
        });
      }
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Form Example'),
        ),
        body: SingleChildScrollView(
          padding: EdgeInsets.all(20.0),
          child: Form(
            key: _formKey,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                TextFormField(
                  decoration: InputDecoration(
                    labelText: 'Name',
                  ),
                  validator: (value) {
                    if (value!.isEmpty) {
                      return 'Name cannot be empty';
                    }
                    return null;
                  },
                  onSaved: (value) {
                    name = value;
                  },
                ),
                SizedBox(height: 20.0),
                DropdownButtonFormField<String>(
                  decoration: InputDecoration(
                    labelText: 'Gender',
                  ),
                  value: gender,
                  items: genderOptions.map((String value) {
                    return DropdownMenuItem<String>(
                      value: value,
                      child: Text(value),
                    );
                  }).toList(),
                  onChanged: (newValue) {
                    setState(() {
                      gender = newValue;
                    });
                  },
                ),
                SizedBox(height: 20.0),
                DropdownButtonFormField<String>(
                  decoration: InputDecoration(
                    labelText: 'Religion',
                  ),
                  value: religion,
                  items: religionOptions.map((String value) {
                    return DropdownMenuItem<String>(
                      value: value,
                      child: Text(value),
                    );
                  }).toList(),
                  onChanged: (newValue) {
                    setState(() {
                      religion = newValue;
                    });
                  },
                ),
                SizedBox(height: 20.0),
                DropdownButtonFormField<String>(
                  decoration: InputDecoration(
                    labelText: 'Education',
                  ),
                  value: education,
                  items: educationOptions.map((String value) {
                    return DropdownMenuItem<String>(
                      value: value,
                      child: Text(value),
                    );
                  }).toList(),
                  onChanged: (newValue) {
                    setState(() {
                      education = newValue;
                    });
                  },
                ),
                SizedBox(height: 20.0),
                ElevatedButton(
                  onPressed: _submitForm,
                  child: Text('Submit'),
                ),
                SizedBox(height: 20.0),
                Text(
                  result,
                  style: TextStyle(fontSize: 18.0),
                ),
              ],
            ),
          ),
        ),
      );
    }
  }

Explanation of the script above:

1. import 'package:flutter/material.dart';: This line imports the Flutter libraries required to develop the user interface.
2. void main() { ... }: The main function is the main function that is first executed when the application starts. This function runs a Flutter application by invoking the MyApp() widget.
3. class MyApp extends StatelessWidget { ... }: This is the class that represents the main application. It is a derivative of StatelessWidget which means it has no state that changes during application execution.
4. build(BuildContext context) { ... }: The build method is a method defined by StatelessWidget that describes the application's user interface. This method returns the desired user interface appearance. Here, we return a MaterialApp widget containing the title, theme, and MyForm() form appearance.
5. class MyForm extends StatefulWidget { ... }: This is a class that represents a stateful form in the application. It is a derivative of StatefulWidget which means it has a state that changes during application execution.
6. class _MyFormState extends State<MyForm> { ... }: This is the class that represents the state of the form. It is an instance of State that connects the user interface with the associated state.
7. final GlobalKey<FormState> _formKey = GlobalKey<FormState>();: This is the global key used to access and validate the form state. This is used in the Form widget to associate the form with a key.
8. Strings? name;: Variable to store the name input value of the TextFormField.
9. Strings? gender;: Variable to store the gender input value of the DropdownButtonFormField.
10. Strings? religion;: Variable to store the religion input value of the DropdownButtonFormField.
11. Strings? education;: Variable to store the last education input value of the DropdownButtonFormField.
12. List<String> genderOptions = ['Male', 'Female'];: Variable to store the gender options that will be displayed in the DropdownButtonFormField.
13. List<String> religionOptions = ['Islam', 'Christianity', 'Catholicism', 'Hinduism', 'Buddhism'];: Variable to store the religion options to be displayed in the DropdownButtonFormField.
14. List<String> educationOptions = ['Elementary School', 'Junior High School', 'Senior High School', 'Bachelor', 'Master', 'Doctorate'];: Variable to store the last education option that will be displayed in the DropdownButtonFormField.
15. String result = '';: Variable to store the results of the form which will be displayed as text.

Ok now run the emulator. If successful, the display will look like the image below.

      

Easy isn't it?, now you can create a select input dropdown and implement it in a real project. Improvise by using data sourced from the internet so that the answer choices are more diverse.

That's it for this tutorial on how to create a select input dropdown in Flutter. Hopefully this short article helps. If you have any questions, please ask directly in the comments column below. That's all and receive a salary.