How can I make the image bigger than its container?


tsunami

I have an image grid like this:
grid list

However, the png has a lot of white space around it, so I want to enlarge the image so that the white space is cut out of the container.

How can I do this?

What I currently have:

body: new Container(
          child: GridView.count(
              crossAxisCount: 4,
          children: <Widget>[
          new Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                    image: NetworkImage("https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/132.png"),
                  fit: BoxFit.cover
                )
              )
          ),
            new Container(
                decoration: BoxDecoration(
                    image: DecorationImage(
                        image: NetworkImage("https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/132.png"),
                        fit: BoxFit.cover
                    )
                )
            ),
            new Container(
                decoration: BoxDecoration(
                    image: DecorationImage(
                        image: NetworkImage("https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/132.png"),
                        fit: BoxFit.cover
                    )
                )
            ),
            new Container(
                decoration: BoxDecoration(
                    image: DecorationImage(
                        image: NetworkImage("https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/132.png"),
                        fit: BoxFit.cover
                    )
                )
            ),
            new Container(
                decoration: BoxDecoration(
                    image: DecorationImage(
                        image: NetworkImage("https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/132.png"),
                        fit: BoxFit.cover
                    )
                )
            ),
            new Container(
                decoration: BoxDecoration(
                    image: DecorationImage(
                        image: NetworkImage("https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/132.png"),
                        fit: BoxFit.cover
                    )
                )
            )
          ]),

         )
chunhunghan

You can copy paste run the full code below
you can use Transform.scale, for example with scale 3.0 you can see the image size exceeds the originalConstrainedBox

Transform.scale(
                scale: 3.0,
                child: new Container(
                    decoration: BoxDecoration(
                        image: DecorationImage(
                            image: NetworkImage("https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/132.png"),
                            fit: BoxFit.cover
                        )
                    )
                ),
              ),

working demo

enter image description here

full code

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        child: GridView.count(
            crossAxisCount: 4,
            children: <Widget>[
              Transform.scale(
                scale: 3.0,
                child: new Container(
                    decoration: BoxDecoration(
                        image: DecorationImage(
                            image: NetworkImage("https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/132.png"),
                            fit: BoxFit.cover
                        )
                    )
                ),
              ),
              Transform.scale(
                scale: 2.0,
                child: new Container(
                    decoration: BoxDecoration(
                        image: DecorationImage(
                            image: NetworkImage("https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/132.png"),
                            fit: BoxFit.cover
                        )
                    )
                ),
              ),
              Transform.scale(
                scale: 1.5,
                child: new Container(
                    decoration: BoxDecoration(
                        image: DecorationImage(
                            image: NetworkImage("https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/132.png"),
                            fit: BoxFit.cover
                        )
                    )
                ),
              ),
              Transform.scale(
                scale: 1.0,
                child: new Container(
                    decoration: BoxDecoration(
                        image: DecorationImage(
                            image: NetworkImage("https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/132.png"),
                            fit: BoxFit.cover
                        )
                    )
                ),
              ),
              new Container(
                  decoration: BoxDecoration(
                      image: DecorationImage(
                          image: NetworkImage("https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/132.png"),
                          fit: BoxFit.cover
                      )
                  )
              ),
              new Container(
                  decoration: BoxDecoration(
                      image: DecorationImage(
                          image: NetworkImage("https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/132.png"),
                          fit: BoxFit.cover
                      )
                  )
              )
            ]),

      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Related


How can I make an image 10% bigger than its parent image?

Ricky Levi I have the following StackBlitz <ion-header> <ion-navbar> <ion-title> About </ion-title> </ion-navbar> </ion-header> <style> .allow-overflow { overflow: visible; } .shadow-mdb-card { -webkit-box-shadow: 0 5px 11px 0

How can I make an image 10% bigger than its parent image?

Ricky Levi I have the following StackBlitz <ion-header> <ion-navbar> <ion-title> About </ion-title> </ion-navbar> </ion-header> <style> .allow-overflow { overflow: visible; } .shadow-mdb-card { -webkit-box-shadow: 0 5px 11px 0

The IMG is bigger than the container, how can I center the image?

Julian Camilleri I have an image that is larger than the height of the container and now the overflow is hidden, which is ok because I don't want the image to come out of the container. - The problem is that I want to show at least the center of the image inst

The IMG is bigger than the container, how can I center the image?

Julian Camilleri I have an image that is larger than the height of the container and now the overflow is hidden, which is ok because I don't want the image to come out of the container. - The problem is that I want to show at least the center of the image inst

How can I make the image fill its parent container?

Denise I want my image to fill exactly half of my screen, and in the bottom row I want to add more widgets. I am trying to make the line spaceAround in order to give equal space. When an image widget is added to a row, a small image is displayed. I added a Siz

How can I make the image fill its parent container?

Denise I want my image to fill exactly half of my screen, and in the bottom row I want to add more widgets. I am trying to make the line spaceAround in order to give equal space. When an image widget is added to a row, a small image is displayed. I added a Siz

QTableView is bigger than its container

Rulowic I am working on a Qt application. There I have QMainWindow. Inside I added QTableView. When I run the app, I find that I need to scroll to show the whole table, and it also shows blank space below it. I want the main window to resize horizontally to us

How can I make my image DIV bigger in a scrollable div?

Paula I have a horizontal scrolling one divthat I have squared divs. I need to make these squares divsbigger, but I can't do it. In the example I provide here, there are 3 squared divs. Every time I add a new one, they get smaller. How can I prevent them from

How to make a chart smaller than its container

Mina MRM I am implementing an asp.net core project. I have a pie chart.js. I am using the outlabel plugin to display labels for each part of the pie chart. Now the question is how to make the chart smaller than its container to show all the labels in full. Now

How can I animate a line to make it bigger?

Encoder I just created a blank project in Xcode and added a button. I center it and set its height and width to 60. Here is my code: import UIKit class ViewController: UIViewController { @IBOutlet weak var button: UIButton! var lineView = UI

How can I make a div float to the bottom of its container?

Stephen Martin I used float:right (or left) many times to float the image and inset on top of the container. Recently, I came across a method that required floating a div to the bottom right corner of another div, and wrapping the normal text (text that wraps

How can I make a div fall off its div container?

Daniel So I have three Divs. One container, two inside. What I want to do is paste the footer. HTML: <div class="container"> <div class="one"></div> <div class="two"></div> </div> CSS: .container{ width:500px; height:500px; background:g

How can I make a div float to the bottom of its container?

Stephen Martin I used float:right (or left) many times to float the image and inset on top of the container. Recently, I came across a method that required floating a div to the bottom right corner of another div, and wrapping the normal text (text that wraps

How can I make a div fall off its div container?

Daniel So I have three Divs. One container, two inside. What I want to do is paste the footer. HTML: <div class="container"> <div class="one"></div> <div class="two"></div> </div> CSS: .container{ width:500px; height:500px; background:g