Bismillah, Assalamu’alakum, Halo sahabat Uda Uni Coding semua.. kali ini kita akan belajar cara membuat Onboarding seperti gambar diatas. Untuk membuat Onboarding Page seperti gambar diatas, teman-teman bisa menggunakan library SK Onboarding, berikut langkah-langkahnya:
Pada Depedencies di pubspec.yml teman-teman bisa install SK Onboarding seperti berikut:
sk_onboarding_screen untuk onboarding page,
| dependencies: flutter: sdk: flutter sk_onboarding_screen: ^1.0.1 rounded_floating_app_bar: ^0.1.0 flutter_image_slideshow: ^0.1.1 percent_indicator: ^3.0.1 |
- dev_depedencies pada pubspec.yaml
dots_indicator digunakan untuk widget yang digunakan pada onboarding page
| dev_dependencies: flutter_test: sdk: flutter flutter_svg: ^0.17.4 dots_indicator: ^1.0.0 |
- assets image dan icon pada pubspec.yaml
assets ini untuk image dan icon yang akan digunakan
| assets: – assets/image/ – assets/icon/ |
- assets font pada pubspec.yaml
assets ini untuk font yang akan digunakan
| fonts: – family: Poppins fonts: – asset: font/Poppins-Regular.ttf |
Selanjutnya create new dart file dengan nama onboarding.dart, lalu tuliskan code berikut:
import 'package:flutter/material.dart';
import 'package:online_courseapp/onboarding/secondpage.dart';
import 'package:online_courseapp/onboarding/thirdpage.dart';
import 'package:dots_indicator/dots_indicator.dart';
import '../login_page.dart';
import 'firstpage.dart';
class Onboarding extends StatefulWidget {
@override
_OnboardingState createState() => _OnboardingState();
}
class _OnboardingState extends State<Onboarding> {
int currentPageIndex=0;
int pageLength=0;
@override
void initState() {
currentPageIndex = 0;
pageLength = 3;
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Stack(
children: <Widget>[
// Untuk memanggil page 1,2,3
PageView(
physics: BouncingScrollPhysics(),
children: <Widget>[
FirstPage(),
SecondPage(),
ThirdPage(),
],
onPageChanged: (value) {
setState(() {
currentPageIndex = value;
});
},
),
// untuk text 'Lewati' yang ada di pojokan kanan
Padding(
padding: const EdgeInsets.all(40.0),
child: Align(
alignment: Alignment.topRight,
child: GestureDetector(
onTap: (){
Navigator.push(context, MaterialPageRoute(builder: (context)=>LoginPage()));
},
child: Text(
'Lewati',
style: TextStyle(color: Colors.white,
fontSize: 16, fontWeight:FontWeight.w400),
),
),
),
),
// untuk wiget Dots Indicator
Padding(
padding: const EdgeInsets.all(8.0),
child: Align(
alignment: Alignment.bottomCenter,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new DotsIndicator(
dotsCount: pageLength,
position: currentPageIndex.toDouble(),
),
],
),
),
),
// untuk text 'selanjutnya' yang ada di sebelah dots indicator
Padding(
padding: const EdgeInsets.only(bottom: 8.0, right: 50),
child: Align(
alignment: Alignment.bottomRight,
child: Text('Selanjutnya', style: TextStyle(color: Colors.white),),
),
)
],
),
),
),
);
}
}
Pada code diatas terdapat widget PageView yang mana merupakan widget tempat kita memanggil Page atau halaman onboarding yang akan kita gunakan. Selain itu kita juga menambahkan DotsIndicator untuk widget bullets yang terdapat di bagian bawah halaman onboarding.
Selanjutnya kita akan membuat class FirstPage(), SecondPage() dan ThirdPage() untuk halaman onboarding nya. berikut kodingannya
firstpage.dart
import 'package:flutter/material.dart';
import '../login_page.dart';
class FirstPage extends StatelessWidget {
const FirstPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
//ini untuk background
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/image/ob1.png'), fit: BoxFit.fill)),
child: Padding(
padding: const EdgeInsets.all(50.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
SizedBox(height: 320,),
Align(
alignment: Alignment.bottomCenter,
child: Text(
'Belajar berbagai skill pemrograman hanya\ndengan satu aplikasi',
maxLines: 3,
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white,
fontSize: 26,
fontWeight: FontWeight.w400),
),
),
],
),
),
),
);
}
}
secondpage.dart
import 'package:flutter/material.dart';
import '../login_page.dart';
class SecondPage extends StatelessWidget {
const SecondPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
//ini untuk background
image: DecorationImage(
image: AssetImage('assets/image/ob2.png'),fit: BoxFit.cover
)
),
// ini untuk menambahkan teks
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
SizedBox(height: 340,),
Padding(
padding: const EdgeInsets.only(bottom: 35.0),
child: Align(
alignment: Alignment.bottomCenter,
child: Text(
'Dibimbing oleh mentor yang\n berpengalaman dan\nluarbiasa',
maxLines: 3,
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white,
fontSize: 26,
fontWeight: FontWeight.w400),
),
),
),
],
),
),
);
}
}Terakhir untuk slide onboarding pada thirdpage.dart tambahkan kodingan berikut:
import 'package:flutter/material.dart';
import 'package:online_courseapp/login_page.dart';
class ThirdPage extends StatelessWidget {
const ThirdPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/image/ob3.png'), fit: BoxFit.cover)),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Align(
alignment: Alignment.bottomCenter,
child: Text(
'Lets Join With Us!',
maxLines: 3,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 26,
fontWeight: FontWeight.w400),
),
),
SizedBox(height: 50),
Padding(
padding: EdgeInsets.all(20),
child: Container(
height: 42,
margin: EdgeInsets.all(20),
child: FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(4)),
child: Text('Get Start!'),
color: Color(0xFF0096C7),
textColor: Colors.white,
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => LoginPage()));
},
),
),
),
],
),
),
);
}
}
Jika Sudah menambahkan file tersebut dan sudah mengimportnya di file onboarding.dart kita bisa langsung jalankan dengan memanggila class Onboarding di file main.dart seperti berikut:
import 'package:online_courseapp/onboarding/onboarding.dart';
import 'onboarding/firstpage.dart';
import 'onboarding/secondpage.dart';
import 'onboarding/thirdpage.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
backgroundColor: Color(0xE5E5E5),
fontFamily: 'Poppins'
),
home: Onboarding(),
);
}
}Karena SK Onboarding belum Null Safety jadi kita perlu menambahkan –no-sound-null-safety pada Edit Configuration
Kita juga sudah menginstal font yang kita gunakan pada aplikasi di pupspec.yaml, kita bisa jadikan font tersebut sebagai font default untuk aplikasi yang akan kita kerjakan dengan cara menambahkannya di properti ThemeData yaitu di fontFamily. di fontFamily kita bisa tuliskan nama font yang kita import tadi, yaitu ‘Poppins’.
Mudah bukan? Ok teman-teman sekian tutorial kali ini, Sampai jumpa di artikel berikutnyaa.. Semangat belajar ^.^