CODEWITHSUNDEEP
flutterdartalignment
Hasen
Hasen

Reputation: 12324

Flutter TextAlign ignored in Row widget

I'm using TextAlign to centre one piece of text and then again to send another piece of text to the right, all contained in a Row, but the alignment does nothing at all.

Scaffold(
  body: Row(
    children: <Widget>[
      Text('Align Centre', textAlign: TextAlign.center),
      Text('Align Right', textAlign: TextAlign.right),
    ],
  ),
);

You can see here it's ignored completely:

enter image description here

Upvotes: 0

Views: 936

Answers (3)

A_Rush
A_Rush

Reputation: 378

Scaffold(
    body: Row(
        children: <Widget>[
            Container(
                width:screen_width/2,
                alignment: Alignment.center,
                child: Text('Align Centre',),
            ),
            Container(
                width:screen_width/2,
                alignment: Alignment.centerRight,
                child: Text('Align right',),
            ),
        ],
    ),
);

and you can get screen_widht by

double screen_width = MediaQuery.of(context).size.width;

Upvotes: 0

Spatz
Spatz

Reputation: 20118

Wrap Text with Expanded widget:

    Scaffold(
      body: Row(
        children: <Widget>[
          Expanded(child: Text('Align Centre', textAlign: TextAlign.center)),
          Expanded(child: Text('Align Right', textAlign: TextAlign.right)),
        ],
      ),
    );

By default Text takes up space only required for content.

Or what you probably want:

    Scaffold(
      body: Stack(
        children: <Widget>[
          Positioned.fill(
              child: Text('Align Centre', textAlign: TextAlign.center)),
          Positioned.fill(
              child: Text('Align Right', textAlign: TextAlign.right)),
        ],
      ),
    );

Upvotes: 0

Max Macfarlane
Max Macfarlane

Reputation: 824

It sounds like you are after something like this:

return Scaffold(
      body: Center(
        child: Row(
          children: <Widget>[
            SizedBox(width: MediaQuery.of(context).size.width / 3.3333333,),
            Expanded(child: Text('Align Centre adding more text heree....', textAlign: TextAlign.center)),
            Expanded(child: Text('Align Right', textAlign: TextAlign.right)),
          ],
        ),
      ),
    );

By adding an empty container first into the row it pushed the Align Center text into the middle.

Edit: Instead of using an expanded widget used a sized box instead and fix the width to consume a 3rd of the view.

Upvotes: 1

Related Questions