Hey guys, please how can I align widgets just like it is in this image. I want to align the years to the left and the data numbers to the extreme right. However, I want to align the arrow svg so it rests on the data numbers. If you notice in the image, the arrow images shifts according to how large or small the data numbers is and the year texts in the extreme left remains in one position. So basically the arrow icon is resting on the data numbers to the right and adjusts it self accordingly. How can I do this in flutter

CodePudding user response：

Put them in a Row and use mainAxisAlignment to specify the alignment:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    FirstWidget(),
    SecondWidget(),
  ],
)

CodePudding user response：

You have to use Row widget and inside you have to declare four children widget....

First widget is year text and second icon upper arrow..you can use SizedBox widget to mention distance between these two widgets...

SizedBox(width: 20)

Then third text widget and fourth icon forward.....

You can get the output as per your image...

Better wrap your text widget with container with fixed width to align arrows straight

CodePudding user response：

According to ui, we can say for year we can consume 60% of width and rest 40% is used for icons and number-data.

We can use nested for this. It will be like.

 Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Flexible(
      flex: 6,
      child: Text("Year ${index * 2   index * 13}"),
    ),
    Expanded(
      flex: 4,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Row(
            children: [
              const Icon(Icons.arrow_upward),
              Text("${Random().nextInt(2222 ^ 8)}"),
            ],
          ),
          const Icon(Icons.arrow_forward_ios),
        ],
      ),
    ),
  ],
),

You can handle detraction based on your need