Nice and smooth Cards Reel list component respecting standard Flutter Slivers protocol

by Flutter Awesome

Nice and smooth Cards Reel list component respecting standard Flutter Slivers protocol.

Getting started

Simply add as a dependency in pubspec.yaml

dependencies:
  flutter_cards_reel: any

Usage

Cards Reel widget follows common Flutter lists protocol.

  • SliverCardsReel implements all the low-level slivers protocol logic so that it can be combined with anything else inside the CustomScrollView:

  CustomScrollView(
    slivers: [
      SliverList(/* some other sliver */),
      SliverCardsReel(
        itemExtent: 400,
        itemHeaderExtent: 100,
        delegate: SliverChildBuilderDelegate(
          (context, index) {
            return Padding(
              padding: const EdgeInsets.all(10),
              child: SizedBox(
                height: 400,
                child: ColorfulCard(index),
              ),
            );
          },
          childCount: 4,
        ),
      ),
      SliverList(/* some other sliver */),
    ],
  )
  • CardsReelView provides standard API for children and builder options similar to ListView widget:

  CardsReelView.builder(
    itemExtent: 400,
    itemHeaderExtent: 100,
    itemCount: 5,
    itemBuilder: (context, index) {
      return Padding(
        padding: const EdgeInsets.all(10),
        child: SizedBox(
          height: 400,
          child: ColorfulCard(index),
        ),
      );
    },
  )
  • CardsReelPhysics provides simple cards snapping logic and is being used by CardsReelView widget internally

Please follow the /example folder for additional details.

Additional links

GitHub

View Github