Awesome Flutter Introduction View

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

 

 

 

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.

dependencies:
 flutter:
   sdk: flutter
 cupertino_icons: ^0.1.2
 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.

assets:
   - assets/images/1.jpg
   - assets/images/2.jpg
   - assets/images/3.jpg

Step 4

 

Now, we will add a custom font to make the UI better.

fonts:
   - family: Pacifico
     fonts:
       - 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.

import 'package:flutter/material.dart';
import 'package:intro_views_flutter/Models/page_view_model.dart';
import 'package:intro_views_flutter/intro_views_flutter.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
 final pages = [
   PageViewModel(
     pageColor: const Color.fromRGBO(0, 157, 204, 1), // To Define page background color
     bubble: Icon(Icons.check_circle), // to define page indicator at bottom
     body: Text(
       'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
     ), // compulsory to define body and it will be shown at bottom
     title: Text(
       'Super Sale',
       style: TextStyle(fontSize: 32.0),
     ), // it will be shown at page header
     textStyle: TextStyle(
       fontFamily: 'Pacifico',
       color: Colors.black,
     ), // generic text style define for whole page
     mainImage: Image.asset(
       'assets/images/1.jpg',
       width: 300.0,
       alignment: Alignment.center,
     ), // to define image for the introduction
   ),
   PageViewModel(
     pageColor: const Color.fromRGBO(255, 245, 2, 1),
     bubble: Icon(Icons.check_circle),
     body: Text(
       'There are many variations of passages of Lorem Ipsum available',
     ),
     title: Text(
       'Mega Sale',
       style: TextStyle(fontSize: 32.0),
     ),
     mainImage: Image.asset(
       'assets/images/2.jpg',
       width: 300.0,
       alignment: Alignment.center,
     ),
     textStyle: TextStyle(
       fontFamily: 'Pacifico',
       color: Colors.black,
     ),
   ),
   PageViewModel(
     pageColor: const Color.fromRGBO(0, 54, 128, 1),
     bubble: Icon(Icons.check_circle),
     body: Text(
       'Sed ut perspiciatis unde omnis iste natus error sit voluptatem',
     ),
     title: Text(
       'Super Sale',
       style: TextStyle(fontSize: 32.0),
     ),
     mainImage: Image.asset(
       'assets/images/3.jpg',
       width: 300.0,
       alignment: Alignment.center,
     ),
     textStyle: TextStyle(
       fontFamily: 'Pacifico',
       color: Colors.white,
     ),
   ),
 ];

 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     debugShowCheckedModeBanner: false,
     title: 'Flutter Intro View',
     theme: ThemeData(
       primarySwatch: Colors.blue,
     ),
     home: Builder(
       builder: (context) => IntroViewsFlutter(
         pages,
         skipText: Text('SKIP',style: TextStyle(color: Colors.black),), // Customize skip button
         doneText: Text('GO TO APP',style: TextStyle(color: Colors.white),), // Customize done button
         onTapDoneButton: () {
           Navigator.push(
             context,
             MaterialPageRoute(
               builder: (context) => MyHomePage(),
             ),
           ); // after introduction where to navigate
         },
         pageButtonTextStyles: TextStyle(
           color: Colors.white,
           fontSize: 18.0,
         ),
       ),
     ),
   );
 }
}

class MyHomePage extends StatefulWidget {
 @override
 _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
 int _counter = 0;

 void _incrementCounter() {
   setState(() {
     _counter++;
   });
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text('Home Page'),
     ),
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
           Text(
             'You have pushed the button this many times:',
           ),
           Text(
             '$_counter',
             style: Theme.of(context).textTheme.display4,
           ),
         ],
       ),
     ),
     floatingActionButton: FloatingActionButton(
       onPressed: _incrementCounter,
       tooltip: 'Increment',
       child: Icon(Icons.add),
     ),
   );
 }
}

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

• Image Reference