CODEWITHSUNDEEP
androidfirebaseflutterfirebase-storage
Stayheuh
Stayheuh

Reputation: 147

How to show image from firebase storage in flutter?

enter image description here

This is my storage. I want the image to shown on my app directly. THE REQUEST REACHES the storage, I checked from the statistics. But cannot take it, also I changed rules to that everyone can download them. But still nothing. I tried solutions from this page: Flutter Load Image from Firebase Storage But they didn't work at all. Maybe I've put the codes in the wrong places, I don't know. How do I do this? Can you please help? Here's my whole code of main.dart:

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++;
    });
  }

  Widget _buildListItem(BuildContext context, DocumentSnapshot document) {
    String mezunD;

 

    if (document.data()['mezunDurumu'] == false) {
      mezunD = "mezun değil";
    }
    if (document.data()['mezunDurumu'] == true) {
      mezunD = "mezun";
    }
    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),
          ),
          //I wanna show image right under these.
        ],
      ),
    );
    return listTile;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Öğrenci Durumu"),
      ),
      body: StreamBuilder(
          stream: FirebaseFirestore.instance.collection('tablo').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]),
            );
          }),
    );
  }
}

Upvotes: 0

Views: 898

Answers (1)

Moo
Moo

Reputation: 725

If you click in the firebase storage on the image then you can see on right side a preview of the image. under this preview is a blue link. if you tap on the blue link you open the image in full-size in the browser with the full image-address including the access-token. copy the full url of this browser window and use it in flutter. for example with:

Image.network(url);

or the package "cached_network_image"

Upvotes: 1

Related Questions