我在flutter中的UI有问题.任何有widget经验的人请帮助我.
Firstly, here's the target from figma :
日期和时间都使用下拉菜单.
This is what it become after my code :
This is my code :
Container(
alignment: Alignment.centerLeft,
child: Text('Schedule',
style: TextStyle(
color: Color.fromRGBO(78, 125, 150, 1),
fontSize: 12,
fontWeight: FontWeight.w600
))),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
height: 40,
width: MediaQuery.of(context).size.shortestSide * 0.5,
color: Colors.white,
child: DropdownButtonFormField(
onChanged: (value) {},
items: _dropdownDate.map((value) =>
DropdownMenuItem(
child: Text(value),
value: value,
)).toList(),
elevation: 4,
dropdownColor: Colors.white,
decoration: InputDecoration(
prefixIcon: const Icon(Icons.calendar_month, size: 16),
hintText: 'Select Date',
hintStyle: TextStyle(fontSize: 12),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
width: 0.8,
color: Colors.grey,
)),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
width: 0.8,
color: Colors.grey,
)),
contentPadding: const EdgeInsets.all(16),
fillColor: Colors.white
),
),
),
Container(
height: 40,
width: MediaQuery.of(context).size.shortestSide * 0.3,
color: Colors.white,
child: DropdownButtonFormField(
onChanged: (value) {},
items: _dropdownTime.map((value) =>
DropdownMenuItem(
child: Text(value),
value: value,
)).toList(),
elevation: 4,
dropdownColor: Colors.white,
decoration: InputDecoration(
prefixIcon: const Icon(Icons.watch_later_outlined, size: 16),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
width: 0.8,
color: Colors.grey,
)),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
width: 0.8,
color: Colors.grey,
)),
contentPadding: const EdgeInsets.all(16),
fillColor: Colors.white
),
),
),
],
),
I want to make the size in the row like this :
50%下拉日期，
and the problem are :
- 我不知道如何将其配置为行空间的百分比，而不是使用MediaQuery.of(context.size).宽度，因为我已经使用了边距.
- 如何使百分比自动适合用户使用的任何设备.
希望能在这里解决这个问题，谢谢大家~
Update，使用布局生成器后:
