text widget keeps centering without centre widget

Question

image link since i'm not allowed to post images yet

I'm trying to create an app but the two texts 'hello and mr '' are in the center even when I've not added the center widget and why do they have that amount of space between them. the app title had a massive bottom padding that i had to remove it.' the app sample is in the image above. I just want the two to stack above each other in the top left corner, and the space between them to reduce, Here's my code:

    Container(
    child: SingleChildScrollView(
      padding: EdgeInsets.all(10.0),
      child: Column(
        children: <Widget>[
          Text(
            'Hello,',
            style: Theme.of(context)
                .textTheme.headline4
                .apply( color: Colors.grey),
          ),
          Text(
            "Mr. Udeinya",
            style: Theme.of(context)
                .textTheme
                .headline4
                .apply(color: Colors.deepOrange, fontWeightDelta: 2),
          ),

          Container(
            padding: EdgeInsets.all(20.0),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10.0),
                color: Colors.deepOrange,
                border: Border.all(
                  width: 3,
                  color: Colors.white,
                )
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  'Wallet Balance :',
                  style: TextStyle(
                    fontSize: 19,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
                SizedBox(
                  height: 10.0,
                ),

                Container(
                  width: double.infinity,
                )
              ],
            ),
          ),
        ],
      ),
    ),
  ),

and the image

image link since i'm not allowed to post images yet

Answer 1

One solution to your problem would be to change the crossAxisAlignment property of your column to CrossAxisAlignment.start

I would also recommend, if you intend to group them together, to put your two text widgets together in a column themselves.

Container(
    child: SingleChildScrollView(
      padding: EdgeInsets.all(10.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                'Hello,',
                style: Theme.of(context)
                    .textTheme
                    .headline4
                    .apply(color: Colors.grey),
              ),
              Text(
                "Mr. Udeinya",
                style: Theme.of(context)
                    .textTheme
                    .headline4
                    .apply(color: Colors.deepOrange, fontWeightDelta: 2),
              ),
            ],
          ),
          Container(
            padding: EdgeInsets.all(20.0),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10.0),
                color: Colors.deepOrange,
                border: Border.all(
                  width: 3,
                  color: Colors.white,
                )),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  'Wallet Balance :',
                  style: TextStyle(
                    fontSize: 19,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
                SizedBox(
                  height: 10.0,
                ),
                Container(
                  width: double.infinity,
                )
              ],
            ),
          ),
        ],
      ),
    ),
  )

Something like This ? Hope that it helped.

Answer 2

The problem is you are not giving a crossAxisAlignment to the top-most column, so by default, it is centred.Add this to the top-most Column

crossAxisAlignment: CrossAxisAlignment.start,

Answer 3

Try to use text align property of Text widget you can find more in the link. Text widget documentation

Example:

 Text("data,",textAlign: TextAlign.left,)