Flutter : Bagaimana cara membuat Onboarding page dengan flutter
Hallo semuanya kembali lagi bersama saya setelah lama tidak update di medium, kali ini kita akan bahas mengenai flutter. Sedikit info kemungkinan akun ini akan banyak membahas flutter… ya walaupun nanti kemungkinan tetap ada bahasan backend (ASP.NET Core atau Laravel). Oke tidak usah berlama-lama lagi mari kita mulai saja pembahasan nya.
Apa itu Onboarding Page ?
Onboarding page adalah halaman yang berada di awal — awal sebuah aplikasi yang biasanya berisi penjelasan fitur fitur atau keuntungan yang didapatkan user ketika menggunakan aplikasi tersebut.
Kegunaan dari Onboarding page dalam segi UI/UX adalah untuk menarik user agar semakin ingin menggunakan aplikasi tersebut, tentunya setelah melakukan penginstallan dan sebelum login atau mendaftar aplikasi.
Contoh tampilan Onboarding Page yang akan kita buat pada artikel kali ini adalah seperti di bawah ini
Persiapan Project Flutter sebelum masuk ke Pembuatan Onboarding Page
Baik tanpa berpanjang lebar mari menuju bagian persiapan sebelum pembuatan onboarding page dengan Flutter. Hal pertama yang harus kalian lakukan adalah membuat sebuah project, dengan cara :
flutter create nama_projectIsikan nama_project sesuai keinginan kalian ya, disini kita akan menggunakan nama onboarding_project. Jika sukses maka akan muncul tampilan seperti di bawah ini ya
Setelah selesai melakukan pembuatan project flutter, buka project tersebut di IDE kalian disini saya menggunakan Visual Studio Code. Lalu pertama kali yang akan kita lakukan adalah Menginstall package yang bernama carousel_slider pada pub.dev
Setelah itu lakukan penginstallan dengan cara menuju tab Installing lalu copykan bagian dependencies pada pubspec.yaml poject kalian.
Setelah itu jangan lupa save (ctrl + s) pada saat kalian membuka pubspec.yaml. Sehingga akan muncul flutter pub get otomatis seperti di bawah ini
atau jika tidak muncul silahkan ketikkan kode “flutter pub get” pada terminal atau cmd kalian. Setelah itu kita membuat folder assets (digunakan untuk menyimpan asset berupa gambar atau icon yang nantinya digunakan pada aplikasi flutter kita).
Setelah selesai kita kembali lagi ke bagian pubspec.yaml lalu uncomment bagian assets : lalu kita ubah sedikit menjadi seperti gambar di bawah ini
Lalu apa sih kegunaan membuat ini semua ? kegunaan nya adalah untuk mendaftarkan folder assets sebagai saah satu source yang digunakan oleh flutter project untuk mengambil gambar, icon maupun asset asset lainnya.
Oke dengan begini selesai sudah persiapan project yang akan kita gunakan untuk pembuatan onboarding page. Setelah ini mari langsung menuju ke pembuatan halaman onboarding nya.
Mulai Pembuatan Onboarding Page Project
Dalam flutter kita akan melakukan segala proses pengeditan tampilan (presentation layer) di dalam folder lib. Jadi kita akan buat satu folder yaitu pages (digunakan untuk menampung page — page yang akan digunakan flutter) karena kita hanya menggunakan page saja pada artikel kali ini maka dari itu hanya folder pages saya yang dibuat (Biasanya saya membuat folder lain seperti widgets).
Setelah itu tambahkan satu file dengan nama onboarding_page.dart yang nantinya merupakan file halaman onboarding kita.
Lalu kita buat stateless widget untuk sementara dan kita beri nama OnBoardingPage seperti kode di bawah ini.
class OnBoardingPage extends StatelessWidget {
const OnBoardingPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(),
);
}
}Kita biarkan untuk kode di dalam onboarding_page.dart seperti ini terlebih dahulu, setelah itu kita akan melakukan setting halaman main.dart sebagai halaman utama di dalam aplikasi flutter kita.
Ubah main.dart menjadi menampilkan onboarding_page.dart, sehingga menjadi kode seperti di bawah ini :
import 'package:flutter/material.dart';
import 'package:onboarding_project/pages/onboarding_page.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: OnBoardingPage(),
);
}
}Oke … sebelum mengedit bagian page onboarding_page.dart kita akan menggunakan image dalam project onboarding ini, oleh karena itu silahkan masukan tiga image yang akan kita gunakan pada masing masing halaman onboarding nya ke folder assets.
Setelah melakukan ini maka semua persiapan sudah selesai saat nya kita membuat Halaman On Boarding nya, silahkan buka onboarding_page.dart. Lalu kita ubah dari stateless menjadi stateful widget dengan klik ctrl + . pada StatelessWidget menjadi StatefulWidget sehingga menjadi seperti di bawah ini.
import 'package:flutter/material.dart';
class OnBoardingPage extends StatefulWidget {
const OnBoardingPage({super.key});
@override
State<OnBoardingPage> createState() => _OnBoardingPageState();
}
class _OnBoardingPageState extends State<OnBoardingPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(),
);
}
}Lalu kita tambahkan state yang akan kita gunakan untuk carousel kita kali ini kita beri nama currentIndex lalu kita beri angka 0 sebagai posisi awal. Serta kita buat juga untuk CarouselController nya sehingga kode nya menjadi seperti ini.
class _OnBoardingPageState extends State<OnBoardingPage> {
int currentIndex = 0;
CarouselController carouselController = CarouselController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(),
);
}
}Setelah itu kita tambahkan List untuk bagian title dan List untuk subtitle nya (Seperti gambar hasil yang di atas ada bagian tulisan yang bold yaitu title dan subtitle yaitu tulisan di bawah nya).
class _OnBoardingPageState extends State<OnBoardingPage> {
...
List<String> titles = [
"One App For Everyone",
"Build Using Our Heart",
"Let's Go",
];
List<String> subTitles = [
"Our system is helping all people in one system",
"System that make use our heart",
"We will guide you to where you wanted it too",
];
@override
Widget build(BuildContext context) {
...
}
}Setelah itu mari kita buat langsung carousel nya, kita akan menambahkan terlebih dahulu ketiga gambar yang telah kita masukan tadi lalu membuat carousel nya sehingga dapat digeser-geser. Nah berikut ini adalah kode nya :
...
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CarouselSlider(
items: [
Image.asset(
'assets/onboarding_1.png',
height: 331,
),
Image.asset(
'assets/onboarding_2.png',
height: 331,
),
Image.asset(
'assets/onboarding_3.png',
height: 331,
),
],
options: CarouselOptions(
height: 331,
viewportFraction: 1,
enableInfiniteScroll: false,
onPageChanged: (index, reason) {
setState(() {
currentIndex = index;
});
},
),
carouselController: carouselController,
),
],
),
),
);
}
...Setelah itu maka akan menghasilkan tampilan seperti di bawah ini :
Nah untuk hasilnya menunjukkan bahwa carousel yang sudah kita buat berhasil nih, karena sudah bisa digeser geser. Untuk langkah selanjutnya adalah tinggal menambahkan tulisan di bawah gambar nya ya.
Silahkan tambahkan kode di bawah ini untuk menambahkan tulisan onboarding nya (Kita letakan kode ini di bawah kode CarouselSlider).
...
const SizedBox(height: 100),
Text(
titles[currentIndex],
style: const TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 20,
),
textAlign: TextAlign.center,
),
const SizedBox(height: 26),
Text(
subTitles[currentIndex],
style: const TextStyle(
color: Colors.black,
fontSize: 16,
),
textAlign: TextAlign.center,
),Maka hasilnya akan menjadi seperti ini :
Nah sudah mulai hampir jadi nih halaman onboarding yang kita buat, setelah ini kita tinggal kita tambahkan titik di bawah nya sebagai indikator kita berada di halaman mana saat ini.
Silahkan tambahkan kode di bawah ini (Silahkan tambahkan di kode sebelumnya ya) :
...
const SizedBox(height: 60),
Container(
margin: const EdgeInsets.symmetric(
horizontal: 40,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
TextButton(
onPressed: () {
carouselController.animateToPage(2);
},
child: const Text(
'SKIP',
style: TextStyle(
fontSize: 18,
),
),
),
Row(
children: [
Container(
width: 10,
height: 10,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: currentIndex == 0 ? Colors.blue : Colors.grey,
),
),
const SizedBox(width: 10),
Container(
width: 10,
height: 10,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: currentIndex == 1 ? Colors.blue : Colors.grey,
),
),
const SizedBox(width: 10),
Container(
width: 10,
height: 10,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: currentIndex == 2 ? Colors.blue : Colors.grey,
),
),
],
),
TextButton(
onPressed: () {
if (currentIndex == 2) {
} else {
carouselController.nextPage();
}
},
child: const Text(
'NEXT',
style: TextStyle(
fontSize: 18,
),
),
),
],
),
),Dan hasilnya adalah seperti di bawah ini :
Nah akhirnya selesai juga, untuk pembuatan halaman onboarding kita kali ini. Nah pastinya kalian pengen melihat kode nya secara utuh kan ? Nah dibawah ini saya sediakan kode lengkap nya dari onboarding_page.dart
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
class OnBoardingPage extends StatefulWidget {
const OnBoardingPage({super.key});
@override
State<OnBoardingPage> createState() => _OnBoardingPageState();
}
class _OnBoardingPageState extends State<OnBoardingPage> {
int currentIndex = 0;
CarouselController carouselController = CarouselController();
List<String> titles = [
"One App For Everyone",
"Build Using Our Heart",
"Let's Go",
];
List<String> subTitles = [
"Our system is helping all people in one system",
"System that make use our heart",
"We will guide you to where you wanted it too",
];
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CarouselSlider(
items: [
Image.asset(
'assets/onboarding_1.png',
height: 329,
),
Image.asset(
'assets/onboarding_2.png',
height: 329,
),
Image.asset(
'assets/onboarding_3.png',
height: 329,
),
],
options: CarouselOptions(
height: 331,
viewportFraction: 1,
enableInfiniteScroll: false,
onPageChanged: (index, reason) {
setState(() {
currentIndex = index;
});
},
),
carouselController: carouselController,
),
const SizedBox(height: 100),
Text(
titles[currentIndex],
style: const TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 20,
),
textAlign: TextAlign.center,
),
const SizedBox(height: 26),
Text(
subTitles[currentIndex],
style: const TextStyle(
color: Colors.black,
fontSize: 16,
),
textAlign: TextAlign.center,
),
const SizedBox(height: 60),
Container(
margin: const EdgeInsets.symmetric(
horizontal: 40,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
TextButton(
onPressed: () {
carouselController.animateToPage(2);
},
child: const Text(
'SKIP',
style: TextStyle(
fontSize: 18,
),
),
),
Row(
children: [
Container(
width: 10,
height: 10,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: currentIndex == 0 ? Colors.blue : Colors.grey,
),
),
const SizedBox(width: 10),
Container(
width: 10,
height: 10,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: currentIndex == 1 ? Colors.blue : Colors.grey,
),
),
const SizedBox(width: 10),
Container(
width: 10,
height: 10,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: currentIndex == 2 ? Colors.blue : Colors.grey,
),
),
],
),
TextButton(
onPressed: () {
if (currentIndex == 2) {
} else {
carouselController.nextPage();
}
},
child: const Text(
'NEXT',
style: TextStyle(
fontSize: 18,
),
),
),
],
),
),
],
),
),
);
}
}Oke sampai sini dulu artikel kita kali ini Bagaimana cara membuat onboarding page dengan menggunakan Flutter
Terimakasih sudah membaca sampai akhir, silahkan like jika kalian suka atau jika ada yang di tanyakan atau mau request bahas tutorial apa bisa ditulis di kolom komentar. See yaa !
