Blog

You are currently viewing Flutter IntroView Example

Flutter IntroView Example

When the user has just lauched your app, especially if this is the first time, you may want to introduce the user to the features of the app. Or how to use the app, or just post him some welcome messages. There are widgets that you can use for that, instead of building the screens from scratch.

This tutorial will explore how to create awesome introviews using various packages.

To create an introview:

(a). Use IntroViews-Flutter

IntroViews-Flutter is a Flutter package for some material design app intro screens with some cool animations.

Here are it's main features:

  • Easy addition of pages.
  • Circular page reveal.
  • Cool Animations.
  • Animation control, if the user stops sliding in the midway.
  • Skip button, for skipping the app intro.
  • Custom font selection.
  • Material Design.

Here's a sample demo app:

Here's how to use it.

Step 1: Install it

In your pubspec.yaml add declare this package as a dependency:

dependencies:
  intro_views_flutter: '^3.2.0'

You can alternatively reference it directly from git:

dependencies:
  intro_views_flutter:
    git: git://github.com/aagarwal1012/IntroViews-Flutter

Then sync or execute flutter packages get in the terminal.

Step 2: Import it

Import the package in your code:

import 'package:intro_views_flutter/intro_views_flutter.dart';

Step 3: Create PageViewModel

Create a PageViewmodel that will represent a single page with it's contents. This will represent a single slide:

final page = PageViewModel(
    pageColor: const Color(0xFF607D8B),
      iconImageAssetPath: 'assets/taxi-driver.png',
      body: Text(
        'Easy  cab  booking  at  your  doorstep  with  cashless  payment  system',
      ),
      title: Text('Cabs'),
      mainImage: Image.asset(
        'assets/taxi.png',
        height: 285.0,
        width: 285.0,
        alignment: Alignment.center,
      ),
      titleTextStyle: TextStyle(fontFamily: 'MyFont', color: Colors.white),
      bodyTextStyle: TextStyle(fontFamily: 'MyFont', color: Colors.white),
    );

For example here's a single slide;

Step 4: Create IntroView

Now instantiate the IntroViewsFlutter, passing in the page as well as the onTapDoneButton callback, then a boolean to deteremine whether to show the skipbutton as well as page button styles:

final Widget introViews = IntroViewsFlutter(
      page,
      onTapDoneButton: () {
        // Void Callback
      },
      showSkipButton: true,
      pageButtonTextStyles: TextStyle(
          color: Colors.white,
          fontSize: 18.0,
          fontFamily: 'Regular',
        ),
    )

Full Example

Here's a full example of Introviews.

  1. Start by creating a flutter project.
  2. Install the library as has been discussed in this tutorial.
  3. Replace your main.dart with the following code;

main.dart

import 'package:flutter/material.dart';
import 'package:intro_views_flutter/intro_views_flutter.dart';
/// This is the main method of app, from here execution starts.
void main() => runApp(App());
/// App widget class.
class App extends StatelessWidget {
  App({Key? key}) : super(key: key);
  // Making list of pages needed to pass in IntroViewsFlutter constructor.
  final pages = [
    PageViewModel(
      pageColor: const Color(0xFF03A9F4),
      // iconImageAssetPath: 'assets/air-hostess.png',
      bubble: Image.asset('assets/air-hostess.png'),
      body: const Text(
        'Hassle-free  booking  of  flight  tickets  with  full  refund  on  cancellation',
      ),
      title: const Text(
        'Flights',
      ),
      titleTextStyle:
          const TextStyle(fontFamily: 'MyFont', color: Colors.white),
      bodyTextStyle: const TextStyle(fontFamily: 'MyFont', color: Colors.white),
      mainImage: Image.asset(
        'assets/airplane.png',
        height: 285.0,
        width: 285.0,
        alignment: Alignment.center,
      ),
    ),
    PageViewModel(
      pageColor: const Color(0xFF8BC34A),
      iconImageAssetPath: 'assets/waiter.png',
      body: const Text(
        'We  work  for  the  comfort ,  enjoy  your  stay  at  our  beautiful  hotels',
      ),
      title: const Text('Hotels'),
      mainImage: Image.asset(
        'assets/hotel.png',
        height: 285.0,
        width: 285.0,
        alignment: Alignment.center,
      ),
      titleTextStyle:
          const TextStyle(fontFamily: 'MyFont', color: Colors.white),
      bodyTextStyle: const TextStyle(fontFamily: 'MyFont', color: Colors.white),
    ),
    PageViewModel(
      pageBackground: Container(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            stops: [0.0, 1.0],
            begin: FractionalOffset.topCenter,
            end: FractionalOffset.bottomCenter,
            tileMode: TileMode.repeated,
            colors: [
              Colors.orange,
              Colors.pinkAccent,
            ],
          ),
        ),
      ),
      iconImageAssetPath: 'assets/taxi-driver.png',
      body: const Text(
        'Easy  cab  booking  at  your  doorstep  with  cashless  payment  system',
      ),
      title: const Text('Cabs'),
      mainImage: Image.asset(
        'assets/taxi.png',
        height: 285.0,
        width: 285.0,
        alignment: Alignment.center,
      ),
      titleTextStyle:
          const TextStyle(fontFamily: 'MyFont', color: Colors.white),
      bodyTextStyle: const TextStyle(fontFamily: 'MyFont', color: Colors.white),
    ),
  ];
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'IntroViews Flutter',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Builder(
        builder: (context) => IntroViewsFlutter(
          pages,
          showNextButton: true,
          showBackButton: true,
          onTapDoneButton: () {
            // Use Navigator.pushReplacement if you want to dispose the latest route
            // so the user will not be able to slide back to the Intro Views.
            Navigator.push(
              context,
              MaterialPageRoute(builder: (_) => HomePage()),
            );
          },
          pageButtonTextStyles: const TextStyle(
            color: Colors.white,
            fontSize: 18.0,
          ),
        ),
      ),
    );
  }
}
/// Home Page of our example app.
class HomePage extends StatelessWidget {
  // ignore: prefer_const_constructors_in_immutables
  HomePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home'),
      ),
      body: const Center(
        child: Text('This is the home page of the app'),
      ),
    );
  }
}

Then run the project.

Reference

Find reference links below:

Number Link
1. Download example
2. Read more
3. Follow package author

Leave a Reply