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

Flutter – Having trouble with centering with Row widget

I have a row widget and I want some Text to be in the very center or the Row and an Icon that will be to the left of it, and changing how far left the Icon is it is should not affect the position of the Text. Here is my code:

Widget build(BuildContext context) {
    return GestureDetector(
        child: FractionallySizedBox(
      heightFactor: 0.8,
      child: Container(
          color: Color(0xff2a2a2a),
          child: Column(
            children: [
              Row(
                children: [
                  Padding(
                      padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
                      child: Icon(Icons.egg)),
                  Column(
                    children: [
                      Padding(
                        padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
                        child: Text("TEST",
                            style: TextStyle(
                              fontSize: 24,
                              color: Color(0xffE0E0E0),
                            )),
                      ),
                      Row(
                        children: [
                          Text("TEST"),
                        ],
                      )
                    ],
                  )
                ],
              )
            ],
          )),
    ));
  }
}

Note that I haven’t actually made any adjustments to try to create this effect. That is because everything I have tried does not work. Here is what I have tried:

  1. Wrapped my Text in Align widget
  2. Include mainAxisAlignment: MainAxisAlignment.center in Row. This will center the Text and Icon, but I cannot adjust the position of the Icon without affecting the position of the Text and will affect possible future additions to the Row
  3. Wrap Text or/and Padding with Center. Both Icon and Text remain in the top left position
  4. It’s obvious that I’ve thought about using Padding but Padding doesn’t seem to be a very good solution and doesn’t seem to generalize well.

I also want to clarify that the problem is occurring in the Row that is furthest up. Any and all help and suggestions are greatly appreciated

Tags:

2

Answers


  1. 0

    Perhaps you should use Stack instead.

      Widget build(BuildContext context) {
    return GestureDetector(
        child: FractionallySizedBox(
          heightFactor: 0.8,
          child: Container(
              color: Color(0xff2a2a2a),
              child: Column(
                children: [
                  Stack(
                    children: [
                      Positioned(
                        left: 0,
                        child: Padding(
                            padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
                            child: Icon(Icons.egg)),
                      ),
                      Column(
                        children: [
                          Padding(
                            padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
                            child: Text("TEST",
                                style: TextStyle(
                                  fontSize: 24,
                                  color: Color(0xffE0E0E0),
                                )),
                          ),
                          Row(
                            children: [
                              Text("TEST"),
                            ],
                          )
                        ],
                      )
                    ],
                  )
                ],
              )),
        ));
  }
    Login or Signup to reply.
  2. 0

    I believe that you’re looking for Expanded()/Spacer() which allow proportionally sizing children of Column or a Row.

    Updated code:

    Widget build(BuildContext context) {
    return GestureDetector(
        child: FractionallySizedBox(
      heightFactor: 0.8,
      child: Container(
          color: Color(0xff2a2a2a),
          child: Column(
            children: [
              Row(
                children: [
                  Expanded( // added
                    child: Align( // added as well, because otherwise the Icon would be centered
                      alignment: Alignment.centerLeft,
                      child: Padding(
                        padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
                        child: Icon(Icons.egg)),
                    ),
                  ),
                  Column(
                    children: [
                      Padding(
                        padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
                        child: Text("TEST",
                            style: TextStyle(
                              fontSize: 24,
                              color: Color(0xffE0E0E0),
                            )),
                      ),
                      Row(
                        children: [
                          Text("TEST"),
                        ],
                      )
                    ],
                  ),
                  Spacer(), // added
                ],
              )
            ],
          )),
    ));
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search