Question 79366 in Flutter Question posted in
The official Flutter documentation can be found here.

How can I fit an image inside a square shape in Flutter?

enter image description here

 return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Card(
              clipBehavior: Clip.antiAliasWithSaveLayer,
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20)),
              child: Container(
                height: 200,
                width: 200,
                decoration: BoxDecoration(
                    image: DecorationImage(
                        image: AssetImage(
                          'assets/images/homepage.jpg',
                        ),
                        alignment: FractionalOffset.topLeft,
                        fit: BoxFit.contain)),
              ),
            ),
          ],
        ),
      ),
    );

There is another part of the image above that remains below. I want to fit the whole photo into a container with a height and width of 200.

Tags:

2

Answers


  1. 0

    See if this is what you wanted:

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Card(
              clipBehavior: Clip.antiAliasWithSaveLayer,
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20)),
              child: Container(
                height: 200,
                width: 200,
                decoration: BoxDecoration(),
                child: FittedBox(
                  child: Image.asset('assets/timepass.jpg'),
                  fit: BoxFit.fill,
                ),
              ),
            ),
          ],
        ),
      ),
    );
    Login or Signup to reply.
  2. 0 
    Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(20),
    color: Colors.blue,
  ),
  child: ClipRRect(
    clipBehavior: Clip.antiAliasWithSaveLayer,
    borderRadius: BorderRadius.circular(20),
    child: SizedBox(
      height: 200,
      width: 200,
      child: FittedBox(
        child: Image.network(
         'https://cdn.shopify.com/s/files/1/0561/0900/7035/products/kiss-cut-stickers-5.5x5.5-default-606a33ae77a7e_grande.jpg?v=1617572787',),
        fit: BoxFit.fill,
      ),
    ),
  ),
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search