CODEWITHSUNDEEP
dartflutter
M. Berg
M. Berg

Reputation: 991

How to center flutter text with other widgets in row

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()
          ],
        ),
      ),
    );
  }

enter image description here

Upvotes: 6

Views: 16717

Answers (4)

m1416
m1416

Reputation: 1087

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()],
        ),
      ),
    );
  }

enter image description here

Upvotes: 6

prov
prov

Reputation: 61

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

Upvotes: 2

Chaitanya
Chaitanya

Reputation: 729

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!

Upvotes: 14

Raouf Rahiche
Raouf Rahiche

Reputation: 31326

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

enter image description here

Upvotes: 5

Related Questions