I try to build an complex From in Flutter. The App will run on Windows and Web. But now I have a Problem with the DropdownButtonFormField. I want it to be only as wide as needed. But is expanded even so I set the isExpanded to false.
Where am I wrong?
The blue part is the background an the grey on the Sides is only a border. I Want the white box to be as small as possible.
Here the Code:
class FormOne extends StatefulWidget {
const FormOne({Key? key}) : super(key: key);
@override
State<FormOne> createState() => _FormOneState();
}
class _FormOneState extends State<FormOne> {
final _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {Padding(
padding: EdgeInsets.only(top: 15),
child: Form(
key: _formKey,
child: Column(
children: [
Text("Headline"),
const SizedBox(height: 10),
Container(
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 15),
color: Colors.white,
child: DropdownButtonFormField<String>(
items: [
DropdownMenuItem<String>(
child: BbnText.paragraphContrast("test 1"),
value: "test 1",
),
DropdownMenuItem<String>(
child: BbnText.paragraphContrast("test 100000"),
value: "test 100000",
)
],
value: "test 100000",
onChanged: (String? value) {},
onSaved: (value) => null,
isExpanded: false,
style: context.textTheme.paragraphContrast,
icon: Icon(Icons.arrow_drop_down, color: Colors.black,),
iconSize: 25,
dropdownColor: context.textFieldBackground,
borderRadius: BorderRadius.circular(5),
decoration: InputDecoration(
floatingLabelBehavior: FloatingLabelBehavior.never,
isCollapsed: true,
border: InputBorder.none,
),
),
)
],
),
),
);
}
_saveForm(){
if(_formKey.currentState?.validate() ?? false){
_formKey.currentState!.save();
}
}
}
2
Answers
The problem is with the parent
Container()
:One way of solving it is to set a fixed
width
for theContainer
.I recommend for you should wrap
DropdownButtonFormField
bySizedBox
, the reason is the components inside the form should have a size fixed