Flutter Onboarding Screen Only One Time

The onboarding screen is the most popular welcome in the application. The screen appears only one time. In this tutorial, we will implement the On-Boarding Screen without using any additional packages.

Project Setup

First, create an empty project by using the IDE or flutter create command. If you are using an existing project no problem, use that project.

Then create the assets folder under the root folder. under the assets, folder create the images folder. Then add your required images to this folder.

Then, open the pubspec.yaml file, uncomment the assets folder and add images path.

assets:
    - assets/images/

Adding Package

In this project, we need the Shared Preferences package. Because the onboarding screen appears only one time. We no need to show again and again. Using the shared preferences package, we store the onboarding information on local storage. It tells user has seen the onboarding screen or not. To get the latest version visit the official page https://pub.dev/packages/shared_preferences.

Open the pubspec.yaml file and Add the Shared Preferences package under the dependencies section.

dependencies: shared_preferences: ^2.0.5
Code language: CSS (css)

Implementation

main.dart

import 'package:courseapplandingpage/home.dart'; import 'package:courseapplandingpage/onboard/onboard.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:shared_preferences/shared_preferences.dart'; int? isviewed; void main() async { SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle( statusBarColor: Colors.transparent, )); WidgetsFlutterBinding.ensureInitialized(); SharedPreferences prefs = await SharedPreferences.getInstance(); isviewed = prefs.getInt('onBoard'); runApp(MyApp()); } class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: isviewed != 0 ? OnBoard() : Home(), ); } }
Code language: JavaScript (javascript)

constant.dart

import 'package:flutter/material.dart'; Color kblue = Color(0xFF4756DF); Color kwhite = Color(0xFFFFFFFF); Color kblack = Color(0xFF000000); Color kbrown300 = Color(0xFF8D6E63); Color kbrown = Color(0xFF795548); Color kgrey = Color(0xFFC0C0C0);
Code language: JavaScript (javascript)

onboard_model.dart

import 'package:flutter/material.dart'; class OnboardModel { String img; String text; String desc; Color bg; Color button; OnboardModel({ required this.img, required this.text, required this.desc, required this.bg, required this.button, }); }
Code language: JavaScript (javascript)

onboard.dart

import 'package:courseapplandingpage/home.dart'; import 'package:courseapplandingpage/onboard/onboard_model.dart'; import 'package:flutter/material.dart'; import 'package:shared_preferences/shared_preferences.dart'; import '../constant.dart'; class OnBoard extends StatefulWidget { @override _OnBoardState createState() => _OnBoardState(); } class _OnBoardState extends State<OnBoard> { int currentIndex = 0; late PageController _pageController; List<OnboardModel> screens = <OnboardModel>[ OnboardModel( img: 'assets/images/img-1.png', text: "Belajar Dengan Metode Learning by Doing", desc: "Sebuah metode belajar yang terbuktiampuh dalam meningkatkan produktifitas belajar, Learning by Doing", bg: Colors.white, button: Color(0xFF4756DF), ), OnboardModel( img: 'assets/images/img-2.png', text: "Dapatkan Kemudahan Akses Kapanpun dan Dimanapun", desc: "Tidak peduli dimanapun kamu, semua kursus yang telah kamu ikuti bias kamu akses sepenuhnya", bg: Color(0xFF4756DF), button: Colors.white, ), OnboardModel( img: 'assets/images/img-3.png', text: "Gunakan Fitur Kolaborasi Untuk Pengalaman Lebih", desc: "Tersedia fitur Kolaborasi dengan tujuan untuk mengasah skill lebih dalam karena bias belajar bersama", bg: Colors.white, button: Color(0xFF4756DF), ), ]; @override void initState() { _pageController = PageController(initialPage: 0); super.initState(); } @override void dispose() { _pageController.dispose(); super.dispose(); } _storeOnboardInfo() async { print("Shared pref called"); int isViewed = 0; SharedPreferences prefs = await SharedPreferences.getInstance(); await prefs.setInt('onBoard', isViewed); print(prefs.getInt('onBoard')); } @override Widget build(BuildContext context) { return Scaffold( backgroundColor: currentIndex % 2 == 0 ? kwhite : kblue, appBar: AppBar( backgroundColor: currentIndex % 2 == 0 ? kwhite : kblue, elevation: 0.0, actions: [ TextButton( onPressed: () { _storeOnboardInfo(); Navigator.pushReplacement( context, MaterialPageRoute(builder: (context) => Home())); }, child: Text( "Skip", style: TextStyle( color: currentIndex % 2 == 0 ? kblack : kwhite, ), ), ) ], ), body: Padding( padding: const EdgeInsets.symmetric(horizontal: 20.0), child: PageView.builder( itemCount: screens.length, controller: _pageController, physics: NeverScrollableScrollPhysics(), onPageChanged: (int index) { setState(() { currentIndex = index; }); }, itemBuilder: (_, index) { return Column( mainAxisAlignment: MainAxisAlignment.spaceAround, crossAxisAlignment: CrossAxisAlignment.center, mainAxisSize: MainAxisSize.min, children: [ Image.asset(screens[index].img), Container( height: 10.0, child: ListView.builder( itemCount: screens.length, shrinkWrap: true, scrollDirection: Axis.horizontal, itemBuilder: (context, index) { return Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Container( margin: EdgeInsets.symmetric(horizontal: 3.0), width: currentIndex == index ? 25 : 8, height: 8, decoration: BoxDecoration( color: currentIndex == index ? kbrown : kbrown300, borderRadius: BorderRadius.circular(10.0), ), ), ]); }, ), ), Text( screens[index].text, textAlign: TextAlign.center, style: TextStyle( fontSize: 27.0, fontWeight: FontWeight.bold, fontFamily: 'Poppins', color: index % 2 == 0 ? kblack : kwhite, ), ), Text( screens[index].desc, textAlign: TextAlign.center, style: TextStyle( fontSize: 14.0, fontFamily: 'Montserrat', color: index % 2 == 0 ? kblack : kwhite, ), ), InkWell( onTap: () async { print(index); if (index == screens.length - 1) { await _storeOnboardInfo(); Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => Home())); } _pageController.nextPage( duration: Duration(milliseconds: 300), curve: Curves.bounceIn, ); }, child: Container( padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 10), decoration: BoxDecoration( color: index % 2 == 0 ? kblue : kwhite, borderRadius: BorderRadius.circular(15.0)), child: Row(mainAxisSize: MainAxisSize.min, children: [ Text( "Next", style: TextStyle( fontSize: 16.0, color: index % 2 == 0 ? kwhite : kblue), ), SizedBox( width: 15.0, ), Icon( Icons.arrow_forward_sharp, color: index % 2 == 0 ? kwhite : kblue, ) ]), ), ) ], ); }), ), ); } }
Code language: PHP (php)

Download the Source Code

If you need this project visit my github profile. If you like this project, please give the start. Thank You.