CODEWITHSUNDEEP
flutterflutter-web
Shourya Shikhar
Shourya Shikhar

Reputation: 1524

How do I give a container a preferred height that can later be changed?

This is my Container:

Container(
       height: height - height * 0.4, //this is my preferred height.
       width: width - width * 0.7,
       decoration: decoration,
       child: Padding(
           padding: const EdgeInsets.symmetric(vertical: 25.0),
           child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Image.asset(
                  'assets/opensource.png',
                  scale: 1.35,
                ),
              text('Open Source Software', 20, Color(0xFF02bbe5)),
              text('Contributor since December, 2020', 16,
                   Color(0xFF02bbe5)),
              Padding(
                 padding: const EdgeInsets.symmetric(horizontal: 20.0),
                 child: text(
                    'test',
                     16,
                     Colors.blueGrey),
              ),
           ],
        ),
     ),
),

I need to make the app responsive, for that the Container needs to be elongated when the inner widgets don't fit inside the Container properly.

How do I give a preferred height to this Container but also allow it to resize freely in case of overflow?

Note: This Container is inside a Column itself with SingleChildScrollView as the parent. And I am building a web app.

Edit: I have used MediaQuery for getting width and height.

Upvotes: 1

Views: 117

Answers (2)

Mudassir
Mudassir

Reputation: 806

There are multiple ways to approach this problem. You can wrap you container inside an AspectRatio widget and an Expanded.

AspectRatio(
   aspectRatio: someAspectRatioValue,
   child: Expanded(
       child Container(...)
   )
)

This should expand the items container without loosing shape of the container.

You can also build your whole screen with a LayoutBuilder, though that would require a lot of reworking.

Upvotes: 1

Aloysius Samuel
Aloysius Samuel

Reputation: 1200

If you want to make your application responsive in Flutter then you should Sizer package( Here ). This package will make your app responsive for any screen size, it divides into percentages. For ex:

Container(
  width: 20.w,    //It will take a 20% of screen width
  height:30.h     //It will take a 30% of screen height
)

Upvotes: 0

Related Questions