Question 75216 in Flutter Question posted in
The official Flutter documentation can be found here.

How to change text position – Flutter

enter image description here

Hi. How to change the text position. I want to change the Personal Information text in line with the first name. I tried to use Widget padding but it didn’t work.

Code

Container(
                        width: double.infinity,
                        color: Colors.white,
                        //margin: EdgeInsets.fromLTRB(10, 0, 10, 10),
                        padding: EdgeInsets.all(15),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.center, <=
                          children: [
                           /* SizedBox(
                              height: 30,
                            ),*/
                            Align(
                              alignment: Alignment.centerLeft,
                              child: Text(
                                'Personal Information',
                                style: TextStyle(
                                    color: Colors.black, fontSize: 18,),
                              ),
                            ),
                            Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                SizedBox(height: 35),
                                Container(
                                  width:
                                      MediaQuery.of(context).size.width >= 1000
                                          ? 1000
                                          : MediaQuery.of(context).size.width,
                                  child: Column(
                                    children: [
                                      Row(
                                        children: <Widget>[
                                          Expanded(
                                            child: Column(
                                              mainAxisAlignment:
                                                  MainAxisAlignment.start,
                                              crossAxisAlignment:
                                                  CrossAxisAlignment.start,
                                              children: [
                                                SizedBox(
                                                  height: 25,
                                                  child: Text(
                                                    'First Name',
                                                    style: TextStyle(
                                                        fontWeight:
                                                            FontWeight.bold),
                                                  ),
                                                ),
                                                SizedBox(
                                                  width: 400,
                                                  child: TextFormField(
                                                    style: const TextStyle(
                                                        color: Colors.black),
                                                    controller: firstName,
                                                    onSaved: (String? value) {
                                                      firstName.text = value!;
                                                    },
                                                    decoration:
                                                        const InputDecoration(
                                                      border:
                                                          OutlineInputBorder(
                                                        borderSide: BorderSide(
                                                            width: 1,
                                                            color:
                                                                Color.fromRGBO(
                                                                    217,
                                                                    217,
                                                                    217,
                                                                    1)),
                                                      ),
                                                      hintText: '* First Name',
                                                      hintStyle: TextStyle(
                                                          color: Colors.grey,
                                                          fontSize: 16),
                                                    ),
                                                  ),
                                                )
                                              ],
                                            ),
                                          ),
),

If I change crossAxisAlignment: CrossAxisAlignment.center, to CrossAxisAlignment.start my TextFormField also changes. Can anyone help me?

Tags:

2

Answers


  1. 0

    You are using Multiple columns which is causing this. From the code i don’t see why we need Multiple columns. You can create a single Column as a child for the container and Style the child widgets accordingly.
    This Would be the best way to implement it.

    You can give the alignment Property to the parent container. And update the style of child widget if it adheres to different styles.

    Login or Signup to reply.
  2. 0

    Remove the second Column and put its children’s in the first one. Then use Align widget over the column to bring it to the center. Or you may try giving the alignment parameter to Container, I’m not much sure of this.

    The hierarchy would be such:

    Container() => Align() => Column(children: [all the children of both old columns])
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search