CODEWITHSUNDEEP
flutterlayout
user6097845
user6097845

Reputation: 1437

Layout in Flutter: row containing a square and 3 lines of text

I want to create the following layout: enter image description here

It's a Container, containing a Row, children:

  1. a square Container, unknown height or width
  2. a Column, children: 3 Text widgets (width is unknown)

The size of the square Container should be the height of the parent Container (its width = its height). the Column with the 3 Text widgets should expand to the rest of the parent Container.

Is it possible in Flutter? if so, how?

Upvotes: 1

Views: 2165

Answers (4)

user6097845
user6097845

Reputation: 1437

Based on "The Anonymous Koder"'s answer, this is the way to do it:

return IntrinsicHeight(
  child: Row(
    children: [
      AspectRatio(
        aspectRatio: 1.0,
        child: Container(
          decoration: BoxDecoration(
            color: Colors.red,
          ),
        ),
      ),
      Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'line 1 bla bla bla bla bla bla bla bla bla bla bla bla',
              overflow: TextOverflow.ellipsis,
            ),
            Text(
              'line 2 bla bla bla bla bla bla bla bla',
              overflow: TextOverflow.ellipsis,
            ),
            Text(
              'line 3',
              overflow: TextOverflow.ellipsis,
            ),
          ],
        ),
      ),
    ],
  ),
);

Upvotes: 2

The Anonymous Koder
The Anonymous Koder

Reputation: 602

Try creating a custom widget:

class BoxWidget extends StatelessWidget {

  BoxWidget(/*...*/);
  
  Widget build(_) {
    return Row(
      children: [
        AspectRatio(
          aspectRatio: 1,
          child: Container(
            decoration: BoxDecoration(
              color: Colors.red,
            ),
          ),
        ),
        Column(
          children: [
            Text(widget.text1, style: style),
            Text(widget.text2, style: style),
            Text(widget.text3, style: style),
          ],
        ),
      ],
    );
  }
}

Upvotes: 1

Anas
Anas

Reputation: 1073

Yes, It's possible. The trick here is to use LayoutBuilder which returns the size that parents can allow. Here, I used maxHeight as height and as well as the width of Red Square Container and Column takes rest of the width.

Container(
  width: 500, //parent size
  height: 100, //parent size
  child: LayoutBuilder(
    builder: (context, size) {
      return Row(
        children: [
          Container(
            color: Colors.red,
            height: size.maxHeight,
            width: size.maxHeight
          ),
          Expanded(
            child: Column(
              children: [
                Expanded(
                  child: Container(color: Colors.yellow),
                ),
                Expanded(
                  child: Container(color: Colors.blue),
                ),
                Expanded(
                  child: Container(color: Colors.green),
                ),
              ]
            ),
          ),
        ],
      ); 
    }),
  ),

Upvotes: 1

Cindy_dev
Cindy_dev

Reputation: 36

Yes this is possible, first create a container then it’s child should be a row, then the children of the row should be another container which will act as the square, and then the column which will have 3 text widget as its children. Also I will advice you to wrap the container acting as the square and the column in expanded widgets both separately in the expanded widget wrapping the column set the flex to 3 and for the container expanded widget set flex to 2.

Upvotes: 1

Related Questions