Make widget take available space in Row in Flutter

Question

I know that by using Expanded or Flexible one can get a Widget to take up all remaining available space in the Row. However, I want the Widget to always take the available space in the Row, even when this means taking up less space than its children need.

This is my current layout (simplified for convenience):

Row(
  children: [
    Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          someText,
          maxLines: 1,
          overflow: TextOverflow.fade,
        ),
        Text(
          someOtherText
        ),
      ],
    ), // (1)
    const Spacer(),
    Text(textThatShouldTakePrecedence) // (2)
  ],
)

In this example, I need:

1. That (2) always take up the space that it needs to layout
2. That (1) always take up the remaining space. If this means expanding because the space is big enough to accommodate both widgets, that's awesome. If this means taking up less space than ideal to display the Column's children, so be it.

So far I have not been able to do this, and I've tried a bunch of combinations of Expanded and Flexible with different fits and flexes.

Note for people with an Android background: I'm basically looking for a behavior similar to that of a LinearLayout with children of weights 1 and 0.

Answer 1

how about using Expanded or Flexible

Row(
  children: [
    Flexible(
      flex: 1,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            someText,
            maxLines: 1,
            overflow: TextOverflow.fade,
          ),
          Text(someOtherText),
        ],
      ),
    ), // (1)
    Flexible(
      flex: 0, // This will make this text only take up as much space as it needs
      child:
          Text('text'), // (2)
    )
  ],
);

Answer 2

I am not sure if I have understood your question correctly. But I think you can try:

1. Wrapping the Text(textThatShouldTakePrecedence) in some padding
2. Remove the Spacer Widget
3. Wrap the Column in Expanded.

So the code will look like this:

Row(
 children: [
  Expanded(
    child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text(
        someText,
        maxLines: 1,
        overflow: TextOverflow.fade,
      ),
      Text(
        someOtherText
      ),
    ],
   ),
  ) // (1)
  Padding(
     padding: some padding for spacing.
     child: Text(textThatShouldTakePrecedence)
  ) // (2)
 ],
)