I’m an expert user of Flutter but I’m pretty new to Flutter Web.
I’m trying to build a list of months where the user can select the desired one.
For some reason the list and container are all broken in style and I don’t know why.
Padding(
padding: EdgeInsets.fromLTRB(38.w, 28.h, 38.w, 28.h),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Container(
decoration: ShapeDecoration(
color: Color(0xFFF8FCFC),
shape: RoundedRectangleBorder(
side: BorderSide(
width: 1,
color: AppColors.whiteAccent,
),
borderRadius: BorderRadius.circular(10.r),
),
),
child: Center(
child: DropdownButton<String>(
style: TextStyle(
color: AppColors.blue,
fontSize: 40.sp,
height: 0.03,
),
value: 'Novembre',
iconSize: 0,
underline: const SizedBox(),
elevation: 16,
onChanged: debugPrint,
focusColor: Colors.transparent,
items: List.generate(
12, (month) => monthInLetters(month + 1))
.map<DropdownMenuItem<String>>(
(String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
},
).toList(),
),
),
),
],
),
],
),
),
UPDATE
I managed to set the item height using the itemHeight
property. Now I miss the vertical alignment and the fontWeight (that for some reason is stuck on regular size)
The issue is here using height: 0.03
, you can remove this while it is needed to be 1
.
You can also play with
- DropdownButton’s
itemHeight
,padding
. - DropdownMenuItem’s
alignment
.
DropdownButton<String>(
// itemHeight: ,
padding: EdgeInsets.all(8),
style: TextStyle(
fontSize: 40,
height: 1, //this
),
value: 'Novembre',
iconSize: 0,
underline: const SizedBox(),
elevation: 16,
onChanged: debugPrint,
focusColor: Colors.transparent,
items:
....
return DropdownMenuItem<String>(
alignment: Alignment.center,
value: value,
child: Text(
value,
),
);
),