Tutorial Flutter Cara Menciptakan Onboarding Screen Menarik

Tutorial Flutter Cara Membuat Onboarding Screen Menarik

- Onboarding screen atau intro screen merupakan halaman pengenalan pada ketika aplikasi pertama kali diinstall. Biasanya onboarding screen berupa halaman yang sanggup digeser atau yang lebih dikenal dengan slide. Pada tutorial ini kita akan berguru cara menciptakan onboarding screen dengan flutter, untuk desain rujukan yang aku gunakan yakni dari Sudhir Chennuru.

Kalian sanggup mengikuti langkah-langkah berikut untuk membuatnya :

1. Membuat project flutter

Buat project flutter dengan memakai Android Studio atau versi CLI, dan beri nama flutter_intro_layout, pastikan laptop kalian terkoneksi dengan internet dan tunggu hingga proses sinkronisasi project selesai.

2. Menambahkan assets dan dependencies

Selanjutnya untuk assets gambar kalian sanggup mengunduhnya di repository saya. Buat folder gres pada project dan beri nama assets, buat folder lagi didalamnya dengan nama images kemudian pindahkan assets gambar yang sudah diunduh kedalam folder images. 

Jangan lupa pendaftaran assets yang sudah ditambahkan semoga sanggup diakses dengan cara buka file pubspec.yaml, cari kata assets dan kodenya menjadi ibarat berikut :

assets:     - assets/images/ 

Kemudian tambahkan dependencies flutter_swiper pada cuilan dependencies sehingga kodenya menjadi ibarat berikut :

dependencies:   flutter:     sdk: flutter   flutter_swiper: any 

Simpan perubahan pada file pubspec.yaml.

3. Membuat color palete

Untuk memudahkan penggunaan warna pada project, kita akan menciptakan file gres yang isinya class untuk menangani penggunaan warna. Buat file gres pada folder lib dengan nama color_palette.dart dan tambahkan kodenya ibarat berikut :

import 'package:flutter/material.dart';  class ColorPalette {   static const dotColor = Color(0xffe8e8e8);   static const dotActiveColor = Color(0xffff3800);   static const titleColor = Color(0xff1c1a1a);   static const descriptionColor = Color(0xff707070); } 

4. Membuat model

Selanjutnya buka folder lib dan buat folder gres dengan nama model, buat file didalamnya dengan nama intro.dart. File model dipakai sebagai object dari isi halaman yang akan kita buat untuk menampung ibarat gambar, judul dan deskripsi. Tambahkan isyarat berikut pada file intro.dart :

class Intro {   String image;   String title;   String description;      Intro({this.image, this.title, this.description}); } 

5. Membuat halaman onboarding

Buat folder gres pada folder lib dengan nama screens, lalu buat file gres dengan nama intro_view.dart. 

Pada file intro.dart kita akan mengimplementasikan model, library flutter_swiper, dan color palette yang sudah kita buat sebelumnya.

Kodenya ibarat berikut :

import 'package:flutter/material.dart'; import 'package:flutter_swiper/flutter_swiper.dart'; import 'package:flutter_intro_layout/model/intro.dart'; import 'package:flutter_intro_layout/color_palette.dart';  class IntroPage extends StatefulWidget {   @override   _IntroPageState createState() => _IntroPageState(); }  class _IntroPageState extends State<IntroPage> {   simpulan List<Intro> introList = [     Intro(       image: "assets/images/icon_search.png",       title: "Search",       description: "Discover Restaurants offering the best fast food food near you on Foodwa",     ),     Intro(       image: "assets/images/icon_hamburger.png",       title: "Order",       description: "Our veggie plan is filled with delicious seasonal vegetables, whole grains, beautiful cheeses and vegetarian proteins",     ),     Intro(       image: "assets/images/icon_otw.png",       title: "Eat",       description: "Food delivery or pickup from local restaurants, Explore restaurants that deliver near you.",     ),   ];     @override   Widget build(BuildContext context) {     return Scaffold(       backgroundColor: Colors.white,       body: Swiper.children(         index: 0,         autoplay: false,         loop: false,         pagination: SwiperPagination(           margin: EdgeInsets.only(bottom: 20.0),           builder: DotSwiperPaginationBuilder(             color: ColorPalette.dotColor,             activeColor: ColorPalette.dotActiveColor,             size: 10.0,             activeSize: 10.0,           ),         ),         control: SwiperControl(           iconNext: null,           iconPrevious: null         ),         children: _buildPage(context),       ),     );   }    List<Widget> _buildPage(BuildContext context) {     List<Widget> widgets = [];     for(int i=0; i<introList.length; i++) {       Intro intro = introList[i];       widgets.add(         Container(           padding: EdgeInsets.only(             top: MediaQuery.of(context).size.height/6,           ),           child: ListView(             children: <Widget>[               Image.asset(                 intro.image,                 height: MediaQuery.of(context).size.height/3.5,               ),               Padding(                 padding: EdgeInsets.only(                   top: MediaQuery.of(context).size.height/12.0,                 ),               ),               Center(                 child: Text(                   intro.title,                   style: TextStyle(                     color: ColorPalette.titleColor,                     fontSize: 24.0,                     fontWeight: FontWeight.bold,                   ),                 ),               ),               Padding(                 padding: EdgeInsets.only(                   top: MediaQuery.of(context).size.height/20.0,                 ),               ),               Container(                 padding: EdgeInsets.symmetric(                   horizontal: MediaQuery.of(context).size.height/20.0,                 ),                 child: Text(                   intro.description,                   style: TextStyle(                     color: ColorPalette.descriptionColor,                     fontSize: 14.0,                   ),                   textAlign: TextAlign.center,                 ),               ),             ],           ),         ),       );     }     return widgets;   } } 

6. Finishing

Untuk menampilkan halaman intro yang sudah kita buat, buka file main.dart kemudian ubah semua kodenya menjadi ibarat berikut :

import 'package:flutter/material.dart'; import 'package:flutter_intro_layout/screens/intro_view.dart';  void main() {   runApp(MaterialApp(     debugShowCheckedModeBanner: false,     title: 'Intro Layout',     home: IntroPage(),   )); } 

Sebelum dijalankan, buka file widget_test.dart pada folder test, lalu tambahkan komentar pada pemanggilan class MyApp sebab kita tidak memakai class tersebut. Kode yang ditambahkan komentar yakni ibarat berikut :

//import 'package:flutter_intro_layout/main.dart'; //await tester.pumpWidget(MyApp()); 

Sekarang coba memakai emulator atau hp kalian, dan akhirnya ibarat berikut :

Untuk source code lengkapnya kalian sanggup mempelajarinya di repository aku :

Github Saya

Demikian Tutorial Flutter Cara Membuat OnBoarding Screen Menarik, kalau ada pertanyaan atau hambatan sanggup berdiskusi dengan mengisi kolom komentar dibawah. Untuk berguru selanjutnya kalian sanggup mengikuti artikel berikut :

Tutorial Membuat Form Login dan Register Keren dengan Flutter.

Tutorial Membuat Splash Screen dengan Flutter

Share this post