Awesome Flutter Introduction View

In this article, you will learn how to implement the Introduction View of application in Flutter.

Introduction

 
In this article, we will learn how to implement an awesome introduction view with animation in Flutter. Introduction View is the first impression of the app so it should be the best. Well, let’s make it the best.
 
Output
 
Flutter Awesome Introduction View Flutter Awesome Introduction View
 
Plugin Required
 
intro_views_flutter: ^2.6.0
 

Steps

 
Step 1
 
The first and most basic step is to create a new application in Flutter. If you are a beginner in Flutter, then you can check my blog Create a first app in Flutter. For now, I have created an app named as “flutter_intro_view”.
 
Step 2
 
Now, we will configure intro_views_flutter plugin in pubspec.yaml file.
  1. dependencies:  
  2.  flutter:  
  3.    sdk: flutter  
  4.  cupertino_icons: ^0.1.2  
  5.  intro_views_flutter: ^2.6.0  
Step 3
 
Now, we will add introduction images in the project in assets/images folder and configure them in pubspec.yaml file.
  1. assets:  
  2.    - assets/images/1.jpg  
  3.    - assets/images/2.jpg  
  4.    - assets/images/3.jpg  
Step 4
 
Now, we will add a custom font to make the UI better.
  1. fonts:  
  2.    - family: Pacifico  
  3.      fonts:  
  4.        - asset: fonts/Pacifico-Regular.ttf  
Step 5
 
Now, it’s time to implement an actual Introduction View using flutter_intro_views. Following is the implementation for that. For more understanding, please read comments in code.
  1. import 'package:flutter/material.dart';  
  2. import 'package:intro_views_flutter/Models/page_view_model.dart';  
  3. import 'package:intro_views_flutter/intro_views_flutter.dart';  
  4.    
  5. void main() => runApp(MyApp());  
  6.    
  7. class MyApp extends StatelessWidget {  
  8.  final pages = [  
  9.    PageViewModel(  
  10.      pageColor: const Color.fromRGBO(0, 157, 204, 1), // To Define page background color  
  11.      bubble: Icon(Icons.check_circle), // to define page indicator at bottom  
  12.      body: Text(  
  13.        'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',  
  14.      ), // compulsory to define body and it will be shown at bottom  
  15.      title: Text(  
  16.        'Super Sale',  
  17.        style: TextStyle(fontSize: 32.0),  
  18.      ), // it will be shown at page header  
  19.      textStyle: TextStyle(  
  20.        fontFamily: 'Pacifico',  
  21.        color: Colors.black,  
  22.      ), // generic text style define for whole page  
  23.      mainImage: Image.asset(  
  24.        'assets/images/1.jpg',  
  25.        width: 300.0,  
  26.        alignment: Alignment.center,  
  27.      ), // to define image for the introduction  
  28.    ),  
  29.    PageViewModel(  
  30.      pageColor: const Color.fromRGBO(255, 245, 2, 1),  
  31.      bubble: Icon(Icons.check_circle),  
  32.      body: Text(  
  33.        'There are many variations of passages of Lorem Ipsum available',  
  34.      ),  
  35.      title: Text(  
  36.        'Mega Sale',  
  37.        style: TextStyle(fontSize: 32.0),  
  38.      ),  
  39.      mainImage: Image.asset(  
  40.        'assets/images/2.jpg',  
  41.        width: 300.0,  
  42.        alignment: Alignment.center,  
  43.      ),  
  44.      textStyle: TextStyle(  
  45.        fontFamily: 'Pacifico',  
  46.        color: Colors.black,  
  47.      ),  
  48.    ),  
  49.    PageViewModel(  
  50.      pageColor: const Color.fromRGBO(0, 54, 128, 1),  
  51.      bubble: Icon(Icons.check_circle),  
  52.      body: Text(  
  53.        'Sed ut perspiciatis unde omnis iste natus error sit voluptatem',  
  54.      ),  
  55.      title: Text(  
  56.        'Super Sale',  
  57.        style: TextStyle(fontSize: 32.0),  
  58.      ),  
  59.      mainImage: Image.asset(  
  60.        'assets/images/3.jpg',  
  61.        width: 300.0,  
  62.        alignment: Alignment.center,  
  63.      ),  
  64.      textStyle: TextStyle(  
  65.        fontFamily: 'Pacifico',  
  66.        color: Colors.white,  
  67.      ),  
  68.    ),  
  69.  ];  
  70.    
  71.  @override  
  72.  Widget build(BuildContext context) {  
  73.    return MaterialApp(  
  74.      debugShowCheckedModeBanner: false,  
  75.      title: 'Flutter Intro View',  
  76.      theme: ThemeData(  
  77.        primarySwatch: Colors.blue,  
  78.      ),  
  79.      home: Builder(  
  80.        builder: (context) => IntroViewsFlutter(  
  81.          pages,  
  82.          skipText: Text('SKIP',style: TextStyle(color: Colors.black),), // Customize skip button  
  83.          doneText: Text('GO TO APP',style: TextStyle(color: Colors.white),), // Customize done button  
  84.          onTapDoneButton: () {  
  85.            Navigator.push(  
  86.              context,  
  87.              MaterialPageRoute(  
  88.                builder: (context) => MyHomePage(),  
  89.              ),  
  90.            ); // after introduction where to navigate  
  91.          },  
  92.          pageButtonTextStyles: TextStyle(  
  93.            color: Colors.white,  
  94.            fontSize: 18.0,  
  95.          ),  
  96.        ),  
  97.      ),  
  98.    );  
  99.  }  
  100. }  
  101.    
  102. class MyHomePage extends StatefulWidget {  
  103.  @override  
  104.  _MyHomePageState createState() => _MyHomePageState();  
  105. }  
  106.    
  107. class _MyHomePageState extends State<MyHomePage> {  
  108.  int _counter = 0;  
  109.    
  110.  void _incrementCounter() {  
  111.    setState(() {  
  112.      _counter++;  
  113.    });  
  114.  }  
  115.    
  116.  @override  
  117.  Widget build(BuildContext context) {  
  118.    return Scaffold(  
  119.      appBar: AppBar(  
  120.        title: Text('Home Page'),  
  121.      ),  
  122.      body: Center(  
  123.        child: Column(  
  124.          mainAxisAlignment: MainAxisAlignment.center,  
  125.          children: <Widget>[  
  126.            Text(  
  127.              'You have pushed the button this many times:',  
  128.            ),  
  129.            Text(  
  130.              '$_counter',  
  131.              style: Theme.of(context).textTheme.display4,  
  132.            ),  
  133.          ],  
  134.        ),  
  135.      ),  
  136.      floatingActionButton: FloatingActionButton(  
  137.        onPressed: _incrementCounter,  
  138.        tooltip: 'Increment',  
  139.        child: Icon(Icons.add),  
  140.      ),  
  141.    );  
  142.  }  
  143. }  
Hooray…. Run the app and test it on an emulator/simulator or device :)))
 

Conclusion

 
We have learned how to implement an awesome introduction view in Flutter.
 
Reference