Assalamu'alaikum Warahmatullahi Wabarokatu
Kembali lagi di blog saya. Kali ini saya akan membahas tentng pembuatan OnBoarding dengan menggunakan flutter.
Untuk Onboarding tentunya kita membutuhkan aplikasi pendukung. Disini saya menggunakan Android studio yang sudah saya terinstal plugin flutter dan dart. Sebelum itu saya akan membahas apa itu Onboarding Screen.
Onboarding screen adalah suatu tampilan atau antarmuka yang muncul saat pertama kali pengguna membuka atau meluncurkan aplikasi atau platform baru. Tujuan dari onboarding screen adalah untuk memperkenalkan pengguna terhadap fitur-fitur utama, fungsi, dan navigasi aplikasi tersebut, serta membantu pengguna merasa nyaman dan siap untuk mulai menggunakan aplikasi dengan baik
Biasanya, onboarding screen terdiri dari beberapa langkah atau slide yang menunjukkan gambar, teks, atau media lainnya yang menjelaskan cara menggunakan aplikasi atau memberikan informasi yang berguna.Beberapa hal yang biasanya ditampilkan di onboarding screen meliputi:
- Selamat Datang
- Fitur Utama
- Navigasi
- Tutorial
- Keuntungan
1. Program main.dart
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:introduction_screen/introduction_screen.dart';
int introduction = 0;
void main() async {
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle.dark.copyWith(statusBarColor: Colors.transparent)
);
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: const MyHomePage(title: 'Introduction'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
const pageDecoration = const PageDecoration(
titleTextStyle: TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
bodyTextStyle: TextStyle(fontSize: 19),
bodyPadding: EdgeInsets.all(16),
);
return IntroductionScreen(
globalBackgroundColor: Colors.white,
pages: [
PageViewModel(
title: 'Franctional shares',
body:'Instead of having to buy an entire share, invest any amount you want.',
image: Image(image: AssetImage("assets/images/Vector4.jpeg"), width: 350,),
decoration: pageDecoration
),
PageViewModel(
title: 'Learn as you go',
body:'Download the Stockpile app and master the market with our mini-lesson.',
image: Image(image: AssetImage("assets/images/Vector1.jpeg"), width: 350,),
decoration: pageDecoration
),
PageViewModel(
title: 'Kids and teens',
body:'Kids and teens can track their stocks 24/7 and place trades that you approve.',
image: Image(image: AssetImage("assets/images/Vector3.jpeg"), width: 350,),
decoration: pageDecoration,
footer: ElevatedButton(
onPressed: (){ Navigator.pushReplacement(context, MaterialPageRoute(builder: (builder){
return DashboardScreen();
}));},
child: Text('Get Started'))
),
],
onDone: (){
Navigator.pushReplacement(context, MaterialPageRoute(builder: (builder){
return DashboardScreen();
}));
},
showSkipButton: true,
showNextButton: true,
showDoneButton: true,
showBackButton: false,
dotsFlex: 3,
nextFlex: 1,
skipOrBackFlex: 1,
back: Icon(Icons.arrow_back),
skip: Text('Skip', style: TextStyle(fontWeight: FontWeight.bold),),
next: Icon(Icons.arrow_forward),
done: Text('Done', style: TextStyle(fontWeight: FontWeight.bold),),
dotsDecorator: DotsDecorator(
size: Size(10, 10),
color: Colors.grey,
activeSize: Size(22,10),
activeShape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(25))),
),
);
}
}
class DashboardScreen extends StatefulWidget {
const DashboardScreen({Key? key}) : super(key: key);
@override
State<DashboardScreen> createState() => _DashboardScreenState();
}
class _DashboardScreenState extends State<DashboardScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Dashboard'),
),
);
}
}
2. Tambahkan program berikut di pubspec.yaml
Itulah materi singkat dari saya,sekian dan terima kasih Wassalamu'alaikum warahmatullahi wabarokatu.
Komentar
Posting Komentar