Package detailsv1.0.0

animated_page_reveal

Flutter package to implement an animated page reveal widget.

AndroidiOSWebmacOSWindowsLinux

pub.dev API documentation Source code

30-day downloads: 57
Likes: 47
Pub points: 150

Install package

flutter pub add animated_page_reveal

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A Flutter package that provides an animated page reveal widget, ideal for creating smooth, engaging transitions between pages in onboarding flows or carousels. It enables visually appealing entrance effects with customizable animations, enhancing user experience through dynamic reveals. The package supports multiple platforms including Android, iOS, Web, macOS, Windows, and Linux, ensuring consistent behavior across devices. Designed for simplicity and integration, it fits seamlessly into existing Flutter projects.

Use cases

Onboarding screens
Interactive carousels
Splash screen transitions
User onboarding flows
Animated content sliders

Key features

Smooth page reveal animations
Customizable transition effects
Cross-platform support
Easy integration with Flutter
Configurable animation duration and curve
Reusable widget component

Suitable for

App onboarding designers
UI/UX developers
Interactive app creators
Flutter beginners
Animation-focused projects

Considerations

May impact performance on low-end devices
Requires careful tuning of animation curves
Limited to page-based reveal patterns
Not suitable for complex navigation
Best used with minimal content per page
Depends on Flutter's rendering pipeline

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

Animated Page Reveal

Animated Page Reveal package lets you add an animated page reveal to your Flutter app that dispaly a set of pages with your desired content.

Features

The AnimatedPageReveal widget is built to be a tool you can use to showcase a content in your Flutter app (ex: onBoarding screen). By default the position of content is set to Center and by using the ViewPageModel, you can add as many pages as you like with your desired content.

Animated Pages

By making a drag on the screen (leftToRight or rightToLeft) one page fades out and another comes in with a cool animation. The bottom icons indicate the position of the active page as well as both the seen & unseen pages remaining for the user to interact with.

The package will handle the animation by itself.

animatedPageReveal

Getting started

Add the latest version of package to your pubspec.yaml (and run dart pub get):

dependencies:
  animated_page_reveal: ^1.0.0

Import the package and use it in your Flutter App.

import 'package:animated_page_reveal/animated_page_reveal.dart';

Usage

There are a number of properties that you can modify:

title (Title text of the page)
description (Body text of the page)
color (Color of the page)
imageAssetPath (Image of the page)
iconAssetPath (Page bottom icon indicator)
titleStyle (Title text Style)
descriptionStyle (Body text style)

Example Usage (Complete with all params):

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      child: AnimatedPageReveal(children: [
        PageViewModel(
          title: 'Choose your place',
          description:
              'Pick the right destination according to the season because it is a key factor for a successful trip',
          color: const Color(0xff195932),
          imageAssetPath: 'assets/images/trip.png',
          iconAssetPath: 'assets/images/placeicon.png',
          titleStyle: const TextStyle(
            fontFamily: 'Montserrat',
            fontSize: 18,
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
          descriptionStyle: const TextStyle(
            fontFamily: 'Montserrat',
            fontSize: 14,
            fontWeight: FontWeight.normal,
            color: Colors.white,
          ),
        ),
        PageViewModel(
          title: 'Book your flight',
          description:
              'Found a flight that matches your destination and schedule? \nBook it just a few taps',
          color: const Color(0xff19594E),
          imageAssetPath: 'assets/images/flight.png',
          iconAssetPath: 'assets/images/planicon.png',
          titleStyle: const TextStyle(
            fontFamily: 'Montserrat',
            fontSize: 18,
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
          descriptionStyle: const TextStyle(
            fontFamily: 'Montserrat',
            fontSize: 14,
            fontWeight: FontWeight.normal,
            color: Colors.white,
          ),
        ),
        PageViewModel(
          title: 'Explore the world',
          description:
              'Easily discover new places and share them with your friends. \nMaybe you will plan together your next trip?',
          color: const Color(0xff193A59),
          imageAssetPath: 'assets/images/explore.png',
          iconAssetPath: 'assets/images/searchicon.png',
          titleStyle: const TextStyle(
            fontFamily: 'Montserrat',
            fontSize: 18,
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
          descriptionStyle: const TextStyle(
            fontFamily: 'Montserrat',
            fontSize: 14,
            fontWeight: FontWeight.normal,
            color: Colors.white,
          ),
        ),
      ]),
    );
  }
}

 Here's what it looks like:

https://user-images.githubusercontent.com/68671238/135723767-a464d5e3-2a88-4e10-b64d-af652be273ff.mp4

Next Goals

We are working on some improvements including:

[ ] Change color of the bottom circle icon indicator.
[ ] Add a button to exit to another screen.

Issues & Feedback

Please file an issue! to send feedback or report a bug. Thank you!

Source repository

aliMissaoui/Flutter-Package-Animated-Page-Reveal

Flutter-Package-Animated-Page-Reveal

☆ 4 Stars⑂ 1 Forks

DartSwift

Projects using this package

No data available yet.

Search categories, packages and repositories