Onboarding adalah cara yang digunakan supaya pengguna dapat mengerti tentang cara aplikasi yang ia gunakan bekerja. adalah halaman pengenalan pada saat aplikasi pertama kali diinstall. Pada umumnya onboarding screen biasa menggunakan slide atau menggunakan button.
Dan pada kali ini kita akan membuat halaman Onboarding screen menggunakan flutter, dan dalam pembuatan Onboarding screen ini kita tidak menggunakan library atau packages yang artinya kita akan membuat menggunakan pure fitur dari flutter.
Tahap-tahap membuat Onboarding Screen
1. Membuat Model
File model digunakan sebagai object dari isi halaman yang akan kita buat untuk menampung seperti gambar, judul dan deskripsi. Selanjutnya buka folder lib dan buat folder baru dengan nama model, buat file didalamnya dengan nama onboard_model.dart.
Setelah itu pada file onboard_model.dart tambahkan class dengan nama OnboardModel, buat juga parameternya dan isi sesuai yang dibutuh kan pada onboard seperti gambar, judul dan deskripsi. Berikut kode onboard_model.dart.
class OnboardModel { final String image; final String title; final String description; OnboardModel( { required this.image, required this.title, required this.description}); } final List<OnboardModel> onboard_data=[ OnboardModel(image: “images/onboard1.png”, title: “Relaxing Trip”, description: “our drivers prioritize comfort\nand safety on the way.”), OnboardModel(image: “images/onboard2.png”, title: “Relaxing Trip”, description: “our drivers prioritize comfort\nand safety on the way.”), OnboardModel(image: “images/onboard3.png”, title: “Relaxing Trip”, description: “our drivers prioritize comfort\nand safety on the way.”), ]; |
2. Membuat UI dan Membuat PageView
Setelah membuat model dan datanya Selanjutnya Kita perlu membuat Content dari Onboarding Screen agar bisa mengirim pesan kepada user dan agar lebih mudah untuk mengenal aplikasi. Kita perlu membuat class baru dengan StatelesWidget dengan nama OnboardingContent pada file onboard_screen.dart.
implementasikan menjadi kode pada class OnboardingContent. Berikut kodenya
class OnboardingContent extends StatelessWidget { final String image; final String title; final String description;
const OnboardingContent({Key? key, required this.image, required this.title, required this.description}) : super(key: key);
@override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, body: SafeArea( child: Center( child: Column( mainAxisAlignment: MainAxisAlignment.start, children: [ Image.asset( image, width: 270, ), const Spacer(), Text( title, style: const TextStyle( color: Colors.black, fontSize: 30, fontWeight: FontWeight.w500, ), ), Text( description, textAlign: TextAlign.center, style: const TextStyle( color: Colors.grey, fontSize: 16, fontWeight: FontWeight.w400, ), ), ], ), ), ), ); } } |
Setelah membuat content maka kita perlu membuat agar content yang telah kita buat dapat kita geser / slide, dengan menggunakan PageView kita bisa membuat content kita dapat bergeser ke slide slanjut, Kita bisa membuat PageView pada class OnboardingScreen, dan juga kita akan membuat tombol dan indicator
class OnboardingScreen extends StatefulWidget { const OnboardingScreen({Key? key}) : super(key: key); @override State<OnboardingScreen> createState() => _OnboardingScreenState(); } class _OnboardingScreenState extends State<OnboardingScreen> { late PageController _pageController; int _indexPage = 0; @override void initState() { _pageController = PageController(initialPage: 0); super.initState(); } @override void dispose() { _pageController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, body: SafeArea( child: Column( children: [ Padding( padding: const EdgeInsets.all(20), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ IconButton( onPressed: () { _pageController.previousPage( duration: Duration(milliseconds: 300), curve: Curves.ease); }, icon: const Icon( Icons.arrow_back, size: 24, ), ), TextButton( onPressed: () { //untuk mengskip onboarding dan langsung ke home screen // Navigator.push(context, // MaterialPageRoute(builder: (context) => HomeScreen)); }, child: const Text( “Skip”, style: TextStyle( color: Colors.orange, fontSize: 14, fontWeight: FontWeight.w400), )) ], ), ), Expanded( child: PageView.builder( physics: const BouncingScrollPhysics(), onPageChanged: (index) { setState(() { _indexPage = index; }); }, itemCount: onboard_data.length, controller: _pageController, itemBuilder: (context, index) => OnboardingContent( image: onboard_data[index].image, title: onboard_data[index].title, description: onboard_data[index].description), ), ), Row( mainAxisAlignment: MainAxisAlignment.center, children: [ …List.generate( onboard_data.length, (index) => Padding( padding: const EdgeInsets.only(top: 10, bottom: 15), child: DotIndicator( isActive: index == _indexPage, ), ), ), ], ), Padding( padding: const EdgeInsets.only(right: 40, left: 40), child: InkWell( onTap: () { //untuk tombol dapat pindah menuju Home Screen // if (_indexPage == onboard_data.length – 1) { // Navigator.push( // context, MaterialPageRoute(builder: // (context) => HomeScreen)); // } // untuk pindah ke halaman selanjutnya _pageController.nextPage( duration: const Duration(milliseconds: 300), curve: Curves.ease); }, child: Container( width: double.infinity, height: 60, decoration: BoxDecoration( borderRadius: BorderRadius.circular(50), color: Colors.red, ), child: Center( child: Text( _indexPage == onboard_data.length – 1 ? “Get Started” : “Next”, style: const TextStyle( color: Colors.white, fontSize: 16, fontWeight: FontWeight.w500, ), ), ), ), ), ), const SizedBox( height: 85, ), ], ), ), ); } } |
Untuk membuat Indicator kita perlu membuat file baru yang bernama dot_indicator.dart
yang nanti akan kita buat sebagai lingkaran dari Indicator dan pada file dot_indicator.dart tambahkan class menggunakan StatelessWidget dan namai kelas tersebut dengan nama DotIndicator.
class DotIndicator extends StatelessWidget { const DotIndicator({Key? key,this.isActive = false}) : super(key: key);
final bool isActive;
@override Widget build(BuildContext context) { return Padding( padding: const EdgeInsets.all(5.0), child: AnimatedContainer( duration: const Duration(milliseconds: 300), height: 10, width: 10, decoration: BoxDecoration( color: isActive ? Colors.red : Colors.grey, borderRadius: const BorderRadius.all(Radius.circular(12)) ), ), ); } } |
maka kita telah menyelesaikan pembahasan tentang Onboarding Screen berikut Hasil Akhirnya