Как мне вызвать тип сетевого изображения в ListView? - PullRequest
Новая
       64

Как мне вызвать тип сетевого изображения в ListView?

0 голосов
/ 11 января 2020

У меня есть gridView, который должен отображать сетевое изображение. Все его элементы определены в списке с несколькими элементами. Он вызывает AssetImage прямо сейчас, но я хочу изменить его на сетевой образ. Это объявление элементов списка. Я хочу изменить imagePath, но не могу понять объявление. 

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)

Ответы [ 2 ]

1 голос
/ 11 января 2020 
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,
                  ),
                ]),
          )),
    );
  }
}

просто посмотрите пример, вы получите идею

1 голос
/ 11 января 2020

Используйте путь к изображению с URL-адресом 

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

и замените ресурс изображения сетевым 

child: Image.network(category.imagePath)
...