CODEWITHSUNDEEP
flutterflutter-layout
androidneil
androidneil

Reputation: 951

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

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
                  ),
                ],
              ),
            ),
          ],
        ),
      ],
    );
  }

Upvotes: 2

Views: 777

Answers (2)

ABV
ABV

Reputation: 895

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

Upvotes: 0

Jahidul Islam
Jahidul Islam

Reputation: 12565

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

Upvotes: 2

Related Questions