Home > Software engineering >  Alignment properties doesn't work so I use empty expanded widget
Alignment properties doesn't work so I use empty expanded widget

Time:12-25

I want make text to the right, what am I doing so far

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  static const String _judul = 'Private Chat';
  static var _warnaTema = Colors.pink[100];

  Widget _dummyExpanded() {
    return Expanded(
      child: Container(), //contain empty data,
    ); //just for fill remaining space
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _judul,
      theme: ThemeData(
        primaryColor: _warnaTema,
      ),
      home: Column(
        children: [
          Container(
            child: Row(
              children: [
                this._dummyExpanded(),
                Text('this is real data 1'),
              ],
            ),
          ),
          Container(
            child: Row(
              children: [
                this._dummyExpanded(),
                Text('this is real data 2'),
              ],
            ),
          )
        ],
      ),
    );
  }
}

The layout output is what I expected (the text is in right), however there's unneeded code.

As you see I use unnecessary method _dummyExpanded to fill available space which it's just expanded with empty container. Of course it will be hard to read since there are many nested row and column, how I remove that unneeded method without loss layout output what I expect?

I believe I should have use alignment but I don't know how to

CodePudding user response:

Method 1.

         Container(
            child: Row(
              mainAxisAlignment:MainAxisAlignment.end,
              children: [
                Text('this is real data 2'),
              ],
            ),
          )

Method 2.

I prefer this method, You can wrap text with this method. You can also use Flexible widget instead of Expanded

       Container(
        child: Row(
          children: [
            Expanded(child: Text('this is real data 2', textAlign:TextAlign.end )),
          ],
        ),
      )

Method 3.

If you have only Text widgets as children of Column widget then you can set crossAxisAlignment: CrossAxisAlignment.end, for your parent Column widget.

  • Related