Re: create a dropdown button in flutter

Question

I have used a DropDownButton in my build but i want the arrow to be displayed at the end and the dropdown items to be displayed from arrow, but in my app they are displaying from the top. i have attached the screenshots for your reference.

please can you tell me how to change this or is there any other way to simply create a drop down menu.

An example would be much appreciated.

Please excuse my code as I am new to programming and any comments or suggestions are most welcome.

Many Thanks, Mahi.

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'dart:ui';

void main(){
    runApp(new BranchSetup());
      }
      
class BranchSetup extends StatefulWidget {
    @override
    State<StatefulWidget> createState() {
         return new _BranchSetupState();
          }
       } 

    class _BranchSetupState extends State<BranchSetup> with 
                                WidgetsBindingObserver {

     @override
           Widget build(BuildContext context){
           return new MaterialApp(
              theme: new ThemeData(
                  primaryColor: const Color(0xFF229E9C),
                                ),
              title: 'Branch Setup',
              home: new Scaffold(
              body: new Container(
              child: new ListView(
                children: <Widget>[
                 new Container(
                   margin: const EdgeInsets.all(16.0),
                    child: new Row(
                     children: <Widget>[
                      new Expanded(
                        child: new TextFormField(
            decoration: new InputDecoration(                          
                       labelText: 'Branch Name',
                   ),
                ),
              ),
            ],
          ),
         ),
          new Container(
            margin: const EdgeInsets.all(16.0),
            child:
              new DropdownButton<String>(
                items: <String>['Mens','Womans']
                      .map((String value) {
                    return new DropdownMenuItem<String>(
                        value: value,
                        child: new Text(value),
                    );
                  }
                  ).toList(),
               onChanged: null,
                ),
            ),

          ],
        ),
        ),
     ),
    );
   }

  }

Answer 1

This looks like a bug in Flutter. I filed an issue.

In the meantime, you can work around it by wrapping your DropdownButton in a Column.

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new DemoApp()));
}

class DemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text('DropdownButton Example')),
      body: new ListView(
        children: [
          new Column(
            children: <Widget>[
              new DropdownButton<String>(
                items: <String>['Foo', 'Bar'].map((String value) {
                  return new DropdownMenuItem<String>(
                    value: value,
                    child: new Text(value),
                  );
                }).toList(),
                onChanged: (_) {},
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Answer 2

You can try out the plugin that I created : flutter_search_panel. Not a dropdown plugin, but you can display the items with the search functionality.

Use the following code for using the widget :

    FlutterSearchPanel(
        padding: EdgeInsets.all(10.0),
        selected: 'a',
        title: 'Demo Search Page',
        data: ['This', 'is', 'a', 'test', 'array'],
        icon: new Icon(Icons.label, color: Colors.black),
        color: Colors.white,
        textStyle: new TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0, decorationStyle: TextDecorationStyle.dotted),
        onChanged: (value) {
          print(value);
        },
   ),