如何在列表视图中调用网络映像类型?

Question

我有一个网格视图，应该显示网络图像。它的所有元素都在包含多个元素的列表中定义。它现在调用资产图像，但我想将其更改为网络图像。这是清单要素的声明。 我想更改图像路径，但我无法理解声明。

class Category {
Category({
this.title = '',
this.imagePath = '',
this.lessonCount = '',
this.money = 0,
this.rating = 0.0,
});
String title;
String lessonCount;
int money;
double rating;
String imagePath;
static List<Category> offerwallList = <Category>[
Category(
imagePath: 'assets/app/games.png',
title: 'Games',
lessonCount: 'Play Games',
money: 18,
rating: 4.6,
),
];

在其他一些地方也定义了它，如下所示，这也是我必须更改的内容。

child: Image.asset(category.imagePath)

Answer 1

import 'package:flutter/material.dart';
main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
// just pass the String path in Image.network
const List<Choice> choices = const <Choice>[
const Choice(
title: 'Car', networkImage: "https://via.placeholder.com/150"),
const Choice(
title: 'Bicycle', networkImage: "https://via.placeholder.com/150"),
const Choice(
title: 'Boat', networkImage: "https://via.placeholder.com/150"),
const Choice(
title: 'Bus', networkImage: "https://via.placeholder.com/150"),
];
return MaterialApp(
home: SafeArea(
child: Scaffold(
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
child: GridView.count(
crossAxisCount: 2,
children: List.generate(choices.length, (index) {
return Center(
child: Container(
child: ChoiceCard(choice: choices[index])),
);
}))),
),
),
),
);
}
}
class Choice {
const Choice({this.title, this.networkImage});
final String title;
final String networkImage;
}
class ChoiceCard extends StatelessWidget {
const ChoiceCard({Key key, this.choice}) : super(key: key);
final Choice choice;
@override
Widget build(BuildContext context) {
final TextStyle textStyle = Theme.of(context).textTheme.display1;
return Container(
child: Card(
color: Colors.white,
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Image.network(
choice.networkImage,
width: 150,
),
]),
)),
);
}
}

只需检查示例，您就会明白

Answer 2

将图像路径与网址一起使用

Category(
imagePath:  'https://unsplash.com/photos/tpCPd4MbzNU' ,
title: 'Games',
lessonCount: 'Play Games',
money: 18,
rating: 4.6,
),

并将图像资产替换为网络资产

child: Image.network(category.imagePath)