This is a view pager provides carousel effect and dismissal animation when page was removed.

Overview

This is a view pager provides carousel effect and dismissal animation when page was removed.

Features

  • Carousel effect
Horizontal Vertical
  • Dismissal animation
Fade out & slide out Fade out and scale Fade out and circular hide

Web Live demo

This an example app of this plugin of web version.

https://zyzdev.github.io/dismissible_carousel_viewpager

Usage

More detail of usage see /example app.

Base usage:

More detail, please run demo Base Usage at /example app.

DismissibleCarouselViewPager(
  viewportFraction: 0.5,
  besidePageScale: 0.8,
  itemBuilder: (context, index) {
    return Container(
      alignment: Alignment.center,
      color: index.isEven
      ? Colors.blueAccent.withOpacity(0.1)
      : Colors.deepPurpleAccent.withOpacity(0.1),
      child: Text("Item:$index"),
    ); 
  },
  itemCount: 100,
);

Dismissal animation

More detail please run demo Dismissal Usage at /example app.

dismissible_carousel_viewpager provides several kind of animation(fade out, slide out, scale and circular hide) to make dismissal animation.

You can combine then to make your own style of dismissal animation.

Note

The dismissal animation base on AnimatedSwitcher.

Remember add key to the page widget that created by DismissibleCarouselViewPager.itemBuilder.

I recommend using the data that preparing to create page widget to create Key("$data"), ValueKey(data) or ObjectKey(data) for the page widget.

late final List<int> _item = List.generate(1000, (index) => index);

DismissibleCarouselViewPager(
  itemCount: _item.length,
  itemBuilder: (context, index) {
    Object data = _item[index];
    return Container(
      // must add key
      key: Key("$data"),
      //key: ValueKey(data),
      //key: ObjectKey(data),
      alignment: Alignment.center,
      color: Colors.grey.withOpacity(0.1),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
        Expanded(
          child: Container(
            alignment: Alignment.bottomCenter,
            child: Text("Item:$data"),
          ),
        ),
        Expanded(
          child: IconButton(
            icon: const Icon(Icons.delete),
            onPressed: () {
                setState(() {
                  _item.remove(data);
                });
              },
            ),
          ),
        ],
      ),
    );
  },
  dismissalConfig: DismissalConfig(
    dismissalTypes: [
      DismissalType.fadeOut(),
      DismissalType.slideOut(),
    ],
  ),
);
You might also like...

A carousel package in flutter with various configuration options

A carousel package in flutter with various configuration options

Flutter_Carosel A simple Carousel Widget with multiple configuration option. ... dependencies: ... flutter_multi_carousel: ^1.0.0 ... And install it

Oct 2, 2022

Flutter list view - An unofficial list view for flutter

Flutter list view - An unofficial list view for flutter

Flutter List View I don't like official list view. There are some features don't

Dec 15, 2022

Grid-View-App - Grid View App For Flutter

Grid-View-App - Grid View App For Flutter

grid_view_app practice purpose flutter application Getting Started This project

Jun 9, 2022

Swipeable button view - Create Ripple Animated Pages With Swipeable Button View

Swipeable button view - Create Ripple Animated Pages With Swipeable Button View

swipeable_button_view You can create ripple animated pages with swipeable_button

Apr 22, 2022

-UNDER DEVELOPMENT- a project built demonstrating model view view model architecture

mvvm_project A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if

Nov 28, 2022

A Flutter package which provides 360 view of the images with rotation and gesture customisations.

 A Flutter package which provides 360 view of the images with rotation and gesture customisations.

imageview360 A Flutter package which provides 360 view of the images with rotation and gesture customisations. Supported Dart Versions Dart SDK versio

Dec 1, 2022

Flutter plugin to render stacked page view

Stacked Page View! pub.dev/stacked_page_view Hi! This package will create stacked page view in your flutter app. it's as lightweight as it can get ⚡ ⚡

Nov 25, 2022

Login-page-ui - An animated login page, designed with dart

Login-page-ui - An animated login page, designed with dart

Beautiful Login Page UI Design and Animation ScreenShots This is one of my best

Nov 22, 2022

Smooth-Page-Indicator-Example-Flutter - A simple example about smooth page indicator in Flutter

Smooth-Page-Indicator-Example-Flutter - A simple example about smooth page indicator in Flutter

Smooth Page Indicator Example - Flutter Screenshots ⚠️ Essential Packages smooth

Dec 7, 2022
Owner
Zhe-Yi, Zhu
Zhe-Yi, Zhu
📜Infinite View Pager widget for Flutter

infinite_view_pager Flutter infinite view pager widget Installation dependencies: infinite_view_pager: ^1.0.0 Example import 'package:infinite_view_

Andrei Lesnitsky 26 Feb 25, 2022
OnBoarding Animation provides page like animation to the onBoarding screens with the page indicator

OnBoarding Animation OnBoarding Animation provides page like animation to the onBoarding screens with the page indicator. Screenshots and Screen recor

null 13 Oct 12, 2022
The Ken Burns effect is a type of panning and zooming effect used in video production from still imagery.

KenBurns The Ken Burns effect is a type of panning and zooming effect used in video production from still imagery. First add to your dependencies: dep

Favour Olukayode 1 Apr 28, 2022
Fancy list loading effect or The Shimmer Effect in Flutter

Shimmer Effect in Shimmer Effect is really cool placeholder effect that you can show when you are loading data in the form of a list. To do it in flut

Ronak Punase 31 Oct 18, 2022
In this project, we will design a travel app UI with a parallax effect for a unique scroll experience. You will learn how to create your own parallax effect without using external libraries.

Travel App UI In this part, we will design a travel app UI with a parallax effect for a unique scroll experience. You will learn how to create your ow

DebugErrorX 5 Dec 5, 2022
I created a welcome page, login page and signup page using Flutter

welcome_page UI design for welcome page, signUp page & Login page by Joy Obor Getting Started This project is a starting point for a Flutter applicati

spyder 0 Dec 29, 2021
A package provides an easy way to add shimmer effect in Flutter project

flutter_shimmer_widget A package provides an easy way to add shimmer effect in Flutter project Getting Started Animation Example Project There is a ex

Le Anh Tuan 4 Jun 29, 2022
A customizable carousel slider for Flutter. Supports infinite sliding, custom indicators, and custom animations with many pre-built indicators and animations.

Flutter Carousel Slider A customizable carousel slider for flutter Screenshots Installing dependencies: flutter_carousel_slider: ^1.0.8 Demo Demo a

Udara Wanasinghe 23 Nov 6, 2022
A customizable carousel slider widget in Flutter which supports inifinte scrolling, auto scrolling, custom child widget, custom animations and built-in indicators.

flutter_carousel_widget A customizable carousel slider widget in Flutter. Features Infinite Scroll Custom Child Widget Auto Play Horizontal and Vertic

NIKHIL RAJPUT 7 Nov 26, 2022