239 lines
8.4 KiB
Dart
239 lines
8.4 KiB
Dart
import 'dart:async';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
|
import 'home_page.dart';
|
|
|
|
class OnboardingScreen extends StatefulWidget {
|
|
const OnboardingScreen({super.key});
|
|
|
|
@override
|
|
State<OnboardingScreen> createState() => _OnboardingScreenState();
|
|
}
|
|
|
|
class _OnboardingScreenState extends State<OnboardingScreen> {
|
|
final PageController _controller = PageController();
|
|
int _currentIndex = 0;
|
|
Timer? _timer;
|
|
double _imageOpacity = 0.0;
|
|
double _imageScale = 0.8;
|
|
|
|
final List<Map<String, String>> onboardingData = [
|
|
{
|
|
'title': 'Selamat datang di',
|
|
'highlight': 'ClassiFragis',
|
|
'description':
|
|
'Selamat datang di ClassiFragis! Aplikasi Identifikasi Kesegaran Stroberi yang siap mempercepat waktu Anda.',
|
|
'image': 'assets/onboard1.png',
|
|
},
|
|
{
|
|
'title': 'Mudah dengan menggunakan',
|
|
'highlight': 'Android',
|
|
'description':
|
|
'Di sini Kamu dapat merasakan kemudahan dalam mengidentifikasi stroberi dengan menggunakan kamera Android langsung tanpa harus ribet.',
|
|
'image': 'assets/onboard2.png',
|
|
},
|
|
{
|
|
'title': 'Mendapatkan hasil yang cukup',
|
|
'highlight': 'Akurat',
|
|
'description':
|
|
'Dengan menggunakan aplikasi ini, Anda dapat dengan mudah memperoleh hasil yang cukup Akurat.',
|
|
'image': 'assets/onboard3.png',
|
|
},
|
|
];
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_startAutoSlide();
|
|
_animateImage();
|
|
}
|
|
|
|
void _startAutoSlide() {
|
|
_timer = Timer.periodic(const Duration(seconds: 3), (timer) {
|
|
if (_currentIndex < onboardingData.length - 1) {
|
|
_currentIndex++;
|
|
} else {
|
|
_currentIndex = 0;
|
|
}
|
|
_controller.animateToPage(
|
|
_currentIndex,
|
|
duration: const Duration(milliseconds: 500),
|
|
curve: Curves.easeInOut,
|
|
);
|
|
});
|
|
}
|
|
|
|
void _animateImage() {
|
|
setState(() {
|
|
_imageOpacity = 0.0;
|
|
_imageScale = 0.8;
|
|
});
|
|
Future.delayed(const Duration(milliseconds: 100), () {
|
|
setState(() {
|
|
_imageOpacity = 1.0;
|
|
_imageScale = 1.0;
|
|
});
|
|
});
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_timer?.cancel();
|
|
_controller.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
backgroundColor: Colors.white, // Latar belakang putih
|
|
body: ScreenUtilInit(
|
|
designSize: const Size(375, 812),
|
|
builder: (context, child) {
|
|
return Column(
|
|
children: [
|
|
Expanded(
|
|
child: PageView.builder(
|
|
controller: _controller,
|
|
itemCount: onboardingData.length,
|
|
onPageChanged: (index) {
|
|
setState(() {
|
|
_currentIndex = index;
|
|
});
|
|
_animateImage(); // Animasi ulang saat halaman berubah
|
|
},
|
|
itemBuilder: (context, index) {
|
|
final data = onboardingData[index];
|
|
return Padding(
|
|
padding: EdgeInsets.symmetric(horizontal: 20.w),
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
children: [
|
|
Text(
|
|
data['title']!,
|
|
textAlign: TextAlign.center,
|
|
style: TextStyle(
|
|
fontSize: 22.sp,
|
|
fontWeight: FontWeight.w500,
|
|
color: Colors.black87,
|
|
shadows: const [
|
|
Shadow(
|
|
blurRadius: 5.0,
|
|
color: Colors.black12,
|
|
offset: Offset(1.0, 1.0),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
SizedBox(height: 5.h),
|
|
Text(
|
|
data['highlight']!,
|
|
textAlign: TextAlign.center,
|
|
style: TextStyle(
|
|
fontSize: 26.sp,
|
|
fontWeight: FontWeight.bold,
|
|
color: const Color(0xFF891A2D),
|
|
shadows: const [
|
|
Shadow(
|
|
blurRadius: 5.0,
|
|
color: Colors.black12,
|
|
offset: Offset(1.0, 1.0),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
SizedBox(height: 30.h),
|
|
AnimatedOpacity(
|
|
opacity: _imageOpacity,
|
|
duration: const Duration(milliseconds: 500),
|
|
child: AnimatedScale(
|
|
scale: _imageScale,
|
|
duration: const Duration(milliseconds: 500),
|
|
curve: Curves.easeOutBack,
|
|
child: Image.asset(
|
|
data['image']!,
|
|
height: 300.h,
|
|
),
|
|
),
|
|
),
|
|
SizedBox(height: 30.h),
|
|
Padding(
|
|
padding: EdgeInsets.symmetric(horizontal: 20.w),
|
|
child: Text(
|
|
data['description']!,
|
|
textAlign: TextAlign.center,
|
|
style: TextStyle(
|
|
fontSize: 16.sp,
|
|
color: Colors.black87,
|
|
height: 1.5,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: List.generate(
|
|
onboardingData.length,
|
|
(index) => AnimatedContainer(
|
|
duration: const Duration(milliseconds: 300),
|
|
margin: EdgeInsets.symmetric(horizontal: 5.w),
|
|
width: _currentIndex == index ? 24.w : 10.w,
|
|
height: 10.h,
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(5.r),
|
|
color: _currentIndex == index
|
|
? const Color(0xFF891A2D)
|
|
: Colors.grey[300],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
SizedBox(height: 30.h),
|
|
Padding(
|
|
padding: EdgeInsets.symmetric(horizontal: 20.w, vertical: 15.h),
|
|
child: ElevatedButton(
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: const Color(0xFF891A2D),
|
|
foregroundColor: Colors.white.withOpacity(0.1),
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(15.r),
|
|
),
|
|
padding: EdgeInsets.symmetric(vertical: 16.h),
|
|
elevation: 5,
|
|
shadowColor: Colors.black26,
|
|
),
|
|
onPressed: () {
|
|
_timer?.cancel();
|
|
Navigator.pushReplacement(
|
|
context,
|
|
MaterialPageRoute(builder: (context) => const HomePage()),
|
|
);
|
|
},
|
|
child: Center(
|
|
child: Text(
|
|
'Mulai',
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 18.sp,
|
|
fontWeight: FontWeight.bold,
|
|
letterSpacing: 0.5,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
SizedBox(height: 30.h),
|
|
],
|
|
);
|
|
},
|
|
),
|
|
);
|
|
}
|
|
}
|