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

Flutter – Expanded Height of a Container in a Row to 100%

I have Row Widget in the Flutter:

Row(
  children: [
    Text(description),
    Container(width: 5.0, color: Colors.orange,),
  ]
);

I want the Container to get expanded to a maximum height.

I cannot use CrossAxisAlignment.stretch, because I am not using a fixed height for Row (Reason is text can be one line, or it can take upto 10 lines). I don’t want to use IntrinsicHeight because it causes performance issues.

Tags:

4

Answers


  1. 0

    Container is already an expanded widget if you are using it without using "height" property of it. it will automatically adjust the height according to content of it’s child. or Just wrap the container with flexible, or use this package from pub.dev readmore I answered this but I think you were asking something different you can do a comment I’ll come to you

    Login or Signup to reply.
  2. 0 
      Row(
  children: [
    Text(description),
    Expanded(
      child: Container(
        color: Colors.orange,
      ),
    ),
  ],
);

    By wrapping the Container with Expanded, it will expand to fill the available space within the Row. This approach ensures that the Container expands vertically to the maximum height without explicitly setting a fixed height or using CrossAxisAlignment.stretch or IntrinsicHeight.

    Login or Signup to reply.
  3. 0

    If you want the Container to expand to the maximum height available within the Row without setting a fixed height for the Row, you can achieve this by wrapping it with an Expanded widget .

    
    Row(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Expanded(
            child: Text(
              'text',
            ),
          ),
          Expanded(
            
            child: Container(
              width: 5.0,
              color: Colors.orange,
            ),
          ),
        ],
      );
    Login or Signup to reply.
  4. 0

    Wrap the Container widget with Expanded in order for the widget to take up all the remaining space.

    Row(
    children: [
       Text(description),
       Expanded(
         child: Container(
                  width: 5.0, 
                  color: Colors.orange,
         ),
       ),
  ],
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search