Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Aligntment properties doesn't work so I use empty expanded widget

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 unnecessarry method _dummyExpanded to fill available space which it’s just expanded with empty container. Ofcourse It will hard to read since there are many nested row and collumn, How I remove that unneeded method without loss layout output what I expect?

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

I believe I should have use alignment but Idk how to

>Solution :

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.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading