Is there a way of making beautiful dropdown menu in flutter?

Question

I want to make beautiful dropdown menu like this. I already tried making it with containers, but it's taking very long time. Is there any package or a way of configuring default dropdownmenu and items?

Answer 1

try this:

import 'package:flutter/material.dart';

void main() => runApp(ExampleApp());

class ExampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: PopMenu(),
    );
  }
}

class PopMenu extends StatefulWidget {
  @override
  _PopMenuState createState() => _PopMenuState();
}

class _PopMenuState extends State<PopMenu> {
  List<String> _menuList = ['menu 1', 'menu 2', 'menu 3'];
  GlobalKey _key = LabeledGlobalKey("button_icon");
  OverlayEntry _overlayEntry;
  Offset _buttonPosition;
  bool _isMenuOpen = false;

  void _findButton() {
    RenderBox renderBox = _key.currentContext.findRenderObject();
    _buttonPosition = renderBox.localToGlobal(Offset.zero);
  }

  void _openMenu() {
    _findButton();
    _overlayEntry = _overlayEntryBuilder();
    Overlay.of(context).insert(_overlayEntry);
    _isMenuOpen = !_isMenuOpen;
  }

  void _closeMenu() {
    _overlayEntry.remove();
    _isMenuOpen = !_isMenuOpen;
  }

  OverlayEntry _overlayEntryBuilder() {
    return OverlayEntry(
      builder: (context) {
        return Positioned(
          top: _buttonPosition.dy + 70,
          left: _buttonPosition.dx,
          width: 300,
          child: _popMenu(),
        );
      },
    );
  }

  Widget _popMenu() {
    return Material(
      child: Container(
        width: 300,
        height: 300,
        decoration: BoxDecoration(
          color: Color(0xFFF67C0B9),
          borderRadius: BorderRadius.circular(4),
        ),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: List.generate(
            _menuList.length,
            (index) {
              return GestureDetector(
                onTap: () {},
                child: Container(
                  alignment: Alignment.center,
                  width: 300,
                  height: 100,
                  child: Text(_menuList[index]),
                ),
              );
            },
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          key: _key,
          width: 300,
          height: 50,
          decoration: BoxDecoration(
            color: Color(0xFFF5C6373),
            borderRadius: BorderRadius.circular(25),
          ),
          child: Row(
            children: [
              Expanded(
                child: Center(child: Text('menu 1')),
              ),
              IconButton(
                icon: Icon(Icons.arrow_downward),
                color: Colors.white,
                onPressed: () {
                  _isMenuOpen ? _closeMenu() : _openMenu();
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 2

You could use a Container() Widget with Boxdecoration and as a child the DropdownButton() Widget.

Use DropdownButtonHideUnderline() as a Parent to hide the default Underline.

Sample Code:

Container(
  padding: const EdgeInsets.symmetric(horizontal: 12.0),
  height: 40.0,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(30.0),
    color: Colors.yellow,
  ),
  child: DropdownButtonHideUnderline(
    child: DropdownButton() // your Dropdown Widget here
  ),
);