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';
  5. void main() => runApp(MyApp());
  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. ];
  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. }
  102. class MyHomePage extends StatefulWidget {
  103. @override
  104. _MyHomePageState createState() => _MyHomePageState();
  105. }
  107. class _MyHomePageState extends State<MyHomePage> {
  108. int _counter = 0;
  110. void _incrementCounter() {
  111. setState(() {
  112. _counter++;
  113. });
  114. }
  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