英文:
Flutter: I can't get rid of the overflow
问题
I'm new to Flutter and I'm trying to align two DropdownButtonFormField on one line on a Model S phone, but there's a 25px overflow on the second DropdownButtonFormField that I can't get rid of.
在Flutter中，我是新手，我尝试在Model S手机上将两个DropdownButtonFormField对齐在一行上，但第二个DropdownButtonFormField有25px的溢出，我无法解决。
In the beginning, there was no Flexible widgets, there were only SizedBoxes with which I set finite widths, and it worked, but the rendering in responsive was disgusting. So I added a LayoutBuilder with Flexibles, but the second DropdownButton still overflows by 25 pixels. I've played around with the constraints maxWidth a bit, but to no avail. I tried replacing Flexible with Expanded, but both DropdownButtons end up the same size so that's not what I want. I also tried replacing my SingleChildScrollView with a ListView with shrinkWrap set to true, but no success as well. Do you have any ideas?
起初，没有Flexible小部件，只有我使用SizedBox设置有限宽度，这样可以工作，但在响应式渲染中效果不佳。所以我添加了一个带有Flexibles的LayoutBuilder，但第二个DropdownButton仍然溢出了25个像素。我尝试稍微调整了maxWidth的约束，但没有用。我还尝试用Expanded替换了Flexible，但两个DropdownButton最终变得相同大小，这不是我想要的。我还尝试将SingleChildScrollView替换为shrinkWrap设置为true的ListView，但也没有成功。你有什么想法吗？
I think the answer should be obvious for a flutter expert, but since I'm new to this language and I don't find it intuitive, I'm struggling a bit lol.
我认为对于Flutter专家来说，答案应该是显而易见的，但由于我是新手，我并不觉得这很直观，所以我有点困扰，哈哈。
Also, if you have any tips on how I could optimize this code in any way, I welcome them. 
另外，如果你有任何关于如何优化这段代码的建议，我欢迎听取。
英文:
I'm new to Flutter and I'm trying to align two DropdownButtonFormField on one line on a Model S phone, but there's a 25px overflow on the second DropdownButtonFormField that I can't get rid of.
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: AppStyle.backgroundColorGreen,
body: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return SingleChildScrollView(
child: Form(
key: _key,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 30),
child: SizedBox(
child: (Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
flex: 1,
child: Container(
constraints: BoxConstraints(
maxWidth: constraints.maxWidth * 0.4),
child: SizedBox(
width: double.infinity,
child: DropdownButtonFormField<String>(
style: const TextStyle(
fontSize: 11, color: AppStyle.colorGrey),
decoration: InputDecoration(
prefixIcon: const Icon(
Icons.filter_alt,
color: Color.fromRGBO(19, 119, 0, 100),
),
contentPadding: const EdgeInsets.symmetric(
vertical: 15, horizontal: 8),
isCollapsed: true,
filled: true,
fillColor: Colors.white,
border: OutlineInputBorder(
borderSide: const BorderSide(
color: Colors.grey, width: 0.3),
borderRadius: BorderRadius.circular(5),
),
enabledBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: Colors.grey, width: 0.3),
borderRadius: BorderRadius.circular(5),
),
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: Colors.grey, width: 0.3),
borderRadius: BorderRadius.circular(5),
),
),
iconSize: 0,
hint: const Text("Filtrer par :"),
isExpanded: false,
value: plantFilter,
onChanged: (String? newValue) {
setState(() {
plantFilter = newValue;
});
},
items: <String>[
'Roses',
'Tulipes',
'Lys',
'Orchidées'
].map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
),
)),
Flexible(
flex: 1,
child: Container(
constraints: BoxConstraints(
maxWidth: constraints.maxWidth * 0.6),
child: SizedBox(
width: double.infinity,
child: DropdownButtonFormField<String>(
style: const TextStyle(
fontSize: 11, color: AppStyle.colorGrey),
decoration: InputDecoration(
contentPadding: const EdgeInsets.symmetric(
vertical: 15, horizontal: 8),
isCollapsed: true,
filled: true,
fillColor: Colors.white,
border: OutlineInputBorder(
borderSide: const BorderSide(
color: Colors.grey, width: 0.3),
borderRadius: BorderRadius.circular(5),
),
enabledBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: Colors.grey, width: 0.3),
borderRadius: BorderRadius.circular(5),
),
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: Colors.grey, width: 0.3),
borderRadius: BorderRadius.circular(5),
),
),
hint: const Text("Filtrer par :"),
isExpanded: false,
value: postFilter,
onChanged: (String? newValue) {
setState(() {
postFilter = newValue;
});
},
items: <String>[
'Voir tous les postes',
'Voir les postes gardés',
'Voir les postes non gardés'
].map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
),
)),
],
)),
),
),
),
);
}),
In the beginning, there was no Flexible widgets, there were only SizedBoxes with which I set finite widths, and it worked, but the rendering in responsive was disgusting. So I added a LayoutBuilder with Flexibles, but the second DropdownButton still overflows by 25 pixels. I've played around with the constraints maxWidth a bit, but to no avail. I tried replacing Flexible with Expanded, but both DropdownButtons end up the same size so that's not what I want. I also tried replacing my SingleChildScrollView with a ListView with shrinkWrap set to true, but no success aswell. Do you have any ideas ?
I think the answer should be obvious for a flutter expert, but since I'm new to this language and I don't find it intuitive, I'm struggling a bit lol.
Also, if you have any tips on how I could optimize this code in any way, I welcome them.
答案1
得分: 0
Make the following change:
在第二个下拉框中，将 isExpanded 的值设为 true：
hint: const Text("Filtrer par :"),
isExpanded: true, // 将此值设为 true
value: postFilter,
英文:
just do a small change, i tried in my system <br>
in 2nd dropdown make isExpanded = true,
hint: const Text("Filtrer par :"),
isExpanded: false, // make this true
value: postFilter,
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论