Flutter Multi Vendor Grocery App - Part 13 | Flutter Image Slider | Flutter Image Carousel Slider

This video is about how to make Flutter Image Carousel Slider or Banner Image Slider to display some special promotions or offers

Buy Source Code until last part of the video : -

[jamdev]

Here is the code for slider .


Package used :carousel_slider: ^2.3.1





class ImageSlider extends StatefulWidget {
@override
_ImageSliderState createState() => _ImageSliderState();
}

class _ImageSliderState extends State<ImageSlider> {

int _index = 0;
int _dataLength=1;

@override
void initState() {
getSliderImageFromDb();
super.initState();
}


Future getSliderImageFromDb() async {
var _fireStore = FirebaseFirestore.instance;
QuerySnapshot snapshot = await
if(mounted){
setState(() {

});
}
return snapshot.docs;
}



@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: Column(
children: [
if(_dataLength!=0)
FutureBuilder(
future: getSliderImageFromDb(),
builder: (_, snapShot) {
return snapShot.data == null ? Center(child: CircularProgressIndicator(), ) : Padding(
padding: const EdgeInsets.only(top: 4),
child: CarouselSlider.builder(
itemCount: snapShot.data.length,
itemBuilder: (context, int index){
DocumentSnapshot sliderImage = snapShot.data[index];
Map getImage = sliderImage.data();
return SizedBox(
width: MediaQuery.of(context).size.width,
child: Image.network(getImage['image'], fit: BoxFit.fill, ));
},
options: CarouselOptions(
viewportFraction: 1,
initialPage: 0,
autoPlay: true,
height: 150,
onPageChanged: (int i, carouselPageChangedReason){
setState(() {
_index=i;
});
}
)),
);
},
),
if(_dataLength!=0)
DotsIndicator(
dotsCount: _dataLength,
position: _index.toDouble(),
decorator: DotsDecorator(
size: const Size.square(5.0),
activeSize: const Size(18.0, 5.0),
activeShape: BorderRadius.circular(5.0)),
activeColor:
),
)
],
),
);
}
}

//restart app

[dineshrukshan]

Those who got item builder... error . use below dependency and code its work.
carousel_slider: ^4.0.0-nullsafety.0

itemBuilder: (BuildContext context, int index, int) { }

[RupeeInvestors]

itemCount: snapShot.data.length,
error - The property 'length' can't be unconditionally accessed because the receiver can be 'null'.
Try making the access conditional (using '?.') or adding a null check to the target ('!').

DocumentSnapshot sliderImage = snapShot.data[index];
error -The method '[]' can't be unconditionally invoked because the receiver can be 'null'.
Try making the call conditional (using '?.') or adding a null check to the target ('!').

Map getImage = sliderImage.data();

error - A value of type 'Object?' can't be assigned to a variable of type 'Map<dynamic, dynamic>'.
Try changing the type of the variable, or casting the right-hand type to 'Map<dynamic, dynamic>'

[shahidurrehman]

if someone have come this error so used
The getter 'length' isn't defined for the type 'Object'.
The operator '[]' isn't defined for the type 'Object'.
solove
builder: (_, AsyncSnapshot snapShot)

[ahadjamal]

The following assertion was thrown building MyAppBar(dirty, dependencies: [_InheritedProviderScope<LocationProvider>], state: _MyAppBarState#72ba6):
A non-null String must be provided to a Text widget.

Failed assertion: line 378 pos 10: 'data != null'


can someone please tell me how to solve this error?

[TushyJM]

is there a way to only call getSliderImageFromDb() when there is a change in the slider collection to reduce the reads in firestore?
'cause user will call this function every time they open the app and it will increase the READS in firestore.