Flutter DropdownButtonFormField is expanding but shouldn't-CodePudding

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();
    }
  }
}

CodePudding user response：

The problem is with the parent Container():

Container(
              // Set this -> width: 100,
              padding: EdgeInsets.symmetric(vertical: 10, horizontal: 15),
              color: Colors.white,
              child: DropdownButtonFormField<String>(
                isDense: true,
                items: [
                  DropdownMenuItem<String>(
                    child: Text('test 1'),
                    value: "test 1",
                  ),

One way of solving it is to set a fixed width for the Container.

CodePudding user response：

I recommend for you should wrap DropdownButtonFormField by SizedBox, the reason is the components inside the form should have a size fixed