Flutter dropdown list example with source code


Create flutter dropdown with list as a model or data source in flutter



Example of flutter dropdown list with source code. You can create a dropdown or select in a flutter with the help of the source code I have provided below. 

Learn how you can use the data models as you flutter the dropdown model. 
In place of model you can use API as you flutter dropdown list source.

//Starting of Source Code

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'datamodel.dart';

class TestSelect extends StatefulWidget {
  const TestSelect({Key? key}) : super(key: key);

  State<TestSelect> createState() => _TestSelectState();

class _TestSelectState extends State<TestSelect> {
  var my_services;

  _onclicked(value) {
    print('Clicked...' + value.toString());

  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text(
            style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.normal,
                fontSize: 18),
        body: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
                padding: EdgeInsets.fromLTRB(0, 150, 0, 0),
                child: Container(
                  height: 50,
                  padding: const EdgeInsets.only(
                      left: 10.0, right: 10.0, top: 10.0),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    border: Border.all(color: Colors.blue),
                  child: Center(
                    child: DropdownButton<String>(
                        hint: const Text('Choose Option'),
                        elevation: 16,
                        isExpanded: true,
                        const TextStyle(color: Colors.black, fontSize: 16.0),
                        onChanged: (String? changedValue) {
                          my_services = changedValue;
                          setState(() {
                        value: my_services,
                        Service.serviceOptions().map((String value) {
                          return DropdownMenuItem<String>(
                            value: value,
                            child: new Text(value),

// Ending of Source Code

//Data Model Source Code

class Service {

  static List<String> serviceOptions(){
    List<String> options = [
      "App Developement",
      "Web Application Developement",
      "Android App Development",
      "iOS App Development",
      "Digital Marketing",
    return options;


//Data Model Source Code

Watch Flutter dropdown list example with source code Installation

Related Projects

Recent Comments

Latest Comments section by users