animated_walkthrough 0.0.1+1

animated_walkthrough #

animated_walkthrough pub package

Introduction screen allow you to have a screen at launcher for example, where you can explain your app. This Widget is customizable (more in the future) with a great design.

Screenshots #

DemoPage 1 DemoPage 2 DemoPage 3

Installation #

You just need to add animated_walkthrough as a dependency in your pubspec.yaml file.

dependencies:
  animated_walkthrough: ^0.0.1

Example #

In these example, listPagesViewModel is the list of pages. A page is base on PageViewModel. See example of a PageViewModel below.

PageViewModel #

Simple page #

This example only define title, body and an image (you can define any widget)

PageViewModel(
  title: "Title of first page",
  body: "Here you can write the description of the page, to explain someting...",
  image: Center(
    child: Image.network("https://example.com/image.png", height: 175.0),
  ),
)

Page with custom colors #

This example show you how to define the color of the page

PageViewModel(
  title: "Title of first page",
  body: "Here you can write the description of the page, to explain someting...",
  image: Center(child: Image.asset("res/images/logo.png", height: 175.0)),
  decoration: const PageDecoration(
    pageColor: Colors.blue,
    pageBackgroudColor: Colors.white,
  ),
)

Page with custom text style #

This example show you how to define another TextStyle for the title and the body

PageViewModel(
  title: "Title of first page",
  body: "Here you can write the description of the page, to explain someting...",
  image: const Center(child: Icon(Icons.android)),
  decoration: const PageDecoration(
    titleTextStyle: TextStyle(color: Colors.orange),
    bodyTextStyle: TextStyle(fontWeight: FontWeight.w700, fontSize: 20.0),
  ),
)

This example show you how to define a page with a footer, like a Button

PageViewModel(
  title: "Title of first page",
  body: "Here you can write the description of the page, to explain someting...",
  image: const Center(child: Icon(Icons.android)),
  footer: RaisedButton(
    onPressed: () {
      // On button presed
    },
    child: const Text("Let's Go !"),
  ),
);

Page with widget body #

This example show you how to define a page with a body as Widget and not a simple String You can to the same this for title, with titleWidget parameter.

PageViewModel(
  title: "Title of first page",
  bodyWidget: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: const [
      Text("Click on "),
      Icon(Icons.edit),
      Text(" to edit a post"),
    ],
  ),
  image: const Center(child: Icon(Icons.android)),
);

IntroductionScreen #

Note :

If you not provide next parameter, the Next button will be not displayed. If you want to display a skip button, you must add skip parameter and showSkipButton: true.

The done parameter is required.

Simple intro screen #

Simple intro screen

IntroductionScreen(
  pages: listPagesViewModel,
  done: const Text("Done", style: TextStyle(fontWeight: FontWeight.w600))
  onDone: () {
    // When done button is press
  },
); //Material App

Intro screen with skip button #

IntroductionScreen(
  pages: listPagesViewModel,
  onDone: () {
    // When done button is press
  },
  showSkipButton: true,
  skip: const Text("Skip"),
  done: const Text("Done", style: TextStyle(fontWeight: FontWeight.w600)),
);

Intro screen with custom button text and dots indicators #

IntroductionScreen(
  pages: listPagesViewModel,
  onDone: () {
    // When done button is press
  },
  onSkip: () {
    // You can also override onSkip callback
  },
  showSkipButton: true,
  skip: const Icon(Icons.skip_next),
  next: const Icon(Icons.next),
  done: const Text("Done", style: TextStyle(fontWeight: FontWeight.w600)),
  dotsDecorator: DotsDecorator(
    size: const Size.square(10.0),
    activeSize: const Size(20.0, 10.0),
    activeColor: theme.accentColor,
    color: Colors.black26,
    spacing: const EdgeInsets.symmetric(horizontal: 3.0),
    activeShape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(25.0)
    )
  ),
);

Others parameters #

There is other possibles parameters that you can add :

  • Freeze the scroll, by adding freeze: true parameter.
  • Hide dots indicators, by adding isProgress: false parameter.
  • Duration of scrolling animation, by adding animationDuration: 400 parameter.
  • Global background color, by adding globalBackgroundColor: Colors.blue parameter.
  • Initial page, by adding initialPage: 1 parameter.
  • Hide next button, by adding showNextButton: false parameter.
  • Skip button flex, by adding skipFlex: 1 parameter. (Set 0 to disable Expanded behaviour)
  • Next/Done button flex, by adding nextFlex: 1 parameter. (Set 0 to disable Expanded behaviour)
  • Animation type between pages, by adding curve parameter.

Changelog #

[0.0.1+1] - Release

  • Bug Fix and Minor Changes

[0.0.1] - Release

  • A customizable animated walkthrough library written in dart.

example/README.md

example #

A new Flutter project.

Getting Started #

For help getting started with Flutter, view our online documentation.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  animated_walkthrough: ^0.0.1+1

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:animated_walkthrough/animated_walkthrough.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
38
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
90
Overall:
Weighted score of the above. [more]
67
Learn more about scoring.

We analyzed this package on Feb 12, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.5
  • Flutter: 1.12.13+hotfix.7

Health suggestions

Format lib/animated_walkthrough.dart.

Run flutter format to format lib/animated_walkthrough.dart.

Format lib/src/animated_walkthrough.dart.

Run flutter format to format lib/src/animated_walkthrough.dart.

Format lib/src/ui/intro_page.dart.

Run flutter format to format lib/src/ui/intro_page.dart.

Maintenance suggestions

Package is pre-v0.1 release. (-10 points)

While nothing is inherently wrong with versions of 0.0.*, it might mean that the author is still experimenting with the general direction of the API.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.2.2 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test