Search code examples
fluttericonscontainerssizing

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


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.


Solution

  • 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)
    
    
                          )
    
                ],
              ),
            ),