image passing a container

Question

I'm trying to make this in flutter:

And my actual result:

My code is this:

 new Container(
                  height: 150.0,
                  margin: const EdgeInsets.only(top: 16.0, bottom: 8.0),
                  child: new Stack(
                    children: <Widget>[
                      recantoCard,
                      recantoThumbnail,
                    ],
                  ),
                )
final recantoThumbnail = new Container(
  alignment: new FractionalOffset(0.0, 0.5),
  margin: const EdgeInsets.only(left: 5.0, top: 10),
  child: new Image(
    image: new AssetImage("assets/nossos_restaurantes.png"),
    height: 350.0,
  ),
);

final recantoCard = new Container(
  margin: const EdgeInsets.only(left: 0.0, right: 48.0),
  decoration: new BoxDecoration(
    color: Color(getColorHexFromStr("E5E6E8")),
    shape: BoxShape.rectangle,
  ),
  child: new Container(
    margin: const EdgeInsets.only(top: 10.0, left: 170.0),
    constraints: new BoxConstraints.expand(),
    child: new Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        new Text("text",
            style: TextStyle(
                color: Colors.black,
                fontFamily: 'Poppins',
                fontWeight: FontWeight.w600,
                fontSize: 20.0)),
        new Text("texto:",
            style: TextStyle(
                color: Colors.black,
                fontFamily: 'Poppins',
                fontWeight: FontWeight.w500,
                fontSize: 17.0)),
      ],
    ),
  ),
);

The image is an .png file and i need to overpass it into a Container and Stack, but the image always stay into 150 height container. How i can overpass the container with the image?

Answer 1

To make your image overpass the container you have to use Matrix4.translationValues(double x, double y, double z) class.

Use this class to whenever you need to overpass transform: Matrix4.translationValues(0.0, 60, 0.0),

Container(
            height: 150.0,
            color: Colors.red,
              child: Center(
                 child:Container(
                   height: 130.0,
                   width: 130.0,
                    transform: Matrix4.translationValues(0.0, 60, 0.0),

                   child: Image.asset('assets/image.jpg'),
                 )
              ),
          )