I am showing a list of classes using a GridView
return Scaffold(
appBar: AppBar(
title: Text(
allClassHours.isEmpty ? 'No classes to show' :
'${DateFormat('EEEE').format(allClassHours[hourIndex].startTime)} classes (${DateFormat('ha').format(allClassHours[hourIndex].startTime)} to ${DateFormat('ha').format(allClassHours[hourIndex].endTime)})'),
),
body: SwipeDetector(
onSwipeUp: (offset) {
_addSwipe(SwipeDirection.up, allClassHours.length);
},
onSwipeDown: (offset) {
_addSwipe(SwipeDirection.down, allClassHours.length);
},
onSwipeLeft: (offset) {
_addSwipe(SwipeDirection.left, allClassHours.length);
},
onSwipeRight: (offset) {
_addSwipe(SwipeDirection.right, allClassHours.length);
},
child: GridView(
padding: const EdgeInsets.all(24),
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 1,
childAspectRatio: 4 / 1,
crossAxisSpacing: 20,
mainAxisSpacing: 20,
),
children: [
for (final eventClass in eventClassesForTheHour)
EventClassItem(eventClass: eventClass)
],
),
),
I can have anywhere from 1 to 10 hours of classes. The full set is stored in List<allEventClassesForTheDay>
. I want to show one hour at a time, which I have done by filtering for each hour.
final List<EventClass> eventClassesForTheHour = allEventClassesForTheDay
.where((danceClass) =>
(danceClass.classStartDate == allClassHours[hourIndex].startTime))
.toList();
I can swipe left / right and go to the previous / next hour. I have achieved swiping using a SwipeDetector
.
What I would like is dots on the bottom like this:
All solutions I have seen with Pageview
are for static pages, but as stated, I can have anywhere from 1 hour of classes to 10 hours. How do I make this work?