CODEWITHSUNDEEP
dartflutter
Wazza
Wazza

Reputation: 1885

Container not taking size of BoxDecoration image

I want to add the following container to a ListView, but the container doesn't take the size of the image being adding as decoration. If i add the image as the child of the container it works fine but i want to display text on top of the image as well.

var imageListView = new List<Container>();
var container1 = new Container(
  margin: EdgeInsets.all(8.0),
  alignment: Alignment.bottomLeft,
  child: new Text('Order of The Day',
      style: new TextStyle(
          fontFamily: 'CallingAngelsPersonalUse',
          fontSize: 20.0,
          color: Colors.white
      ),
  ),
  decoration: new BoxDecoration(
    image: new DecorationImage(
      image: new AssetImage('assets/SVSunset.jpg'),
      fit: BoxFit.cover,
    ),
  ),
);

With the container being added to the ListView then displayed like so:

imageListView.add(container1);

new ListView(children: imageListView)

Can anyone see what i am missing?

Upvotes: 5

Views: 25568

Answers (3)

Delicia Fernandes
Delicia Fernandes

Reputation: 619

With flutter version 1.22.1, you can use a scale parameter like so:

Container(
            width: 50.0,
            height: 50.0,
            decoration: BoxDecoration(
              image: DecorationImage(
                scale: 1.5,
                image: AssetImage('flutter_icon.png'),
              ),
              borderRadius: BorderRadius.all(Radius.circular(20.0)),
              color: Colors.white,
            ),
          ),

Upvotes: 2

Amir Hossein Qasemi Moqaddam
Amir Hossein Qasemi Moqaddam

Reputation: 162

Container widget size(it's width and height) is equal to it's child widget. your Text as Container child is not big enough to create a Container which can contain you background image in full size...

you can add width and height to Container like this:

Container(
  width: 55.0
  height: 60.0
  child:...
  ...
)

you can also get the screen width by: MediaQuery.of(context).size.width

Upvotes: 0

Wazza
Wazza

Reputation: 1885

I managed to solve this by putting everything into a stack and positioning the text instead, as follows:

var container1 = new Container(
  margin: EdgeInsets.all(8.0),
  child: new Stack(
    children: <Widget>[
      new Image(image: new AssetImage('assets/SVSunset.jpg')),
      new Positioned(
        left: 8.0,
        bottom: 8.0,
        child: new Text('Order of the day',
          style: new TextStyle(
              fontFamily: 'CallingAngelsPersonalUse',
              fontSize: 30.0,
              color: Colors.white
          ),
        ),
      )
    ],
  ),
);

Upvotes: 8

Related Questions