Taking all the real remaining space in a row

63 Views Asked by At

I want to create a Row in Flutter with an avatar and some text. Currently, text is taking all remaining space horizontally with Expanded. I want to get rid of spacing on the left in the following example.

Note: Blue text "Atlas" is hardcoded. Rest of the content is coming from a database. You can think it's like a chat buble. Atlas is user name.

example_1

I've tried to use Stack but they are getting on top of each other that way which is not what I wanted. Is there any possible way to my Expanded take all space after the avatar vertically? Desired result is:

example_2

My current code is like this:

Row(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Container(
        child: Container(
          width: 45,
          height: 45,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(50),
          ),
          child: Center(
            child: Image.asset('image.png'),
          ),
        ),
      context.smallGap,
      Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Atlas',
            ),
            Text(
              'Rest of the text..',
            ),
          ],
        ),
      ),
    ],
  ),
2

There are 2 best solutions below

2
On

What you should do is put image and texts (Column) Atlas & Flutter Learning Roadmap in a Row Then that Row should be inside column along with other texts.

Something like following

Column([
  Row ([image, Column(Atlas, Flutter Learning Roamap)]),
  Phase 1...
  Flutter....
])
0
On

Usually I would go with Dhiraj's method where you can extract the title from the outsourced content and place it in Row, while the rest in a column.

String databaseContent = 'example';
String title = functionToGetTitle(databaseContent);
Column([
  Row ([image, Column(Atlas, title)]),
  databaseContent
]);

An alternative method is to use Richtext widget. Here you can use a list of TextSpan and have anything you want in between them using WidgetSpan

See a demo here: https://dartpad.dev/?id=a947443679a47862711cd1acd8a9ddfc