flutter - How to show firebase cloud data as tables and show images?

Question

[![enter image description here][1]][1] I need to do it like this here: [1]: https://i.stack.imgur.com/bNdZ3.png

But I can't do it. I tried some stuff but it doesn't work. Here is my main.dart below. I created the showImage method for showing image, I also applied it by Image.network(url); code but it didn't work,so I commented it.

import 'package:firebase_storage/firebase_storage.dart';
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.red,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  var url;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  void showImage() async {
    final ref = FirebaseStorage.instance.ref().child('erkekyuz');
// no need of the file extension, the name will do fine.
    url = await ref.getDownloadURL();
    print(url);
  }

  Widget _buildListItem(BuildContext context, DocumentSnapshot document) {
    String mezunD;
    if (document.data()['mezunDurumu'] == false) {
      mezunD = "mezun de?il";
    }
    if (document.data()['mezunDurumu'] == true) {
      mezunD = "mezun de?il";
    }
    var listTile = ListTile(
      title: Column(
        children: [
          Expanded(
            child: Text(
              "Ad Soyad:    " + document.data()['adSoyad'],
            ),
          ),
          Expanded(
            child: Text(
              "Ya?:    " + document.data()['yas'].toString(),
            ),
          ),
          Expanded(
            child: Text(
              "Do?um Tarihi:    " + document.data()['dogumTarihi'],
            ),
          ),
          Expanded(
            child: Text("Mezun Durumu:    " + mezunD),
          ),
          //Image.network(url), 
          //this didn't work somehow.
        ],
      ),
    );
    return listTile;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("??renci Durumu"),
      ),
      body: StreamBuilder(
          stream: FirebaseFirestore.instance.collection('tablolar').snapshots(),
          builder: (context, snapshot) {
            if (!snapshot.hasData) return const Text('Loading...');
            return ListView.builder(
              itemExtent: 100.0,
              itemCount: snapshot.data.documents.length,
              itemBuilder: (context, index) =>
                  _buildListItem(context, snapshot.data.documents[index]),
            );
          }),
    );
  }
}

Answer 1

Is your url variable showing any value? Call your showImage() method like this to load image.

@override
    void initState() {
        super.initState();
        showImage();
    }

for showing images you can use :https://pub.dev/packages/cached_network_image