Introduction Screen using introduction_screen package

 In this article we will explore the introduction screen. You might have seen this screen in many applications. Some call this screen a welcome screen, walk through screen, onboarding screen, introduction screen, etc.

            Table of content:

•   Introduction Screen

•   Demo

•   Properties

•   Code implementation

•   Conclusion

Introduction screen: To create an introduction screen in the easiest and fastest way, introduction_screen is the package to go with. You need to add its dependency in your pubspec.yaml file and do pub get.

introduction_screen: ^2.1.0

Link of package:https://pub.dev/packages/introduction_screen

Demo:

Properties: 

• globalBackgroundColor: This property takes color that we want to show in the background. This color will be the same for all screens.

• dotDecorator: Using this property we can decorate our dots. It has few properties to decorate dots and they are:

1. color

2. activeColor

3. activeSize

4. activeShape

5. shape

6. spacing

• pages: This property takes the list of pages that we want to show in our introduction screen. We can create pages using PageViewModel, it has few properties

1. image

2. title

3. body

4. footer

5. decoration

• done: This property takes a widget.For example you can give it a text or an icon.

• onDone: This property takes a void function. The function performs the action that should happen once we are done showing pages, for example you can navigate from introduction screen to home screen.

• showSkipButton: This property takes a boolean value.

• skip: This property takes a widget. For example you can give a text or an icon.

• onSkip: This property takes a void function like onDone property. The function performs the action that should happen if we want to skip, for example it should directly navigate to the last page or navigate to the next screen.

• next: This property takes a widget. For example you can give a text or an icon.

• showNextButton: This property takes a boolean value.

• showDoneButton:This property also takes a boolean value.

• rawPages: This property takes a list of type widget.

To explore more properties you can visit to :https://pub.dev/packages/introduction_screen

Code implementation: 

import 'package:flutter_for_blog/HomeScreen.dart';

import 'package:introduction_screen/introduction_screen.dart';

import 'package:flutter/material.dart';

import 'package:flutter_svg/flutter_svg.dart';

 

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

 

class MyApp extends StatefulWidget {

 @override

 _MyAppState createState() => _MyAppState();

}

 

class _MyAppState extends State<MyApp> {

 //

 @override

 Widget build(BuildContext context) {

   return MaterialApp(debugShowCheckedModeBanner: false, home: IntroPage());

 }

}

 

class IntroPage extends StatelessWidget {

 IntroPage({Key key}) : super(key: key);

 

 @override

 Widget build(BuildContext context) {

   return SafeArea(

     child: IntroductionScreen(

       globalBackgroundColor: Color(0xFFDBEAFE),

       dotsDecorator: DotsDecorator(

         activeShape: RoundedRectangleBorder(

           borderRadius: BorderRadius.circular(10),

         ),

         activeSize: const Size(20.0, 10.0),

       ),

       pages: [

         PageViewModel(

             image: SvgPicture.asset('assets/images/img1.svg'),

             title: 'Celebrate your life with us',

             body:

                 'Get various cool plans and subscriptions starting in just Rs 299',

             footer: Text('@towardsFlutter'),

             decoration: pageDecor),

         PageViewModel(

           image: SvgPicture.asset('assets/images/img2.svg'),

           title: 'Enjoy every moment with us',

           body:

               'Get various cool plans and subscriptions starting in just Rs 259',

           footer: Text('@towardsFlutter'),

           decoration: pageDecor,

         ),

         PageViewModel(

           image: SvgPicture.asset('assets/images/img3.svg'),

           title: 'Shop with us',

           body: 'Get various cool plans starting in just Rs 229',

           footer: Text('@towardsFlutter'),

           decoration: pageDecor,

         ),

       ],

       done: Text(

         'Done',

         style: TextStyle(color: Color(0xFF1E3A8A)),

       ),

       onDone: () => goToHome(context),

       showSkipButton: true,

       skip: Text(

         'Skip',

         style: TextStyle(color: Color(0xFF1E3A8A)),

       ),

       onSkip: () => goToHome(context),

       next: Icon(Icons.arrow_forward_outlined),

       showNextButton: true,

 

     ),

   );

 }

 

 final pageDecor = PageDecoration(

     titleTextStyle: TextStyle(

         color: Colors.black, fontSize: 20, fontWeight: FontWeight.w600),

     bodyTextStyle: TextStyle(color: Color(0xFF262626)),

     contentMargin: EdgeInsets.all(8));

 void goToHome(context) => Navigator.of(context).pushReplacement(

       MaterialPageRoute(builder: (_) => HomeScreen()),

     );

}

 

Conclusion: In this blog I have given you the introduction of the introduction_screen package. You can design and modify this code according to your choice. 

I hope this blog will provide you with sufficient information about this package. If I got something wrong, let me know in the comments, I would like to improve.

Thanks for scrolling down and reading my article.

You can reach me through: https://www.linkedin.com/in/charul-mehta-ba845318b