0

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.

class list for one hour

What I would like is dots on the bottom like this:

enter image description here

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?

Raj More
  • 47,048
  • 33
  • 131
  • 198

0 Answers0