CODEWITHSUNDEEP
imageflutter
Ammy Kang
Ammy Kang

Reputation: 12612

How to show image from network in flutter BoxDecoration?

I want to show an image of the network in BoxDecoration. But its showing error

"The argument type 'image' can't be assigned to the parameter type 'imageProvider'".

Here is the code where I am trying to show an image from the network inside box decoration. Please check and do let me know where I am wrong in this code. 

decoration: new BoxDecoration(
    image: new DecorationImage(image: new Image.network("http://myurl.com/"+productList[index].thumbnail),
    fit: BoxFit.cover)
),

Upvotes: 47

Views: 84651

Answers (7)

Septian Dika
Septian Dika

Reputation: 596

There some option to add Image in BoxDecoration:

A. Use ImageProvider

AssetImage

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage(image_path),
    ),
  ),
),

NetworkImage

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: NetworkImage(image_url),
    ),
  ),
),

FileImage

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: FileImage(File(image_file_path)),
    ),
  ),
),

MemoryImage

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: MemoryImage(image_bytes),
    ),
  ),
),

B. Use Image

Use this solution instead if you want to handle more stuff of the image. Accessing ImageProvider directly has limitations compared to Image because Image has several parameters that you might need for example errorBuilder, colorBlendMode, etc

Image.asset

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: Image.asset(image_path).image, // put the .image in the end
    ),
  ),
),

Image.network

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: Image.network(image_url).image, // put the .image in the end
    ),
  ),
),

Image.file

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: Image.file(File(image_file_path)).image, // put the .image in the end
    ),
  ),
),

Image.memory

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: Image.memory(image_bytes).image, // put the .image in the end
    ),
  ),
),

C. Use CachedNetworkImage

If you use CachedNetworkImage you can use CachedNetworkImageProvider.

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: CachedNetworkImageProvider(image_url),
    ),
  ),
),

Upvotes: 1

krishnaacharyaa
krishnaacharyaa

Reputation: 25140

If you are using decoration for backgroundImage and want to use CachedNetworkImage as backgroundImage.

You have to set background of the Container using Stack,i.e convert this to

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: NetworkImage('backgroundimage.img'), <-- Your Background image
    ),
  ),
 child: [ Your Foreground Widgets ]
)

to

Stack(
      children: [
        CachedNetworkImage(
          imageUrl: image,
          fit: BoxFit.cover,
        ),
       [ Your Foreground Widgets ]
     ]
 );

Upvotes: 3

Paras Sharma
Paras Sharma

Reputation: 208

import 'package:flutter/material.dart';
 
class Example extends StatefulWidget {
  @override
  _ExampleState createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  
  String url = "";          //your url
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        image: new DecorationImage(
          image: new NetworkImage(url),
        fit: BoxFit.cover,
        ),
      ),
    );
  }
}

Upvotes: 2

Muhammad Kashif
Muhammad Kashif

Reputation: 331

if you want to load CachedNetworkImage then use in this way *** https://pub.dev/packages/cached_network_image

CachedNetworkImage(
  imageUrl: "http://via.placeholder.com/200x150",
  imageBuilder: (context, imageProvider) => Container(
    decoration: BoxDecoration(
      image: DecorationImage(
          image: imageProvider,
          fit: BoxFit.cover,
          colorFilter:
              ColorFilter.mode(Colors.red, BlendMode.colorBurn)),
    ),
  ),
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
),

Upvotes: 15

Rithea
Rithea

Reputation: 29

Container(
  decoration:BoxDecoration(
    image: DecorationImage(
      image:FileImage(
        File(your_image_path),
      ),
    ),
  ),
),

Upvotes: 0

Phan Hero
Phan Hero

Reputation: 325

Ammy's answer is right. However I would like to the answer my experience of using BoxDecoration().

To apply background image either from the Internet or from assets in Flutter app, we can use DecorationImage() class in image property of BoxDecoration().

Below is a code snippet, where background image is applied from an image from a URL in the Flutter app:

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: NetworkImage('https://www.exampledomain.com/images/background.jpg'),
      fit: BoxFit.fill,
    ),
  ),

)

So, to apply background image in Container widget, we have to use decoration property. In the decoration property we supply a new BoxDecoration() object and this object should have an image property which points to the image resource URL. In the above snippet, image propery is instantiated a NetworkImage() object which is pointing to an image URL.

Upvotes: 6

Ammy Kang
Ammy Kang

Reputation: 12612

I've resolved the issue, it can be achieved using this code. 

decoration: BoxDecoration(
      image: DecorationImage(image: NetworkImage("urlImage"),
      fit: BoxFit.cover)
    ),

Upvotes: 113

Related Questions