ProgrammingTech Assist

How To Create An Onboarding Screen In Flutter Apps

Creating an Onboarding Screen in flutter can be somehow complex, but we would make sure you understand how to build an onboarding screen in this post. So, You want to tell your first-time users about your app, or you want to show a particular feature to them? Using is an onboarding splash screen is an amazing way to show your users some intro before going into the main app. Sometimes, this can give them a better understanding of the app on what it’s all about, or even a guide on how to use the app. You can see what the Material Design Guide say about onboarding HERE.

In most circumstance, you want to tell your users about your app, or maybe allow them to read through a particular guide or process as they launch the app for the first time, or anytime. This can help your users to know how to use your app, navigate through the app with less confusion, and give them a better understanding. We’ll be talking about how you build an OnBoarding Screen in Flutter in a short period of time. You don’t need the 100+ line of codes to do that.

You need to understand Flutter & Dart to an extent for you to be able to understand this tutorial properly. It’s one of the best ways for you start implementing Onboarding screen to your flutter apps, as it is more efficient. You would also need the VS Code, or Android studio to start.

Create A New Project

Firstly, As usual – Create a new project on your IDE, and get ready to work. You canm also create a new project via your terminal below in VS Code. Then, move to the pubspec.yaml file and add the following package below your dependencies the same way it is shown below;

Get Your transformer_page_view Flutter Package

Visit pub.dev to get these packages.

  • Transformer Page View

Install the Packages in Pubspec.yaml

Go to your pubspec.yaml file in your project and add the linkable and url_launcher package below your dependency, the same way it is shown below.

dependencies:
      flutter:
        sdk: flutter
      transformer_page_view: ...

The package we just added would help us to build a flexible and better. This will allow us to simply specify a transformer to TransformerPageView, which is a subclass of PageTransformer. This package would allow us to create the kind of effect you see below;

Like every other Flutter developer do, Don’t forget to run the PACKAGE GET in your IDE.

Apply Your Code & Create Your OnBoard Page

Now, going back to your main.dart, Use the follow code and edit it to the way you want it to be.

 import 'package:flutter/material.dart';
 import 'package:transformer_page_view/transformer_page_view.dart';

    void main() => runApp(MyApp());
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'Onboarding App Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: MyHomePage(title: 'Onboarding Homepage'),
        );
      }
    }

    class MyHomePage extends StatefulWidget {
      final String title;
      MyHomePage({this.title});
      @override
      MyHomePageState createState() {
        return new MyHomePageState();
      }
    }

    class MyHomePageState extends State<MyHomePage> {
      int _slideIndex = 0;

      final List<String> images = [
        "assets/slide_1.png",
        "assets/slide_2.png",
        "assets/slide_3.png",
        "assets/slide_4.png"
      ];

      final List<String> text0 = [
        "Welcome in your app",
        "Enjoy teaching...",
        "Showcase your skills",
        "Friendship is great"
      ];

      final List<String> text1 = [
        "App for food lovers, satisfy your taste",
        "Find best meals in your area, simply",
        "Have fun while eating your relatives and more",
        "Meet new friends from all over the world"
      ];

      final IndexController controller = IndexController();

      @override
      Widget build(BuildContext context) {

        TransformerPageView transformerPageView = TransformerPageView(
            pageSnapping: true,
            onPageChanged: (index) {
              setState(() {
                this._slideIndex = index;
              });
            },
            loop: false,
            controller: controller,
            transformer: new PageTransformerBuilder(
                builder: (Widget child, TransformInfo info) {
              return new Material(
                color: Colors.white,
                elevation: 8.0,
                textStyle: new TextStyle(color: Colors.white),
                borderRadius: new BorderRadius.circular(12.0),
                child: new Container(
                  alignment: Alignment.center,
                  color: Colors.white,
                  child: Padding(
                    padding: const EdgeInsets.all(18.0),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        new ParallaxContainer(
                          child: new Text(
                            text0[info.index],
                            style: new TextStyle(
                                color: Colors.blueGrey,
                                fontSize: 34.0,
                                fontFamily: 'Quicksand',
                                fontWeight: FontWeight.bold),
                          ),
                          position: info.position,
                          opacityFactor: .8,
                          translationFactor: 400.0,
                        ),
                        SizedBox(
                          height: 45.0,
                        ),
                        new ParallaxContainer(
                          child: new Image.asset(
                            images[info.index],
                            fit: BoxFit.contain,
                            height: 350,
                          ),
                          position: info.position,
                          translationFactor: 400.0,
                        ),
                        SizedBox(
                          height: 45.0,
                        ),
                        new ParallaxContainer(
                          child: new Text(
                            text1[info.index],
                            textAlign: TextAlign.center,
                            style: new TextStyle(
                                color: Colors.blueGrey,
                                fontSize: 28.0,
                                fontFamily: 'Quicksand',
                                fontWeight: FontWeight.bold),
                          ),
                          position: info.position,
                          translationFactor: 300.0,
                        ),
                        SizedBox(
                          height: 55.0,
                        ),
                      ],
                    ),
                  ),
                ),
              );
            }),
            itemCount: 4);

        return Scaffold(
          backgroundColor: Colors.white,
          body: transformerPageView,
        );

      }
    }

If you had done it the same way above, You should start getting your Onboarding Screen working fine and perfect. Do well to drop any question below in the comment section, and we sill get back to you as soon as we can.

Tags

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Close