Berkan
Reputation: 305
Flutter How to get images in Positioned from Firestore?
I already geting background image, title data from Firestore but i couldn't get image in Positioned. This is what i want: 
I already have this final Query query = FirebaseFirestore.instance.collection("1doga");
Getting cards background images like this:
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(9.6),
image: DecorationImage(
fit: BoxFit.cover,
image: CachedNetworkImageProvider(
querySnapshot.docs[index].data()['image'],
maxHeight: 200,
maxWidth: 200),
),
),
Here is the point, i can't add image from Firestore:
Positioned(
bottom: 19.2,
left: 19.2,
child: ClipRRect(
borderRadius: BorderRadius.circular(4.8),
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaY: 19.2, sigmaX: 19.2),
child: Container(
height: 26,
padding: EdgeInsets.only(
left: 0.0, right: 0.0),
alignment: Alignment.centerLeft,
child: Row(
children: <Widget>[
SizedBox(
width: 9.52,
),
SvgPicture.asset(
'assets/svg/icon_location.svg'),
SizedBox(
width: 9.52,
),
SvgPicture.asset(
'assets/svg/icon_location.svg',
height: 50,
),
SizedBox(
width: 9.52,
),
SvgPicture.asset(
'assets/svg/icon_location.svg'),
SizedBox(
width: 9.52,
),
],
),
),
),
),
),
I need to change "SvgPicture.asset( 'assets/svg/icon_location.svg')" this and add images from Firestore but i don't know how.
Full of my codes:
Widget getImage(String urlFirebase, int? size) {
return Column(
children: [
CachedNetworkImage(
height: 40,
width: 40,
fit: BoxFit.cover,
imageUrl: urlFirebase,
placeholder: (context, url) => size != null?
SvgPicture.asset(
'assets/svg/icon_location.svg',
height: 60,
width: 60,
)
: SvgPicture.asset(
'assets/svg/icon_location.svg',
height: 60,
width: 60,
),
errorWidget: (context, url, error) => Center(
child: Image.asset(
'assets/images/img.png',
height: 60,
width: 60,
),
),
),
const SizedBox(width: 9.52),
]
);
}
/// Page Controller
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: IconButton(
onPressed: () {
Navigator.pop(context);
},
icon: const Icon(Icons.arrow_back_ios_new_sharp),
),
title: SizedBox(
width: 170,
child: Image.network(
'https://i.hizliresim.com/sf4kbvu.jpg',
),
),
centerTitle: true,
actions: [
IconButton(
onPressed: () {},
icon: const Icon(Icons.cloud_queue_outlined),
),
],
),
drawer: NavDrawer(),
body: SafeArea(
child: StreamBuilder(
stream: query.snapshots(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const Center(
child: CircularProgressIndicator(),
);
} else if (snapshot.hasError) {
return const Center(
child: Icon(Icons.error),
);
}
final QuerySnapshot<Map<String, dynamic>> querySnapshot =
snapshot.data as QuerySnapshot<Map<String, dynamic>> ;
return ListView(
physics: const BouncingScrollPhysics(),
children: <Widget>[
Container(
margin: const EdgeInsets.only(top: 28.8, bottom: 16.8),
height: 724.8,
child: ListView.builder(
itemCount: querySnapshot.size,
padding: const EdgeInsets.only(left: 28.8, right: 12),
scrollDirection: Axis.vertical,
physics: const BouncingScrollPhysics(),
itemBuilder: (context, index) {
return Container(
height: 214.8,
width: 188.4,
margin: const EdgeInsets.only(right: 16.8, bottom: 50),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(9.6),
image: DecorationImage(
fit: BoxFit.cover,
image: CachedNetworkImageProvider(
querySnapshot.docs[index].data()['image'],
maxHeight: 200,
maxWidth: 200),
),
),
child: Stack(
children: <Widget>[
GestureDetector(
onTap: () => gotoPage(querySnapshot
.docs[index]
.data()['title'])),
/* Navigator.push(
context,
CupertinoPageRoute(
builder: (redContext) => MyApp()));*/
Positioned(
bottom: 19.2,
left: 19.2,
child: ClipRRect(
borderRadius: BorderRadius.circular(4.8),
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaY: 19.2, sigmaX: 19.2),
child: Container(
height: 26,
padding: const EdgeInsets.only(
left: 0.0, right: 0.0),
alignment: Alignment.centerLeft,
child: Row(
children: <Widget>[
getImage(firebaseUrl),
getImage(firebaseUrl, 50),
getImage(firebaseUrl, 50),
],
),
),
),
),
),
Align(
alignment: Alignment.center,
child: Container(
margin: const EdgeInsets.all(20),
child: Text(
querySnapshot.docs[index].data()['tr'],
style: const TextStyle(
fontSize: 35,
color: Colors.white,
fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
),
),
),
],
),
);
},
),
)
],
);
},
),
),
);
}
}
Upvotes: 5
Views: 451
Answers (2)
Alejandro Campos Palacios
Reputation: 473
Using the response of Elvis Salabarria, you can do something like that in your code
Positioned(
bottom: 19.2,
left: 19.2,
child: ClipRRect(
borderRadius: BorderRadius.circular(4.8),
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaY: 19.2, sigmaX: 19.2),
child: Container(
height: 26,
padding: EdgeInsets.only(
left: 0.0, right: 0.0),
alignment: Alignment.centerLeft,
child: Row(
children: <Widget>[
getImage(firebaseUrl),
getImage(firebaseUrl, 50),
getImage(firebaseUrl, 50),
],
),
),
),
),
),
// Method to manage the change
Widget getImage(String urlFirebase, int? size) {
return Column(
children: [
CachedNetworkImage(
height: 40,
width: 40,
fit: BoxFit.cover,
imageUrl: urlFirebase,
placeholder: (context, url) => size != null?
SvgPicture.asset(
'assets/svg/icon_location.svg',
height: size,
)
: SvgPicture.asset(
'assets/svg/icon_location.svg',
)
,
errorWidget: (context, url, error) => Center(
child: Image.asset(
'assets/images/img.png',
height: 60,
width: 60,
),
),
)),
SizedBox(width: 9.52),
]
)
}
Upvotes: 5
Elvis Salabarria Aquino
Reputation: 598
use this plugin to work with images provided by the network cached_network_image: ^3.0.0
https://pub.dev/packages/cached_network_image
CachedNetworkImage(
height: 40,
width: 40,
fit: BoxFit.cover,
imageUrl: imageNetwork,
placeholder: (context, url) =>
CircularProgressIndicator(
valueColor:
AlwaysStoppedAnimation<Color>(Colors.white),
backgroundColor: const Color(0xFF02204c),
),
errorWidget: (context, url, error) => Center(
child: Image.asset(
'assets/images/img.png',
height: 60,
width: 60,
),
),
)),
Upvotes: 4
Related Questions
- How to retreive a image URL from Firebase Storage in Flutter?
- How to fetch image from firestore on flutter?
- How to store image in flutter firestore and display it
- flutter firebase firestore: How to get images stored in array firestore?
- Display images of Firebase Storage with a Firestore query to get image url in Flutter
- how to get image URL form firebase storage to firestore
- Retrieve image from Firestore
- How to display image file in firestore with Flutter
- Flutter Fetch Images from Firebase Storage
- Flutter / FireStore: how to display an image from Firestore in Flutter?