How to create carousel slider with firestore image and onclick launch url in flutter? - flutter

Question

I want to create carousel slider in flutter with cloud firestore. I created cloud firestore collection with the name of "slider" and i have two fields one is "image" and another one is "url".
Now i need to stream firestore collection in my carousel slider and when user click image, want to launch url.
My Carousel Slider Code
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
class Dashboard extends StatelessWidget {
#override
Widget build(BuildContext context) {
return ListView(
children: <Widget>[
SizedBox(height: 15.0),
CarouselSlider(
options: CarouselOptions(
height: 400.0,
enlargeCenterPage: true,
autoPlay: true,
aspectRatio: 16 / 9,
autoPlayCurve: Curves.fastOutSlowIn,
enableInfiniteScroll: true,
autoPlayAnimationDuration: Duration(milliseconds: 800),
viewportFraction: 0.8),
items: [
Container(
margin: EdgeInsets.all(5.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
image: DecorationImage(
image: AssetImage('$show Firestore image'),
onPressed: () {
launchURL(
"$ launch firestore url");
}
fit: BoxFit.cover,
),
),
),
],
),
],
);
}
}
Can anyone guide me?

Answer 1

Widget build(BuildContext context) {
var idx = 1;
return Container(
margin: EdgeInsets.only(top: 4.0, bottom: 8.0),
height: getProportionateScreenHeight(150),
width: double.infinity,
decoration: BoxDecoration(
color: Color(0xFF4A3298),
borderRadius: BorderRadius.circular(20),
),
child:StreamBuilder(
stream: FirebaseFirestore.instance.collection(BANNER_URL).snapshots(),
builder: (context, AsyncSnapshot snapshot) {
List list = []..length;
switch (snapshot.connectionState) {
case ConnectionState.none:
return Container(
child: Center(
child: new Text(
'No network. \nPlease, check the connection.')),
);
break;
case ConnectionState.waiting:
return Container(
child: Center(child: new CircularProgressIndicator()),
);
break;
default:
if (snapshot.hasError) {
return Container(
child: Center(
child: Text(snapshot.error.toString()),
),
);
} else if (snapshot.hasData) {
for (int i = 0; i < snapshot.data.size; i++) {
debugPrint("Index is " + idx.toString());
list.add(NetworkImage(
snapshot.data.docs[i].data()['image_url']));
idx++;
}
return ClipRect(
child: Banner(
message: "Publicite aqui",
location: BannerLocation.topEnd,
color: Colors.red,
child: Carousel(
boxFit: BoxFit.cover,
images: list,
autoplay: true,
animationCurve: Curves.fastLinearToSlowEaseIn,
animationDuration: Duration(milliseconds: 2000),
dotSize: 2.0,
dotColor: AppTheme.cuyuyuOrange400,
dotBgColor: AppTheme.cuyuyuTransparent,
indicatorBgPadding: 2.0,
)),
);
}
}
}),
);
}

Answer 2

You can make use of a FutureBuilder to fetch the document snapshot, and on completion, you can store the URLs in a list and use the list for the Carousel
Example code which uses FutureBuilder to fetch a list of urls:
Future getCarouselWidget() async {
var firestore = Firestore.instance;
QuerySnapshot qn = await firestore.collection("carousel").getDocuments();
return qn.documents;
}
Widget build(BuildContext context) {
var idx = 1;
return Container(
child: FutureBuilder(
future: getCarouselWidget(),
builder: (context, AsyncSnapshot snapshot) {
List<NetworkImage> list = new List<NetworkImage>();
if (snapshot.connectionState == ConnectionState.waiting) {
return new CircularProgressIndicator();
} else {
if (snapshot.hasError) {
return new Text("fetch error");
} else {
//Create for loop and store the urls in the list
for(int i = 0; i < snapshot.data[0].data.length; i++ ) {
debugPrint("Index is " + idx.toString());
list.add(NetworkImage(snapshot.data[0].data["img_"+idx.toString()]));
idx++;
}
return new Container(
height: 250.0,
child: new Carousel(
boxFit: BoxFit.cover,
images: list, <== Set the list here
autoplay: true,
dotSize: 4.0,
indicatorBgPadding: 4.0,
animationCurve: Curves.fastOutSlowIn,
animationDuration: Duration(milliseconds: 1000),
));
}
}
}),
);