Flutter: how to align widgets inside a container

Question

The Align widget has given me weird alignments. So i created FlatButtons that should be aligned on the bottom-right and bottom-right of the blue container. But they aren't going to their desired spots. The red color represents the scaffold and the blue represents the container

PROBLEM : [ https://i.stack.imgur.com/Jmo5K.png ]

Full Code :

Padding(
    padding: EdgeInsets.symmetric(vertical: 5,horizontal: 10),
    child: Container(
      color: Colors.blue,
      height: 1000,
      child: SingleChildScrollView(
        child: Column(
          children: <Widget>[

            //Choose feedback type
            Align(
              alignment: Alignment.topLeft,
              child: DropdownButton<String>(
                value: dropdownValue,
                hint: Text('Feedback type'),
                icon: Icon(Icons.arrow_downward),
                iconSize: 15,
                elevation: 16,
                style: TextStyle(color: Colors.blue),
                onChanged: (String newvalue){
                  setState(() {
                    dropdownValue = newvalue;
                  });
                },
                items: <String>['Suggestion','Problem'].map<DropdownMenuItem<String>>((String value) {
                  return DropdownMenuItem<String>(
                    value: value,
                    child: Text(value),
                  );
                }).toList(),
              ),
            ),

            SizedBox(height: 20,),

            // Input feedback
            TextFormField(
              maxLines: 13,
              maxLength: 700,
              textAlign: TextAlign.left,
              initialValue: 'Please keep suggestions and problems separate.',
              decoration: InputDecoration(
                fillColor: Colors.white,
                labelText: "Feedback here",
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10)
                  ),
              ),
              validator: (val){
                if(val.length < 20){
                  return "Feeback too short";
                }else{
                  return null;
                }
              },
            ),
            // cancel
            Align(
              alignment: Alignment.bottomLeft,
              child: FlatButton(
                onPressed: (){Navigator.of(context).pop();},
                child: Text('Cancel')
              ),
            ),

            // Submit
            Align(
              alignment: Alignment.bottomRight,
              child: FlatButton(
                onPressed: (){Navigator.of(context).pop();},
                child: Text('Submit')
              ),
            ),

          ],
        ),
      ),
    ),
  ),
);
}
}

Answer 1

you should use a row to align your buttons like this:

Column(
  children: <Widget>[

    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween
      children: [
        // cancel
        Align(
          alignment: Alignment.bottomLeft,
          child: FlatButton(
            onPressed: (){Navigator.of(context).pop();},
            child: Text('Cancel')
          ),
        ),

        // Submit
        Align(
          alignment: Alignment.bottomRight,
          child: FlatButton(
            onPressed: (){Navigator.of(context).pop();},
            child: Text('Submit')
          ),
        ),
      ]
    )

  ],
)

Answer 2

You can use ButtonBar , you can config the surrounding space around the buttons and alignment.

ButtonBar(
      alignment: MainAxisAlignment.spaceBetween,
      mainAxisSize: MainAxisSize.max,
      buttonTextTheme: ButtonTextTheme.normal,
      children: <Widget>[
        FlatButton(
            onPressed: () {
              Navigator.of(context).pop();
            },
            child: Text('Cancel')),
        FlatButton(
            onPressed: () {
              Navigator.of(context).pop();
            },
            child: Text('Submit')),
      ],
    ),