Tutorial Flutter Cara Membuat Onboarding Screen Menarik

Tutorial Flutter Cara Membuat Onboarding Screen Menarik

Codingtive.com - Onboarding screen atau intro screen merupakan halaman pengenalan pada saat aplikasi pertama kali diinstall. Biasanya onboarding screen berupa halaman yang dapat digeser atau yang lebih dikenal dengan slide. Pada tutorial ini kita akan belajar cara membuat onboarding screen dengan flutter, untuk desain referensi yang saya gunakan yaitu dari Sudhir Chennuru.

Kalian dapat mengikuti langkah-langkah berikut untuk membuatnya :

1. Membuat project flutter

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

2. Menambahkan assets dan dependencies

Selanjutnya untuk assets gambar kalian dapat mengunduhnya di repository saya. Buat folder baru 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 registrasi assets yang sudah ditambahkan supaya dapat diakses dengan cara buka file pubspec.yaml, cari kata assets dan kodenya menjadi seperti berikut :

assets:
    - assets/images/

Kemudian tambahkan dependencies flutter_swiper pada bagian dependencies sehingga kodenya menjadi seperti 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 membuat file baru yang isinya class untuk menangani penggunaan warna. Buat file baru pada folder lib dengan nama color_palette.dart dan tambahkan kodenya seperti 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 baru dengan nama model, buat file didalamnya dengan nama intro.dart. File model digunakan sebagai object dari isi halaman yang akan kita buat untuk menampung seperti gambar, judul dan deskripsi. Tambahkan kode 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 baru pada folder lib dengan nama screens, kemudian buat file baru 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 seperti 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> {
  final 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 seperti 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, kemudian tambahkan komentar pada pemanggilan class MyApp karena kita tidak menggunakan class tersebut. Kode yang ditambahkan komentar yaitu seperti berikut :

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

Sekarang coba menggunakan emulator atau hp kalian, dan hasilnya seperti berikut :

Untuk source code lengkapnya kalian dapat mempelajarinya di repository saya :

Github Saya

Demikian Tutorial Flutter Cara Membuat OnBoarding Screen Menarik, jika ada pertanyaan atau kendala dapat berdiskusi dengan mengisi kolom komentar dibawah. Untuk belajar selanjutnya kalian dapat mengikuti artikel berikut :

Tutorial Membuat Form Login dan Register Keren dengan Flutter.

Tutorial Membuat Splash Screen dengan Flutter

Bagikan Artikel ini

Berlangganan update artikel terbaru via email: