how to make the dropdown to the left, because what i get is the dropdown in the middle

 DropdownButton<String>(
                value: _chosenValue2,

                //elevation: 5,
                style: TextStyle(color: Colors.black),

                items: <String>[
                  'Personal Type',
                  'Other',
                ].map<DropdownMenuItem<String>>((String value) {
                  return DropdownMenuItem<String>(
                    value: value,
                    child: Text(value),
                  );
                }).toList(),
                hint: Text(
                  "Customer Model",
                  style: TextStyle(
                      color: Colors.black,
                      fontSize: 16,
                      fontWeight: FontWeight.w600),
                ),
                onChanged: (String value) {
                  setState(() {
                    _chosenValue2 = value;
                  });
                },
              ),

CodePudding user response：

Try below code hope its helpful to you. Add your dropdown widget inside Container and set Alignment.centerLeft

  Container(
       // padding: EdgeInsets.all(5), if you required some padding to dropdown to set padding 
        alignment:Alignment.centerLeft,
        child: DropdownButton<String>(
          value: _chosenValue2,

          //elevation: 5,
          style: TextStyle(color: Colors.black),

          items: <String>[
            'Personal Type',
            'Other',
          ].map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
          hint: Text(
            "Customer Model",
            style: TextStyle(
                color: Colors.black,
                fontSize: 16,
                fontWeight: FontWeight.w600),
          ),
          onChanged: (String value) {
            setState(() {
              _chosenValue2 = value;
            });
          },
        ),
      ),

Your result screen->

CodePudding user response：

You could use quite a few approaches. You could wrap your drop-down widget in a Container or Align widget and set their alignment property to Alignment.bottomLeft or Alignment.centerLeft or Alignment.topLeft. You could also wrap your dropdown widget inside just a Container and then use margin property to move your widget like margin: EdgeInsets.only(right: 20) or to any value of your desire. Lastly, you could also wrap your widget with a Padding widget and set the padding property to an extent you want your drop-down widget to move leftwards like padding: const EdgeInsets.only(right: 50)