I'm trying to implement a DropDownButton where the list of items will be displayed from its start.
Meaning, I want the items list to be opened and displayed as if the items list "completes" the DropDownButton - right after the green underline and regardless to the current value (see current behavior below).
I tried looking up online some information of how to achieve it but it yielded nothing. Also, I tried wrapping the DropDownButton with widgets to set the alignment of the drop of items and unfortunately I managed nothing.
What am I missing?
How can I set The DropDownButton's list to be opened so that the items will be aligned from its start?
here is my code:
final List<String> categories = ['', 'Cakes', 'Chocolate', 'Balloons', 'Flowers', 'Greeting Cards','Gift Cards', 'Other'];
String _currCategory = categories[0];
@override
Widget build(BuildContext context){
return Material(
child: Scaffold(
resizeToAvoidBottomInset: true,
resizeToAvoidBottomPadding: false,
backgroundColor: Colors.transparent,
key: _scaffoldKeyMainScreen,
appBar: AppBar(
centerTitle: true,
elevation: 0.0,
backgroundColor: Colors.lightGreen[800],
actions: <Widget>[
///Checkout - cart
IconButton(
icon: Icon(Icons.shopping_cart_outlined),
onPressed: () {}
),
/// WishList
IconButton(
icon: Icon(Icons.favorite),
onPressed: () => {}
],
leading: Icon(Icons.logout),
title: Text('My app'),
),
body: Stack(
alignment: Alignment.center,
children: <Widget>[
Align(
alignment: Alignment.topCenter,
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.width * 0.35,
color: Colors.lightGreen[800],
),
),
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.circular(20.0),
),
child: Container(
color: Colors.white,
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
child: Align(
alignment: Alignment.center,
child: Container(
color: Colors.transparent,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(11.0),
child: Center(
child: Text(' Sort by: ',
style: TextStyle(
color: Colors.black,
),
),
),
),
Container(
color: Colors.transparent,
child: Theme(
data: Theme.of(context).copyWith(
canvasColor: Colors.transparent,
buttonTheme: ButtonTheme.of(context).copyWith(
alignedDropdown: true,
)
),
child: DropdownButton<String>(
dropdownColor: Colors.white,
underline: Container(
height: 2,
color: Colors.lightGreen[300],
),
icon: Icon(Icons.keyboard_arrow_down_outlined,
color: Colors.lightGreen[200],
),
elevation: 8,
value: _currCategory,
items: categories
.map<DropdownMenuItem<String>>((e) => DropdownMenuItem(
child: Text(e, style: TextStyle(color: Colors.lightGreen[300]),),
value: e,
)
).toList(),
onChanged: (String value) {
setState(() {
_currCategory = value;
});
},
)
),
),
///in my app I have a GridView that is built from items loaded from Firebase
///but I think it has nothing to do with the current problem so I placed a symbolic text
Center(child: Text(_currCategory)),
],
),
),
),
),
],
),
),
),
]
),
)
);
}
current behavior: App Demo of Current Behavior
