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.

Answer 1

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.

Answer 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)


                      )

            ],
          ),
        ),