CODEWITHSUNDEEP
dartflutter
MahHassan
MahHassan

Reputation: 53

How can i fit an image as background image for a container widget?

I am trying to create a category card, and set an image as background for the child container widget but image does not displayed on the container 

Container job1category(String imgpath, String name, String nikename) {
return Container(
width: 170,    
child: Card(
  child: Wrap(
    children: <Widget>[
      Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage(imgpath),
            fit: BoxFit.cover
          )
        ),
        child: null
      ),
      ListTile(
        title: Text(name),
        subtitle: Text(nikename),
      ),
    ],
  ),
),
);
}

Upvotes: 1

Views: 349

Answers (3)

shorol
shorol

Reputation: 990

Your Container have no height assigned as you have put your image to a container so you have to give a specific height to your container. I've modified your code: 

Container(

child: Card(
  child: Wrap(
    children: <Widget>[
      Container(
        height:300,
        decoration: BoxDecoration(
          image: DecorationImage(
            image: NetworkImage("https://upload.wikimedia.org/wikipedia/commons/1/17/Google-flutter-logo.png"),
            fit: BoxFit.cover
          )
        ),
        child: null
      ),
      ListTile(
        title: Text("Flutter"),
        subtitle: Text("Image of flutter"),
      ),
    ],
  ),
),
);

To full background change: Set your text as child of the container.

Container(

child: Card(
  child: Wrap(
    children: <Widget>[
      Container(
        height:300,
        decoration: BoxDecoration(
          image: DecorationImage(
            image: NetworkImage("https://upload.wikimedia.org/wikipedia/commons/1/17/Google-flutter-logo.png"),
            fit: BoxFit.cover
          )
        ),
        child: ListTile(
        title: Text("Flutter"),
        subtitle: Text("Image of flutter"),
      ),
      ),

    ],
  ),
),
);

Upvotes: 0

Hosar
Hosar

Reputation: 5292

You can just simple add an image as a child and set property fill.

Container(child:Image.network('https://thenypost.files.wordpress.com/2014/01/dogs1.jpg',fit:fil),)

You can even set the with and height of the container. Hope this helps.

Upvotes: 0

user11029823
user11029823

Reputation:

Please try this,

Container(
      width: double.infinity,
      height: double.infinity,
      decoration: BoxDecoration(
          image: DecorationImage(image: AssetImage('img/bg.jpg'),fit: BoxFit.cover)),
      child: ...,
    )

Upvotes: 1

Related Questions