How to display Image in App with flutter and firebase using URL as String in Firestore

Question

we have no clue how to display an image in a flutter app via an URL from Firebase Firestore.

Here is a Picture of our database with three fields one of which is for a picture. In that we placed the URL of the Image we want to display.

We know how to display Text from that database, as you can see in our code. Now we want to simply display an image from the database.

Currently we use Image() with NetworkImage() where we placed a var "imageURL". That works fine.

How can we tell the var "ImageURL" to use the URL out of the database.

Here is our code:

class DataFavorites extends StatefulWidget {
  const DataFavorites({Key? key}) : super(key: key);
  @override
  _DataFavoritesState createState() => _DataFavoritesState();
}

class _DataFavoritesState extends State<DataFavorites> {

  var imageURL = 'https://previews.123rf.com/images/gumbao/gumbao1509/gumbao150900016/44987080-kiefer-firest-auf-la-marina-an-der-k%C3%BCste-des-mittelmeers-costa-blanca-spanien.jpg';

  final Stream<QuerySnapshot> _data = FirebaseFirestore.instance.collection('favoriten').snapshots();

  @override

  Widget build(BuildContext context) {
    return Scaffold(
      body:
    StreamBuilder<QuerySnapshot>(
      stream: _data,
      builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
        if (snapshot.hasError) {
          return Text('Something went wrong');
        }
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Text("Loading");
        }
        return ListView(
          children: snapshot.data!.docs.map((DocumentSnapshot document) {
            Map<String, dynamic> data = document.data()! as Map<String,
                dynamic>;
            return ListTile(
             title: Text(data['Name'],style: Theme.of(context).textTheme.headline1,
                 ),
              subtitle: Image(
                image: NetworkImage(imageURL),
                width: 300,
                height: 300,

              ),
            );
          }).toList(),
        );

      },
    ),
    );
  }
  }

Thanks in advance!

Answer 1

You should give the parameter of image url to the NetworkImage widget

You code should look like this

class DataFavorites extends StatefulWidget {
  const DataFavorites({Key? key}) : super(key: key);
  @override
  _DataFavoritesState createState() => _DataFavoritesState();
}

class _DataFavoritesState extends State<DataFavorites> {

  var imageURL = 'https://previews.123rf.com/images/gumbao/gumbao1509/gumbao150900016/44987080-kiefer-firest-auf-la-marina-an-der-k%C3%BCste-des-mittelmeers-costa-blanca-spanien.jpg';

  final Stream<QuerySnapshot> _data = FirebaseFirestore.instance.collection('favoriten').snapshots();

  @override

  Widget build(BuildContext context) {
    return Scaffold(
      body:
    StreamBuilder<QuerySnapshot>(
      stream: _data,
      builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
        if (snapshot.hasError) {
          return Text('Something went wrong');
        }
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Text("Loading");
        }
        return ListView(
          children: snapshot.data!.docs.map((DocumentSnapshot document) {
            Map<String, dynamic> data = document.data()! as Map<String,
                dynamic>;
            return ListTile(
             title: Text(data['Name'],style: Theme.of(context).textTheme.headline1,
                 ),
              subtitle: Image(
                image: NetworkImage(data['Bild']), // ----------- the line that should change
                width: 300,
                height: 300,

              ),
            );
          }).toList(),
        );

      },
    ),
    );
  }
  }