CODEWITHSUNDEEP
flutterflutter-layout
user11675013
user11675013

Reputation:

How to make the width of a container match its height

I have a Container which has a height based on its parent which is an Expanded with a flex of 2. I need the height and the width to be the same. I don't want to create a fixed width such as width: 100.0. Is it possible to make the width match the height of this Container inside an Expanded?

Upvotes: 2

Views: 63

Answers (2)

CopsOnRoad
CopsOnRoad

Reputation: 267384

For that you'll have to use LayoutBuilder, here is the minimal code:

Column(
  children: <Widget>[
    Expanded(
      flex: 2,
      child: LayoutBuilder(
        builder: (_, constraints) {
          return Container(
            color: Colors.blue,
            width: constraints.maxHeight, // width is made equal to height
          );
        },
      ),
    ),
    Expanded(
      flex: 9,
      child: Container(color: Colors.orange),
    ),
  ],
)

Edit: As @pskink and other mentioned you can also use AspectRatio

AspectRatio(
  aspectRatio: 1,
  child: Container(color: Colors.blue),
)

Upvotes: 3

Arun R. Prajapati
Arun R. Prajapati

Reputation: 2802

Aspect Ratio will work 

AspectRatio(
       aspectRatio: 1,
       child: Container(
         color: Colors.red,
       ),
     )

Upvotes: 0

Related Questions