Question

我想在BoxDecoration中显示来自网络的图片。但它的显示错误＆＃34;参数类型＆＃39;图像＆＃39;无法分配到参数类型＆＃39; imageProvider＆＃39;＆＃34;。这是我的代码。

return new Scaffold(
  body: new Container(
    color: Colors.white30,

    child: new ListView.builder(
        itemCount: productList == null ? 0 : productList.length,
        itemBuilder: (BuildContext context, int index) {

      return new Container(

        margin: const EdgeInsets.only( bottom: 10.0),
        constraints: new BoxConstraints.expand(
          height: 200.0

        ),
        alignment: Alignment.bottomLeft,

        decoration: new BoxDecoration(
          image: new DecorationImage(image: new AssetImage(images[index], ),  << I want to show image here from network

          fit: BoxFit.cover)
        ),
        child:new Container(

          child: new Text(
            productList[index].name,
            style: new TextStyle(color: Colors.white, fontSize: 30.0),
          ),
          color: Colors.black54,
          alignment: new FractionalOffset(0.5, 0.0),
          height: 35.0,
          // margin: const EdgeInsets.symmetric(vertical: 30.0),

        ),
      );
    })
  ),
);

我正在尝试使用此代码显示图像。＆GT;＆GT;＆GT;

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

Answer 1

我已经解决了这个问题，可以使用此代码实现。

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

Answer 2

Ammy的回答是正确的。但是，我想回答我使用BoxDecoration（）的经验。

要从Internet或Flutter应用程序中的资产应用背景图像，我们可以在BoxDecoration（）的image属性中使用DecorationImage（）类。

下面是一个代码段，其中从Flutter应用程序中的URL图像应用背景图像：

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

）

因此，要在Container小部件中应用背景图像，我们必须使用装饰属性。在装饰属性中，我们提供了一个新的BoxDecoration（）对象，并且此对象应具有指向图像资源URL的image属性。在以上代码段中，图像属性被实例化了指向图像URL的NetworkImage（）对象。

Answer 3

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,
        ),
      ),
    );
  }
}

Answer 4

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

Answer 5

如果要加载 CachedNetworkImage 就这样使用 *** 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),
),

如何在颤振的BoxDecoration中显示来自网络的图像？

5 个答案: