CODEWITHSUNDEEP
user-interfaceflutterdartuiimageasset
Simran Aswani
Simran Aswani

Reputation: 1316

How do I call a Network Image type in a ListView?

I have a gridView that should display a network Image. All its elements are defined in a List with multiple elements. It calls an AssetImage right now but I want to change it to a network Image. This is the declaration of the elements of the list. I want to change the imagePath but I can't understand the declaration. 

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

It is also defined in a few other places as below which is also something I will have to change. 

 child: Image.asset(category.imagePath)

Upvotes: 0

Views: 1597

Answers (2)

Sagar Acharya
Sagar Acharya

Reputation: 3777

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

just check the example you will get the idea

Upvotes: 1

jamesblasco
jamesblasco

Reputation: 1892

Use image path with an url 

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

and replace Image asset with network one

child: Image.network(category.imagePath)

Upvotes: 1

Related Questions