Flutter Dropdown_Below

A Flutter Dropdown library which is customize flutter dropdownbutton widget.

Options

How to make it Work?

Description for example.

1. datas

_testList's type is always be a list.

If you want to use map or other type, you can customize this package.

List _testList = [
  {'no': 1, 'keyword': 'blue'},
  {'no': 2, 'keyword': 'black'},
  {'no': 3, 'keyword': 'red'}
];
List<DropdownMenuItem<Object?>> _dropdownTestItems;
var _selectedTest;

2. initState & build items to correct type

If you want to customize item’s child widget ex) Text -> Container, You can change any widget you want.

@override
void initState() {
  _dropdownTestItems = buildDropdownTestItems(_testList);
  super.initState();
}

List<DropdownMenuItem<Object?>> buildDropdownTestItems(List _testList) {
  List<DropdownMenuItem<Object?>> items = [];
  for (var i in _testList) {
    items.add(
      DropdownMenuItem(
        value: i,
        child: Text(i['keyword']),
      ),
    );
  }
  return items;
}

3. change function

onChangeDropdownTests(selectedTest) {
  print(selectedTest);
  setState(() {
    _selectedTest = selectedTest;
  });
}

4. UI

Dropdown Widget.

DropdownBelow(
  itemWidth: 200,
  itemTextstyle: TextStyle(fontSize: 14, fontWeight: FontWeight.w400, color: Colors.black),
  boxTextstyle: TextStyle(fontSize: 14, fontWeight: FontWeight.w400, color: Color(0XFFbbbbbb)),
  boxPadding: EdgeInsets.fromLTRB(13, 12, 0, 12),
  boxHeight: 45,
  boxWidth: 200,
  hint: Text('choose item'),
  value: _selectedTest,
  items: _dropdownTestItems,
  onChanged: onChangeDropdownTests,
),

5. Question

IF you want to make itemBox dropdown when you enter the page?

Put this code to initState like this.

Timer(Duration(milliseconds: 200), () {
  CustomDropdownButtonState state = dropdownKey1.currentState;
  state.callTap();
});

And put key to Widget like this.

DropdownBelow(
  key: dropdownKey1,
  itemWidth: 200,
  itemTextstyle: TextStyle(fontSize: 14, fontWeight: FontWeight.w400, color: Colors.black),
  boxTextstyle: TextStyle(fontSize: 14, fontWeight: FontWeight.w400, color: Color(0XFFbbbbbb)),
  boxPadding: EdgeInsets.fromLTRB(13, 12, 0, 12),
  boxHeight: 45,
  boxWidth: 200,
  hint: Text('choose item'),
  value: _selectedTest,
  items: _dropdownTestItems,
  onChanged: onChangeDropdownTests,
)

Actually, dropdown widget is made by Navigation. So, it can work.

Complete Example Demo

Here is a complete demo that integrates all the above elements into a working Flutter application.

import 'package:flutter/material.dart';
import 'package:dropdown_below/dropdown_below.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  GlobalKey<DropdownBelowState> dropdownKey1 = GlobalKey<DropdownBelowState>();
  List _testList = [
    {'no': 1, 'keyword': 'blue'},
    {'no': 2, 'keyword': 'black'},
    {'no': 3, 'keyword': 'red'}
  ];
  List<DropdownMenuItem<Object?>> _dropdownTestItems = [];
  var _selectedTest;

  @override
  void initState() {
    _dropdownTestItems = buildDropdownTestItems(_testList);
    Timer(Duration(milliseconds: 200), () {
      CustomDropdownButtonState state = dropdownKey1.currentState!;
      state.callTap();
    });
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  List<DropdownMenuItem<Object?>> buildDropdownTestItems(List _testList) {
    List<DropdownMenuItem<Object?>> items = [];
    for (var i in _testList) {
      items.add(
        DropdownMenuItem(
          value: i,
          child: Text(i['keyword']),
        ),
      );
    }
    return items;
  }

  onChangeDropdownTests(selectedTest) {
    print(selectedTest);
    setState(() {
      _selectedTest = selectedTest;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black12,
      appBar: AppBar(
        title: Text('Dropdown Below Example'),
      ),
      body: Center(
        child: Column(
          children: [
            DropdownBelow(
              key: dropdownKey1,
              itemWidth: 200,
              itemTextstyle: TextStyle(fontSize: 14, fontWeight: FontWeight.w400, color: Colors.black),
              boxTextstyle: TextStyle(fontSize: 14, fontWeight: FontWeight.w400, color: Color(0XFFbbbbbb)),
              boxPadding: EdgeInsets.fromLTRB(13, 12, 0, 12),
              boxHeight: 45,
              boxWidth: 200,
              hint: Text('Choose item'),
              value: _selectedTest,
              items: _dropdownTestItems,
              onChanged: onChangeDropdownTests,
            ),
            TextField(),
            ElevatedButton(
              onPressed: () {
                FocusScopeNode currentFocus = FocusScope.of(context);

                if (!currentFocus.hasPrimaryFocus) {
                  currentFocus.unfocus();
                }
              },
              child: Text('Focus Out Button'),
            )
          ],
        ),
      ),
    );
  }
}

This demo includes:

• Initializing and populating the dropdown items.
• Handling changes in the dropdown selection.
• Automatically opening the dropdown menu when the page loads.
• Additional UI elements like a TextField and an ElevatedButton for demonstration purposes.