Alignment of Widgets inside a container

Question

Newbie question Flutter Question.

I have divided my screen into 2 containers and place widgets into the container.

Even after providing sufficient padding inside the container I wonder why the icon is getting chipped off and also how do I provide sufficient spacing between each widget inside of the container.

  Widget myContainer() {
    int _act = 1;
    return Column(
      children: <Widget>[
        Expanded(
          flex: 5,
          child: Container(
            color: Colors.black26,
            padding: const EdgeInsets.only(left:35.0,top:25.0,right:35.0,bottom:35.0),
            child: Column(
              children: <Widget>[
                Icon(Icons.add_comment, size:25.0,),
                Text('Starter line', style: TextStyle(fontSize: 40.0), textAlign: TextAlign.left,),
                Text('Second line ', style: TextStyle(fontSize: 20.0), textAlign: TextAlign.left,),
              ],
            ),
          ),
        ),
        Expanded(
          flex: 5,
          child: Container(
            color: Colors.black12,
            padding: const EdgeInsets.only(left:35.0,top:20.0,right:35.0,bottom:10.0),
            child: Column(
              children: <Widget>[
//                TextField(
//                  decoration: InputDecoration(
//                      hintText: 'Sign in with Google',
//                      filled: true,
//                      fillColor: Colors.white),
//                  autofocus: true,
//                ),
                Text(
                  'Conditions apply',
                  style: TextStyle(fontSize: 20.0),
                  textAlign: TextAlign.center,
                ),
                Text(
                  'Other information',
                  style: TextStyle(fontSize: 15.0),
                  textAlign: TextAlign.center,
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }

Attaching the image for reference

Answer 1

The thing is you're just not giving enough padding on the top side, try 100 ;)

But the good practice is actually to wrap all into a SafeArea Widget

For the positionning part you can use Center() Widget the wrap your column and make it into the center: Docs

You can also use Positionned() Widget to specified very clearly where it should be into your Container : Widget of the week and Docs (seems really appropriate in your case)

Also you can imagine using Column alignement property, for instance:

child: Column(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly, 
    children: <Widget>[
        ...

Answer 2

Use SafeArea as a root component

Widget myContainer() {
    int _act = 1;
    return SafeArea(
      child: Column(/*...Your code ....*/)
    );
}