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.5Implementation
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(),
);
}
}
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);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,
});
}
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,
)
]),
),
)
],
);
}),
),
);
}
}
Download the Source Code
If you need this project visit my github profile. If you like this project, please give the start. Thank You.
Thank You man. You saved my time.
Thanks a lot Dear. You save my time.
Thanks, That’s so clear