space between in ConstrainedBox-CodePudding

There are two rows in a ConstrainedBox. And two widgets in first row and then i want to present them space between. Only one widget in second row and its size always not the same(like text in chat). The problem is length of first row didn't follow second row, how to solve it? Thanks!

ConstrainedBox(
        constraints: const BoxConstraints(maxWidth: 300 ) ,
      child:  Column(
        mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.start,
        children: [
         Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            mainAxisSize: MainAxisSize.min,
            children: [
             Flexible(child: const Text("Flutter")),
             const Image(image: NetworkImage("https://penueling.com/wp-content/uploads/2020/11/flutter.jpg"), width: 40, height: 20,),
            ],
          ),
             const Text("1111111111111"),
        ],
      ))

CodePudding user response：

You can use a combination of Stack and Positioned widgets to achieve this layout. Basically you make a Column and above that you add the image in a Stack, then you instruct the image to go to the top right position.

Something like this (I used an icon for the example):

ConstrainedBox(
    constraints: const BoxConstraints(
      maxWidth: 300,
    ),
    child: Stack(children: [
      Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const [Text("Flutter"), Text('1111111111111')]),
      const Positioned(
          top: 0, right: 0, child: Icon(Icons.person, size: 16))
    ])),

This can cause problem for you if the bottom text occupies less space then the Flutter text. If this can happen, you can add another constraint to BoxConstraints:

minWidth: 100,