3. Introduction Screen
1. Persiapan Introduction Screen
Untuk memulai membuat introduction screen ada beberapa package yang harus kita install :
Keterangan
introduction_screen: Package yang menyediakan tampilan introductiongoogle_fonts: Font dari aplikasi yang akan kita buat
2. Membuat Tampilan Introduction Screen
Kita akan membuat tampilan yang akan muncul ketika splash screen selesai berjalan yang bentuk tampilannya adalah seperti ini :
maka dari itu buat file baru pada folder ui dengan nama introduction.dart
introduction.dart
// ignore_for_file: use_key_in_widget_constructors, prefer_const_constructors
import 'package:flutter/material.dart';
class Page1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold();
}
}
Daftarkan introduction pada route
Selanjutnya silahkan tulis kode introductionnya seperti ini:
introduction.dart
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:introduction_screen/introduction_screen.dart';
class Introduction extends StatelessWidget {
const Introduction({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: IntroductionScreen(
pages: [
PageViewModel(
title: "",
bodyWidget: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: EdgeInsets.only(bottom: 10),
child: Image.asset("assets/img/white-traver.png",
height: 50),
),
Container(
margin: EdgeInsets.only(bottom: 10),
child: Text(
"Lets explore the world",
style: GoogleFonts.poppins(
textStyle: TextStyle(
fontSize: 70,
color: Colors.white,
height: 1.2)),
),
),
Container(
margin: EdgeInsets.only(bottom: 20),
child: Text(
"Lets explore the world with just a few clicks",
style: GoogleFonts.poppins(
textStyle:
TextStyle(fontSize: 20, color: Colors.white)),
),
),
],
),
),
image: Stack(
children: [
Container(
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/img/page1.jpg"),
fit: BoxFit.cover),
)),
Container(
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.transparent, Colors.black54],
begin: Alignment.topCenter,
end: Alignment.bottomCenter))),
],
),
decoration: PageDecoration(
fullScreen: true,
titlePadding: EdgeInsets.only(bottom: 0),
bodyFlex: 1)),
PageViewModel(
title: "",
bodyWidget: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: EdgeInsets.only(bottom: 10),
child: Image.asset("assets/img/white-traver.png",
height: 50),
),
Container(
margin: EdgeInsets.only(bottom: 10),
child: Text(
"Visit tourist attractions",
style: GoogleFonts.poppins(
textStyle: TextStyle(
fontSize: 70,
color: Colors.white,
height: 1.2)),
),
),
Container(
margin: EdgeInsets.only(bottom: 20),
child: Text(
"Find thousands of tourist destinations ready for you visit",
style: GoogleFonts.poppins(
textStyle:
TextStyle(fontSize: 20, color: Colors.white)),
),
),
],
),
),
image: Stack(
children: [
Container(
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/img/page2.jpg"),
fit: BoxFit.cover),
)),
Container(
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.transparent, Colors.black54],
begin: Alignment.topCenter,
end: Alignment.bottomCenter))),
],
),
decoration: PageDecoration(
fullScreen: true,
titlePadding: EdgeInsets.only(bottom: 0),
bodyFlex: 1)),
PageViewModel(
title: "",
bodyWidget: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: EdgeInsets.only(bottom: 10),
child: Image.asset("assets/img/white-traver.png",
height: 50),
),
Container(
margin: EdgeInsets.only(bottom: 10),
child: Text(
"Get ready for next trip",
style: GoogleFonts.poppins(
textStyle: TextStyle(
fontSize: 70,
color: Colors.white,
height: 1.2)),
),
),
Container(
margin: EdgeInsets.only(bottom: 20),
child: Text(
"Let's Goo, start trip",
style: GoogleFonts.poppins(
textStyle:
TextStyle(fontSize: 20, color: Colors.white)),
),
),
],
),
),
image: Stack(
children: [
Container(
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/img/page3.jpg"),
fit: BoxFit.cover),
)),
Container(
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.transparent, Colors.black54],
begin: Alignment.topCenter,
end: Alignment.bottomCenter))),
],
),
decoration: PageDecoration(
fullScreen: true,
titlePadding: EdgeInsets.only(bottom: 0),
bodyFlex: 1)),
],
showSkipButton: true,
skip: const Text("Skip", style: TextStyle(color: Colors.white)),
next: const Text("Next", style: TextStyle(color: Colors.white)),
done: const Text("Done",
style:
TextStyle(fontWeight: FontWeight.w700, color: Colors.white)),
onDone: () =>
Navigator.pushNamedAndRemoveUntil(context, '/', (route) => false),
onSkip: () =>
Navigator.pushNamedAndRemoveUntil(context, '/', (route) => false),
dotsDecorator: DotsDecorator(
size: const Size.square(10.0),
activeSize: const Size(50.0, 10.0),
activeColor: const Color.fromARGB(255, 224, 214, 214),
color: Colors.white,
spacing: const EdgeInsets.symmetric(horizontal: 3.0),
activeShape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25.0)),
),
),
),
);
}
}
Keterangan
- untuk tampilan memang tidak mirip karena masih jarang package flutter yang dapat menangani introduction screen & harus membuatnya secara menual
- widget
IntroductionScreenadalah widget yang telah kita download dari package introduction_screen yang menyediakan tampilan yang bisa di slide / di geser untuk memberikan informasi ke pengguna sebelum memulai aplikasi - di dalam widget
IntroductionScreenada beberapa properti seperti : pages: berbentukList<PageViewModel>yang merupakan kode untuk kita menempatkan tampilan introduction screenPageViewModel: Widget untuk menampilkan introduction screen yang didalamnya terdiri darititle,image,decoration,body||bodywidgetuntuk body kita bisa memilih salah satu kalau body hanya berupa text / string dan kalau body widget berupa bisa kita isi dengan widget. Dan semua pengaturan tampilan introduction screen terletak padadecoration: PageDecoration.showSkipButton: pilihan untuk menampilkan tombol skip / tidak (bersifat boolean)skip, next, done: Berisikan widget untuk mengatur fungsi skip, next dan doneonDone: sebuah proses jika sudah selesai melihat tampilan introduction screen pengguna mau diarahkan kemanaonSkip: sebuah proses yang hampir mirip dengan onDone, jika pengguna menekan tombol skip mau diarahkan kemanadotsDecorator: Pengaturan garis & titik yang berada pada introduction_screen baik itu ukuran, shape, warna, dllnya