Menu
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,
),
),
),
],
),
);
},
),
)
],
);
},
),
),
);
}
}
545
Go to your project dashboard on Firebase Console, select “Storage” from the left-hand menu then you can see the bucket path as shown in the screenshot below: You don't have to manually add the path to your Flutter code because it will be handled automatically by Firebase packages.
There should be array called contacts and inside that there should be 3 maps according to your data. Then create a list in your screen class. List contacts; Then create a function to retrieve data from firestore.
Make use of getDownloadURL() to get the URL of the image stored in Firebase storage and pass in the image file name. (it's “Flutter. png” in our example.) This is how we read image from Firebase storage and display them in our Flutter Web application.
So, since we are going to use images inside the assets folder and add them to Firebase Storage, therefore first we can create a folder called images under the assets folder and inside the images folder we can add the images: Then to access them inside the Flutter application, we need to declare them inside the pubspec.yaml:
We will also implement a demo of the stack and positioned widget, describes its properties, and how to use them in your flutter applications. So let’s get started. The stack is a widget in Flutter. It contains a list of widgets and places them on top of each other. And it places their children on top of each other like a stack of books.
Then to access them inside the Flutter application, we need to declare them inside the pubspec.yaml: Now, you can access all images inside the assets/images/ in your application. To display those images inside the Flutter application, we can use a gridView widget.
I’ll be using StatefulWidget to load image since I'll be toggling between two images available in my FirebaseStorage bucket. FutureBuilder widget is used to fetch the image from the Storage, and display the image depending on the connectionState and successful image retrieval.
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),
]
)
}
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,
),
),
)),
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
