Carousel Plus page view flutter

pub.dev

Features

Create 3D style carousel with page view. The widget moves in Z-axis and rotates in X-axis. Giving it a 3D effect.

Getting started

add dependency to your pubspec.yaml file


dependencies:
  carousel_page_view: ^1.0.2

import package in your dart file


import 'package:carousel_page_view/carousel_plus.dart';

Usage

Add CarouselPlus to your widget and pass the list of children that you want to display.


import 'package:carousal_test/generated/assets.dart';
import 'package:carousel_page_view/carousel_plus.dart';
import 'package:flutter/material.dart';

const carouselImages = [
  Assets.sqImages1,
  Assets.sqImages2,
  Assets.sqImages3,
  Assets.sqImages4,
];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: SizedBox(
          width: MediaQuery.of(context).size.width,
          height: 180,
          child: CarouselPlus(
            childSize: 100,
            onCenterItemPressed: (index) {
              print('Center item pressed: $index');
            },
            children: List.generate(carouselImages.length, (index) {
              return Image.asset(
                carouselImages[index],
                fit: BoxFit.cover,
              );
            }),
          ),
        ),
      ),
    );
  }
}

Future roadmap

  • Add more configuration option like rotation, scaling, etc.

Libraries