Flutter Card Swiper

Introduction of Flutter Card Swiper

The flutter card swiper package in Flutter provides a highly customizable swiper (carousel) widget for displaying a set of cards. It allows users to swipe left and right to navigate through the cards, making it ideal for image carousels, feature highlights, or any scenario where you want to present information in a swipeable card format.

Key Features:

• Swipeable Cards: Users can swipe left and right to navigate through cards.
• Customizable: Offers extensive customization options for card appearance, behavior, and animations.
• Built-in Controls: Supports indicators, next/previous buttons, and autoplay functionality.

Installation:

To use the flutter card swiper package, add it to your pubspec.yaml file:

dependencies:
  flutter_card_swiper: ^7.0.1  # Use the latest version

Run flutter pub get to install the package.

Importing the Package:

import 'package:flutter_card_swiper/flutter_card_swiper.dart';

Properties of Swiper:

itemBuilder: A function that builds the content of each card. It takes the context and index as parameters and returns a widget representing the card.

itemBuilder: (BuildContext context, int index) {
  return CardWidget(index: index);
},

itemCount: The number of cards to be displayed in the swiper.

itemCount: 5,

layout: The layout type of the swiper. Can be SwiperLayout.DEFAULT, SwiperLayout.STACK, SwiperLayout.TINDER, etc.

layout: SwiperLayout.STACK,

pagination: The pagination indicator to show the current position in the swiper.

pagination: SwiperPagination(),

control: The navigation control to navigate through the swiper, typically used for next/previous buttons.

control: SwiperControl(),

autoplay: Enables automatic sliding of cards.

autoplay: true,

autoplayDelay: The delay in milliseconds between automatic slides.

autoplayDelay: 3000,

duration: The duration of the slide transition in milliseconds.

duration: 800,

curve: The curve of the slide animation.

curve: Curves.easeIn,

viewportFraction: The fraction of the viewport that each card should occupy.

viewportFraction: 0.8,

scale: The scaling factor for inactive cards.

scale: 0.9,

Usage:

import 'package:flutter/material.dart';
import 'package:flutter_card_swiper/flutter_card_swiper.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Card Swiper Example'),
        ),
        body: Swiper(
          itemBuilder: (BuildContext context, int index) {
            return CardWidget(index: index);
          },
          itemCount: 5,
          layout: SwiperLayout.STACK,
          pagination: SwiperPagination(),
          control: SwiperControl(),
          autoplay: true,
          autoplayDelay: 3000,
          duration: 800,
          curve: Curves.easeIn,
          viewportFraction: 0.8,
          scale: 0.9,
        ),
      ),
    );
  }
}

class CardWidget extends StatelessWidget {
  final int index;

  CardWidget({required this.index});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.primaries[index % Colors.primaries.length],
        borderRadius: BorderRadius.circular(10.0),
      ),
      margin: EdgeInsets.all(10.0),
      child: Center(
        child: Text(
          'Card $index',
          style: TextStyle(fontSize: 24, color: Colors.white),
        ),
      ),
    );
  }
}

Final Code: This is the final code with the combination of some above Flutter Card Swiper package properties.

import 'package:flutter/material.dart';
import 'package:flutter_card_swiper/flutter_card_swiper.dart';

class Homepage extends StatelessWidget {
  const Homepage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: CardSwiper(
            cardBuilder: (context, index, horizontalOffsetPercentage,
                verticalOffsetPercentage) {
              return CardWidget(index: index);
            },
            cardsCount: 5));
  }
}

class CardWidget extends StatelessWidget {
  final int index;

  const CardWidget({super.key, required this.index});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.primaries[index % Colors.primaries.length],
        borderRadius: BorderRadius.circular(10.0),
      ),
      margin: EdgeInsets.all(10.0),
      child: Center(
        child: Text(
          'Card $index',
          style: const TextStyle(fontSize: 24, color: Colors.white),
        ),
      ),
    );
  }
}

In this example, the Swiper widget is used to create a stack layout of swipeable cards. The itemBuilder property defines how each card is built. Properties like itemCount, layout, pagination, control, autoplay, autoplayDelay, duration, curve, viewportFraction, and scale are used to customize the swiper’s behavior and appearance. This setup creates an interactive and visually appealing card swiper with automatic sliding and pagination controls.

Thank for visiting Hybrid App Development
Posted by Hussam HM