I am new to Flutter and I am trying to make a wallpaper app where I use Firebase to store my images. The app retrieves images from Firebase and the user can share and download the images to the device. I'm using image_gallery_saver package but I wasn't able to get the url of the images so I can add it to the image_gallery_saver function, is there a simple way to get the url of an image from firebase after the user clicks on a specific image?
The following is the home page:
import 'package:cardstest2/Screens/ImageScreen.dart';
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'dart:async';
class FirestoreListViewPage extends StatefulWidget {
@override
_FirestoreListViewPageState createState() => _FirestoreListViewPageState();
}
class _FirestoreListViewPageState extends State<FirestoreListViewPage> {
Future _data;
Future getPosts() async {
var firestore = Firestore.instance;
QuerySnapshot qn = await firestore.collection("gallery").getDocuments();
return qn.documents;
}
@override
void initState() {
super.initState();
_data = getPosts();
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: Text('Subcategories'),
),
body: Container(
child: FutureBuilder(
future: _data,
builder: (_, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(
child: Text('Waiting...'),
);
} else {
return ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (_, index){
return Card(
child: ListTile(
title: Image.network(snapshot.data[index].data['GalleryUrl']),
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => imageScreenPage(snapshot.data[index].data['GalleryUrl']),
),
);
},
),
);
});
}
}),
),
);
}
}
The following is the imageScreen page:
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:share/share.dart';
import 'package:dio/dio.dart';
import 'package:image_gallery_saver/image_gallery_saver.dart';
import 'dart:ui';
class imageScreenPage extends StatefulWidget {
String cardPath;
imageScreenPage(this.cardPath);
@override
_imageScreenPageState createState() => _imageScreenPageState();
}
class _imageScreenPageState extends State<imageScreenPage> {
final LinearGradient backgroundGradient = new LinearGradient(
colors: [new Color(0x10000000), new Color(0x30000000)],
begin: Alignment.topLeft,
end: Alignment.bottomRight);
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new SizedBox.expand(
child: new Container(
decoration: new BoxDecoration(gradient: backgroundGradient),
child: new Stack(
children: <Widget>[
new Align(
alignment: Alignment.center,
child: new Hero(
tag: widget.cardPath,
child: new Image.network(widget.cardPath),
),
),
new Align(
alignment: Alignment.topCenter,
child: new Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new AppBar(
elevation: 0.0,
backgroundColor: Colors.transparent,
leading: new IconButton(
icon: new Icon(
Icons.close,
color: Colors.black,
),
onPressed: () => Navigator.of(context).pop()),
)
],
),
),
],
),
),
),
persistentFooterButtons: <Widget>[
IconButton(
icon: Icon(Icons.wallpaper), onPressed: () {},
),
IconButton(
icon: Icon(Icons.file_download), onPressed: () {_save();},
),
IconButton(
icon: Icon(Icons.share), onPressed: () {Share.share(widget.cardPath);},
),
],
);
}
_save() async {
var response = await Dio().get("<insert url>", options: Options(responseType: ResponseType.bytes));
final result = await ImageGallerySaver.saveImage(Uint8List.fromList(response.data));
print(result);
}
}
To get the downloadUrl
, then do the following:
StorageTaskSnapshot snapshot = await storage
.ref()
.child("images/$imageName")
.putFile(file)
.onComplete;
if (snapshot.error == null) {
final String downloadUrl =
await snapshot.ref.getDownloadURL();
}
use putFile
to add the file to Firebase Storage, then you can use snapshot.ref.getDownloadURL()
to get the url.
User contributions licensed under CC BY-SA 3.0