Carousel slider with data retrieved from firebase realtime database - flutter

Question

What I would like is to retrieve the data from a Firebase Realtime Database query instead of the List I created manually.
Here I am using a flutter package which is CarouselSlider and I am retrieving the data from a list written manually by myself while what I would like is to retrieve the content of my slider from a query.
Thanks for your help.
Here is my complete code:
import 'package:carousel_slider/carousel_slider.dart';
import 'package:firebase_database/firebase_database.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flyzik/size_config.dart';
class SliderWidget extends StatefulWidget {
#override
State<SliderWidget> createState() => _SliderWidgetState();
}
final List<String> imgList = [
'https://firebasestorage.googleapis.com/v0/b/zfly2020-151d6.appspot.com/o/images_slide%2F3b1ab9f0-671a-11eb-bbaf-6ef0e5b93f8c.jpeg?alt=media&token=2b10908d-edb5-4527-9130-a5e076972e88',
'https://firebasestorage.googleapis.com/v0/b/zfly2020-151d6.appspot.com/o/images_slide%2FCopie%20de%20Red%20and%20black%20Black%20Friday%20sale%20Twitter%20post%20-%20Fait%20avec%20PosterMyWall.jpg?alt=media&token=2c39e317-859c-4560-963a-8374fe34fbcc',
'https://firebasestorage.googleapis.com/v0/b/zfly2020-151d6.appspot.com/o/images_slide%2F6169541506df6_61695418e5c29.jpg?alt=media&token=4c250834-d4f9-4946-93d6-c4bba58766c4',
'https://firebasestorage.googleapis.com/v0/b/zfly2020-151d6.appspot.com/o/images_slide%2F20211211_234252.jpg?alt=media&token=1cb1edcc-bf80-4fbd-a419-2c175e85997f',
'https://firebasestorage.googleapis.com/v0/b/zfly2020-151d6.appspot.com/o/images_slide%2Frap%20(1).jpg?alt=media&token=a2f3996f-b2d9-4cfd-81d2-1fe5c0becb6a'
];
class _SliderWidgetState extends State<SliderWidget> {
#override
Widget build(BuildContext context) {
return Container(
child: CarouselSlider(
options: CarouselOptions(
autoPlay: true,
aspectRatio: 2.0,
enlargeCenterPage: true,
enlargeStrategy: CenterPageEnlargeStrategy.height,
),
items: imageSliders,
),
);
}
final List<Widget> imageSliders = imgList
.map((item) => Container(
child: Container(
margin: EdgeInsets.all(5.0),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(5.0)),
child: Center(
child: Image.network(
item,
fit: BoxFit.cover,
width: 1500.0,
height: getProportionateScreenHeight(300),
),
)),
),
))
.toList();
}
thank
This the result of all modification
First part
Second part
My database

Answer 1

You can fetch content with a method and use FutureBuilder to fetch it for you automatically.
Future<DataSnapshot> fetchList() async {
const path = 'SET YOUR PATH HERE';
return await FirebaseDatabase.instance.ref(path).get();
}
Wrap your Widget with FutureBuilder
#override
Widget build(BuildContext context) {
return FutureBuilder<DataSnapshot>(
future: fetchList(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const CircularProgressIndicator();
}
if (snapshot.hasData && snapshot.data != null) {
final imgList = List<String>.from(snapshot.data?.value as List);
return Container(
child: CarouselSlider(
options: CarouselOptions(
autoPlay: true,
aspectRatio: 2.0,
enlargeCenterPage: true,
enlargeStrategy: CenterPageEnlargeStrategy.height,
),
items: imageSliders(imgList),
),
);
}
);
return Text('Error');
}
final List<Widget> imageSliders(List<String> imgList) => imgList
.map((item) => Container(
child: Container(
margin: EdgeInsets.all(5.0),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(5.0)),
child: Center(
child: Image.network(
item,
fit: BoxFit.cover,
width: 1500.0,
height: getProportionateScreenHeight(300),
),
)),
),
))
.toList();
}
Use imgList to map your data into Widget