Is there a way of making beautiful dropdown menu in flutter? - 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

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
),
);

Answer 2

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();
},
),
],
),
),
),
);
}
}