How to center flutter text with other widgets in row

Question

I created a row with a BackButton and a TextWidget. I want to center the text to the middle of the screen. Actually flutter centeres the text to the containers width, but the containers width isnt the same as the screen width, because there is the backbutton. How do i fix that?

  Expanded getTitle() {
    return new Expanded(
        child: new Text("Einloggen", style: new TextStyle(fontSize: 18.0), textAlign: TextAlign.center)
    );
  }

  BackButton getBackButton() {
    return new BackButton(

    );
  }

  Row getHeader() {
    return new Row(
      children: <Widget>[
        getBackButton(),
        getTitle()
      ],
    );
  }
  @override
  Widget build(BuildContext context) {
    final double statusBarHeight = MediaQuery.of(context).padding.top;
    return new Material(
      child: new Container(
        padding: new EdgeInsets.fromLTRB(0.0, statusBarHeight, 0.0, 0.0),
        child: new Column(
          children: <Widget>[
            getHeader()
          ],
        ),
      ),
    );
  }

I want a BackButton and a centered Text in one row, but the text isnt centered. — M. Berg, Mar 25 '18 at 19:15

score 14 · Answer 1 · answered Aug 28 '18 at 21:15

14

You can use the Row's mainAxisAlignment parameter to center align children of a row.

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    //children Widgets
  ]
);

Similarly, mainAxisAligment paramter can also be used to align Column's children. For more information check this out!

answered Aug 28 '18 at 21:15

Chaitanya

719
9
23

No sure, Not working for me, i see the image like the example shows – Gatunox Jul 03 '19 at 01:49

score 6 · Answer 2 · answered May 28 '20 at 18:20

Based on your code

  Widget getTitle() {
    return const Text('Einloggen',
        style: TextStyle(fontSize: 18.0), textAlign: TextAlign.center);
  }

  BackButton getBackButton() {
    return const BackButton();
  }

  Row getHeader() {
    return  Row(
      children: <Widget>[
        Expanded(
          child: getBackButton(),
        ),
        const Spacer(),
        getTitle(),
        const Spacer(flex: 2)
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    final double statusBarHeight = MediaQuery.of(context).padding.top;
    return Material(
      child: Container(
        padding: EdgeInsets.fromLTRB(0.0, statusBarHeight, 0.0, 0.0),
        child: Column(
          children: <Widget>[getHeader()],
        ),
      ),
    );
  }

score 5 · Answer 3 · answered Apr 03 '18 at 20:05

You can achieve the same UI using A Scaffold with AppBar

class mytab extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        centerTitle: true,
        leading: new Icon(Icons.arrow_back),
        title: new Text("Einloggen",
            style: new TextStyle(fontSize: 18.0)),
      ),
    );
  }
}

To make the Title in the Center :

centerTitle: true

score 2 · Answer 4 · answered Nov 12 '19 at 18:19

I don't know if it is still useful, but I found a solution thanks to widegtes: Container, Stack and Align.

Widget getTitle() {
  return new Text("Einloggen", style: new TextStyle(fontSize: 18.0));
}

Widget getBackButton() {
  return Container(
      height: MediaQuery.of(context).size.height,
      child: IconButton(
        icon: Icon(Icons.arrow_back),
        onPressed: moveToLogin,
      ));
}

Widget getHeader() {
  return Container(
    height: 50.0,
    // you must set a size to the Conteiener to make sure that the internal Align 
    // widens as much as possible.
    child: new Stack(
      //  Stack places the objects in the upper left corner
      children: <Widget>[
        getBackButton(),
        Align(alignment: Alignment.center, child: getTitle()),
      ],
    ),
  );
}

final double statusBarHeight = MediaQuery.of(context).padding.top;
return new Container(
  padding: new EdgeInsets.fromLTRB(0.0, statusBarHeight, 0.0, 0.0),
  child: new Column(
    children: <Widget>[getHeader()],
  ),
);

This is the result

Image

How to center flutter text with other widgets in row

4 Answers4