IntroductionScreen

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.

Introduction_screen use another package, dots_indicator, that I also created.

Installation

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

dependencies:
  introduction_screen: ^1.0.7

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://domaine.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,
  ),
)

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),
  ),
)

Page with a footer, like a button

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)),
);