Question 237458 in Flutter Question posted in
The official Flutter documentation can be found here.

Make widget take available space in Row in Flutter

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.

Tags:

2

Answers


  1. 0

    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)
 ],
)
    Login or Signup to reply.
  2. 0

    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)
    )
  ],
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search