In flutter, I want the Icon within a container to take up maximum size of the container

Question

Widget build(BuildContext context) {
    return Container(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Flexible(
            flex: 1,
            child: Container(
              color: Colors.blueAccent
            ),
          ),
          Flexible(
            flex: 4,
            child: Container(
              color: Colors.deepOrangeAccent,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                //mainAxisSize: MainAxisSize.max,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  Icon(Icons.image),
                ],
              ),
            ),
          ),
          Flexible(
            flex: 2,
            child: Container(color: Colors.blueGrey),
          ),
        ],
      ),
    );

Screenshot

The Icon is taking its original size only. I want it to fill the container. I have tried LayoutBuilder but the BoxConstraints have infinite height warning comes. Please suggest any other options without using hardcoded sizes for any of the widgets.

When I use FittedBox, child: Column( mainAxisAlignment: MainAxisAlignment.center, //mainAxisSize: MainAxisSize.max, crossAxisAlignment: CrossAxisAlignment.stretch, children: [ FittedBox(child: Icon(Icons.image),fit: BoxFit.contain), ], **The Icon overflowed at the bottom**. — Vinay Kumar, Jun 06 '20 at 12:34
@VinayKumar I think you should use BoxFit.fill instead because BoxFit.contain will keep the proportions and you likely dont want that — Mohammad Assad Arshad, Jun 06 '20 at 12:58
@MohammadAssadArshad FittedBox(child: Icon(Icons.image), fit:BoxFit.fill), didn't work But this worked.. Expanded(child: FittedBox(child: Icon(Icons.image), fit:BoxFit.fill)), — Vinay Kumar, Jun 06 '20 at 13:46

Mohammad Assad Arshad · Accepted Answer · 2020-06-06T12:56:27.037

2

Edit; So after reading your comment here is you should use a FittedBox instead (as suggested in the comments) and BoxFit.Fill property; so:

 <Widget>[ Expanded(child:FittedBox(child: Icon(Icons.image),fit: BoxFit.fill)), ]

--

If you can change your icon to Image then you can use the BoxFit.fill property to stretch the image to fill the entire container (wrap the image in Expanded widget too).

Here is an example with a placeholder:

Flexible(
        flex: 4,
        child: Container(
          color: Colors.deepOrangeAccent,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            //mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Expanded(child:                          Image.network('https://picsum.photos/250?image=9', fit:BoxFit.fill)


                      )

            ],
          ),
        ),

edited Jun 06 '20 at 12:56

answered Jun 06 '20 at 12:12

Mohammad Assad Arshad

1,535
12
14

Thanks, Mohammad for your suggestion. Yes, I am aware the Image can fill the container. But I want to understand the nitty-gritty details of flutter sizing of layouts. So, I would appreciate it if I can get to know how to do it with an Icon that does not by itself have fitting attributes or properties. – Vinay Kumar Jun 06 '20 at 12:38
hey @VinayKumar if you want to understand the nitty-gritty of how flutter widgets work, then take a look at this [article](https://medium.com/flutter-community/flutter-the-advanced-layout-rule-even-beginners-must-know-edc9516d1a2). – hewa jalal Jun 06 '20 at 12:52
Thanks @hiwajalal ! Yes FittedBox inside Expanded works. I'll go through the article as well. – Vinay Kumar Jun 06 '20 at 13:52

score 0 · Answer 2 · answered Jun 06 '20 at 12:58

I would take the LayoutBuilder approach. You mentioned you had infinity warning, which might be because you don't dynamically pick between the height of your parent container or its width.

Depending on the orientation of your device, you might need to pick one or the other. The easiest way to cater for that is to pick the smaller of the two.

Widget build(BuildContext context) {
    return Container(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Flexible(
            flex: 1,
            child: Container(color: Colors.blueAccent),
          ),
          Flexible(
            flex: 4,
            child: Container(
              color: Colors.deepOrangeAccent,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                //mainAxisSize: MainAxisSize.max,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  LayoutBuilder(builder: (context, constraints) {
                    var height = constraints.maxHeight;
                    var width = constraints.maxWidth;

                    return Icon(FontAwesomeIcons.addressBook, size: min(height, width));
                  }),
                ],
              ),
            ),
          ),
          Flexible(
            flex: 2,
            child: Container(color: Colors.blueGrey),
          ),
        ],
      ),
    );
  }
}

Note: you'll need to import the 'dart:math' package to use the min() function.

In flutter, I want the Icon within a container to take up maximum size of the container

2 Answers2