如何将 Firebase 云数据显示为表格并显示图像？

Question

[![在此处输入图像描述][1]][1] 我需要在这里这样做： [1]：https://i.stack.imgur.com/bNdZ3.png

但我做不到。我尝试了一些东西，但它不起作用。这是我的 main.dart 下面。我创建了用于显示图像的 showImage 方法，我还通过 Image.network(url); 应用了它。代码，但它不起作用，所以我评论了它。

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

您的 url 变量是否显示任何值？ 像这样调用你的 showImage() 方法来加载图像。

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

为了显示图像，您可以使用：https://pub.dev/packages/cached_network_image