How to create custom Dropdown in flutter?

Lets get started to create a custom dropdown in fun and easy wasy , if you want to customize material dropdown in flutter it’s a very complex task, thst’s why i create easy to use dropdown in fun way that you can understand easily.

Hi I am a flutter dev, I am learning and trying to understand how complex things works and try to solve in simple and fun way let’s get started with custom dropdown journey.

initialize variables here.

bool enableList = false;
int _selectedIndex;

this method is use to show dropdown list

_onhandleTap() { 
setState(() {
 enableList = !enableList; 
});
 }

this method comes handy when you selecting value and close the hide the list

_onChanged(int position) { 
setState(() {
 _selectedIndex = position; 
  enableList = !enableList; 
}); 
}

here we declare dummy data for our list

    List<Map> _testList = [
  {'no': 1, 'keyword': 'North Dron'},
  {'no': 2, 'keyword': 'Mabygo'},
  {'no': 3, 'keyword': 'La Shdencoe-In-Hayya'},
  {'no': 4, 'keyword': 'Manslodfield'},
  {'no': 5, 'keyword': 'Bridsportsicast'},
  {'no': 6, 'keyword': 'West Ston'},
  {'no': 7, 'keyword': 'Telshamtwich'},
  {'no': 8, 'keyword': 'Bingombmurington'},
  {'no': 9, 'keyword': 'Port Marlta'},
  {'no': 10, 'keyword': 'Leinecoffs'},

];

Dropdown list

This is our dropdown list using ListView builder

Widget _buildSearchList() => Container(
       height: 150.0,
       decoration: BoxDecoration(
         border: Border.all(color: Colors.grey[400], width: 1),
         borderRadius: BorderRadius.all(Radius.circular(5)),
         color: Colors.white,
       ),
       padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
       margin: EdgeInsets.only(top: 5.0),
       child: ListView.builder(
           padding: const EdgeInsets.all(0),
           shrinkWrap: true,
           scrollDirection: Axis.vertical,
           physics:
               BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
           itemCount: _testList.length,
           itemBuilder: (context, position) {
             return InkWell(
               onTap: () {
                 _onChanged(position);
               },
               child: Container(
                   // padding: widget.padding,
                   padding:
                       EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
                   decoration: BoxDecoration(
                       color: position == _selectedIndex
                           ? Colors.grey[100]
                           : Colors.white,
                       borderRadius: BorderRadius.all(Radius.circular(4.0))),
                   child: Text(_testList[position]['keyword'],style: TextStyle(color: Colors.black),)),
             );
           }),
     );

Dropdown container

this is a container looks like dropdown field where we are handling our list to show and hide

InkWell(
                        onTap: _onhandleTap,
                        child: Container(
                          decoration: BoxDecoration(
                            border: Border.all(
                                color: enableList
                                    ? Colors.black
                                    : Colors.grey,
                                width: 1),
                            borderRadius: BorderRadius.all(Radius.circular(5)),
                            color: Colors.white,
                          ),
                          padding: const EdgeInsets.symmetric(horizontal: 10.0),
                          height: 48.0,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            mainAxisSize: MainAxisSize.min,
                            children: <Widget>[
                              Expanded(
                                  child: Text(
                                _selectedIndex != null
                                    ? _testList[_selectedIndex]['keyword']
                                    : "Select value",
                                style: TextStyle(fontSize: 16.0),
                              )),
                              Icon(Icons.expand_more,
                                  size: 24.0, color: Color(0XFFbbbbbb)),
                            ],
                          ),
                        ),
                      ),

show the list based on enableList varibale

enableList ? _buildSearchList() : Container(),

our own created dropdown

 

Full Source code

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(title: 'Flutter Demo Home Page'),
    );
  }
}

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

 

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  bool enableList = false;
  int _selectedIndex;
    _onhandleTap() {
    setState(() {
      enableList = !enableList;
    });
  }

      

 

 

 

Other resources to learn about dropdown…

https://api.flutter.dev/flutter/material/DropdownButton-class.html

 

(: we have developed our custom dropdown list  in flutter