animated_onboarding_screen 0.0.1 copy "animated_onboarding_screen: ^0.0.1" to clipboard
animated_onboarding_screen: ^0.0.1 copied to clipboard

animated_onboarding_screen

Animated Onboarding Screen Package #

This package provides a set of widgets to create beautiful and responsive animated onboarding screens for your Flutter applications. It utilizes the powerful lottie library to display engaging animations and allows you to customize various aspects of the onboarding experience.

Features #

  • Easy to use: Define title, subtitle, and animation paths to create onboarding screens.
  • Responsive: adapts to different screen sizes and text scales seamlessly.
  • Customizable: Change fonts, colors, and animation sizes to match your app's design.
  • Two Page Styles: Choose from the standard PageBuider for single animation or UniquePageBuider for displaying two animations side-by-side.
  • Crossplatfrom support (ios / android)

Installation #

To use this package, add animated_onboarding_screen as a dependency in your pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  animated_onboarding_screen: ^1.0.0

Then run flutter pub get to install package

Usage #

  • Import package
import 'package:animated_onboarding_screen/animated_onboarding_screen.dart';
  • Create PageBuider for standard onboarding:
PageBuider(
  animationPath: 'assets/animations/animation_1.json',
  title: 'Welcome to our app!',
  subtitle: 'Get started with a few simple steps.',
),
  • Create UniquePageBuider for dual animation:
UniquePageBuider(
  uniqueAnimationPath: 'assets/animations/animation_1.json',
  uniqueAnimationPath2: 'assets/animations/animation_2.json',
  uniqueTitle: 'Explore different features',
  uniqueSubTitle: 'Discover the power of our app.',
),
  • Customize:
Text(
  title,
  style: GoogleFonts.montserrat(
    fontSize: 20.0,
    fontWeight: FontWeight.bold,
  ),
),
  • Change the animation size by modifying the height and width properties of Lottie.asset.

Example #

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Animated Onboarding Screen Demo'),
        ),
        body: OnboardingScreen(),
      ),
    );
  }
}

class OnboardingScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PageView(
      children: [
        PageBuilder(
          animationPath: 'assets/animations/animation1.json',
          title: 'Welcome to MyApp',
          subtitle: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
        ),
        UniquePageBuilder(
          uniqueAnimationPath: 'assets/animations/animation2.json',
          uniqueAnimationPath2: 'assets/animations/animation3.json',
          uniqueTitle: 'Discover Amazing Features',
          uniqueSubTitle: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
        ),
      ],
    );
  }
}

Screenshots #

App Screenshot App Screenshot

Contributing #

We welcome contributions to this package! Please feel free to fork the repository and submit your pull requests..

Acknowledgements #

🚀 About Me #

Hi I am Soumyajit Mukherjee & I'm a Flutter developer.

4
likes
120
points
38
downloads

Publisher

unverified uploader

Weekly Downloads

animated_onboarding_screen

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

flutter, google_fonts, lottie

More

Packages that depend on animated_onboarding_screen