Home > Blockchain >  Flutter : Why Text Widget on Flutter automatically centered when placed before TextField Widget ? (
Flutter : Why Text Widget on Flutter automatically centered when placed before TextField Widget ? (

Time:08-05

So i tried to make my TextWidget aligned to left but when i put TextWidget above ( before ) TextFieldWidget it's automatically become centered following with the TextFieldWidget, here my code

import 'package:flutter/material.dart';

void main() {
  runApp(new MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Center(
            child: Text("SQLite Application"),
          ),
        ),
        body: Column(
          children: <Widget>[
            SizedBox(
              height: 20,
            ),
            Text("Name of Things"),
            TextField()
          ],
        ),
      ),
    );
  }
}

and here is the result : Code Output

Is there a solve to make the TextWidget to aligned to the left ? I've tried to use TextAlign.left on TextWidget but it wont change.

CodePudding user response:

Use

crossAxisAlignment: CrossAxisAlignment.start,

on the Column

CodePudding user response:

You need to set the mainAxisAlignment to Start

Column(
crossAxisAlignment: CrossAxisAlignment.start

In case you want to place the contents at the Right Side, you can use

Column(
    crossAxisAlignment: CrossAxisAlignment.end

CodePudding user response:

just add

Column(
      crossAxisAlignment: CrossAxisAlignment.start,

the result

CodePudding user response:

You put your text inside Column widget. Column by default crossAxisAlignment is centre. That's why your text is always on centre.

Apply changes on your code according to this.

Column( crossAxisAlignment: CrossAxisAlignment.start, children:const [ SizedBox( height: 20, ), Text("your text....!"), TextField() ], ),

And if you wanna align text without Column, use Align with with alignment.topleft. It will move on left side

Align( alignment: Alignment.topLeft, child: Text("Name of Things", textAlign: TextAlign.left,)),

  • Related