How can I make an image fit into available space when too wide?-CodePudding

I have an image asset which is 1250px wide. I want it to fill the given space, but because the image is too large I always get an overflow error. I have tried specifying a width for the image, but of course this is device dependent so is not a solution. How can I make this fit into the given space?

Widget build(BuildContext context) {
    return Stack(
      children: [
        Column(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.only(
                  left: 12.0, top: 5.0, bottom: 16.0, right: 0.0),
              child: Row(
                children: [
                  Image.asset(
                    'assets/images/my_image.png',
                    fit: BoxFit.fitWidth,
                    width: 348, // works on one device but not others
                  ),
                ],
              ),
            ),
          ],
        ),
      ],
    );
  }

CodePudding user response：

You can try with phone-specific dynamic width

Image.asset(
  'assets/images/my_image.png',
  fit: BoxFit.fitWidth,
  width: MediaQuery.of(context).size.width-12,                 
),

CodePudding user response：

If you want to fill width of screen, Please wrap Image.asset with Expanded widget like as below. If it doesn't work, Please share what exactly you want to achieve.

 Expanded(
                        child: Image.asset(
                          'assets/images/my_image.png',
                          fit: BoxFit.fitWidth
                        ),
                      ),