first commit
This commit is contained in:
Anbarasu
272
lib/view/intro_view/intro_screen_view.dart
Normal file
272
lib/view/intro_view/intro_screen_view.dart
Normal file
@@ -0,0 +1,272 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:get/get.dart';
|
||||
import '../../controllers/intro_controller/intro_screen_controller.dart';
|
||||
|
||||
class IntroScreenView extends StatelessWidget {
|
||||
IntroScreenView({super.key});
|
||||
|
||||
final IntroScreenController controller = Get.find<IntroScreenController>();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return GetBuilder<IntroScreenController>(
|
||||
builder: (controller) {
|
||||
return Scaffold(
|
||||
backgroundColor: Colors.white,
|
||||
body: SafeArea(
|
||||
top: false,
|
||||
child: Stack(
|
||||
children: [
|
||||
PageView.builder(
|
||||
controller: controller.pageController,
|
||||
onPageChanged: controller.onPageChanged,
|
||||
itemCount: controller.slides.length,
|
||||
itemBuilder: (context, index) {
|
||||
return _IntroPage(slide: controller.slides[index]);
|
||||
},
|
||||
),
|
||||
// Bottom Controls
|
||||
Positioned(
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
child: _BottomControls(controller: controller),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _IntroPage extends StatelessWidget {
|
||||
final IntroSlide slide;
|
||||
const _IntroPage({required this.slide});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final size = MediaQuery.of(context).size;
|
||||
|
||||
return Column(
|
||||
children: [
|
||||
// Image Section with organic shape background
|
||||
Expanded(
|
||||
flex: 6,
|
||||
child: Stack(
|
||||
children: [
|
||||
// Background blob
|
||||
Positioned.fill(
|
||||
child: CustomPaint(
|
||||
painter: _BlobPainter(color: slide.bgColor),
|
||||
),
|
||||
),
|
||||
// Decorative circles
|
||||
Positioned(
|
||||
top: 60,
|
||||
right: 30,
|
||||
child: _FloatingCircle(size: 20, color: slide.accentColor.withOpacity(0.5)),
|
||||
),
|
||||
Positioned(
|
||||
top: 120,
|
||||
left: 20,
|
||||
child: _FloatingCircle(size: 12, color: slide.accentColor.withOpacity(0.35)),
|
||||
),
|
||||
Positioned(
|
||||
bottom: 80,
|
||||
right: 50,
|
||||
child: _FloatingCircle(size: 16, color: slide.bgColor.withOpacity(0.8)),
|
||||
),
|
||||
// Main image
|
||||
Center(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(top: 60, bottom: 20),
|
||||
child: Hero(
|
||||
tag: slide.imageAsset,
|
||||
child: Image.asset(
|
||||
slide.imageAsset,
|
||||
height: size.height * 0.38,
|
||||
fit: BoxFit.contain,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
// Text Section
|
||||
Expanded(
|
||||
flex: 4,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.fromLTRB(32, 24, 32, 100),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Accent chip
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 5),
|
||||
decoration: BoxDecoration(
|
||||
color: slide.accentColor.withOpacity(0.12),
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
),
|
||||
child: Text(
|
||||
slide.chipLabel,
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: slide.accentColor,
|
||||
letterSpacing: 0.8,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 14),
|
||||
Text(
|
||||
slide.title,
|
||||
style: const TextStyle(
|
||||
fontSize: 28,
|
||||
fontWeight: FontWeight.w800,
|
||||
color: Color(0xFF1A1A2E),
|
||||
height: 1.2,
|
||||
letterSpacing: -0.5,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
Text(
|
||||
slide.description,
|
||||
style: const TextStyle(
|
||||
fontSize: 15,
|
||||
color: Color(0xFF6B7280),
|
||||
height: 1.6,
|
||||
fontWeight: FontWeight.w400,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _BottomControls extends StatelessWidget {
|
||||
final IntroScreenController controller;
|
||||
const _BottomControls({required this.controller});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.fromLTRB(28, 16, 28, 36),
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topCenter,
|
||||
end: Alignment.bottomCenter,
|
||||
colors: [Colors.white.withOpacity(0), Colors.white, Colors.white],
|
||||
stops: const [0, 0.3, 1],
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
// Page indicators
|
||||
Row(
|
||||
children: List.generate(
|
||||
controller.slides.length,
|
||||
(index) => AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 300),
|
||||
curve: Curves.easeInOut,
|
||||
margin: const EdgeInsets.only(right: 6),
|
||||
height: 8,
|
||||
width: controller.currentPage == index ? 24 : 8,
|
||||
decoration: BoxDecoration(
|
||||
color: controller.currentPage == index
|
||||
? controller.slides[controller.currentPage].accentColor
|
||||
: const Color(0xFFD1D5DB),
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
// Action button
|
||||
GestureDetector(
|
||||
onTap: controller.isLastPage ? controller.onDonePress : controller.nextPage,
|
||||
child: AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 300),
|
||||
width: controller.isLastPage ? 140 : 56,
|
||||
height: 56,
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
colors: [
|
||||
controller.slides[controller.currentPage].accentColor,
|
||||
controller.slides[controller.currentPage].accentColor.withGreen(
|
||||
(controller.slides[controller.currentPage].accentColor.green + 30).clamp(0, 255),
|
||||
),
|
||||
],
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(28),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: controller.slides[controller.currentPage].accentColor.withOpacity(0.35),
|
||||
blurRadius: 16,
|
||||
offset: const Offset(0, 6),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: controller.isLastPage
|
||||
? const Center(
|
||||
child: Text(
|
||||
"Get Started",
|
||||
style: TextStyle(
|
||||
color: Colors.white,
|
||||
fontWeight: FontWeight.w700,
|
||||
fontSize: 15,
|
||||
),
|
||||
),
|
||||
)
|
||||
: const Icon(Icons.arrow_forward_rounded, color: Colors.white, size: 24),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _FloatingCircle extends StatelessWidget {
|
||||
final double size;
|
||||
final Color color;
|
||||
const _FloatingCircle({required this.size, required this.color});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
width: size,
|
||||
height: size,
|
||||
decoration: BoxDecoration(color: color, shape: BoxShape.circle),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _BlobPainter extends CustomPainter {
|
||||
final Color color;
|
||||
_BlobPainter({required this.color});
|
||||
|
||||
@override
|
||||
void paint(Canvas canvas, Size size) {
|
||||
final paint = Paint()..color = color;
|
||||
final path = Path();
|
||||
path.moveTo(0, 0);
|
||||
path.lineTo(size.width, 0);
|
||||
path.lineTo(size.width, size.height * 0.75);
|
||||
path.quadraticBezierTo(size.width * 0.75, size.height * 0.95, size.width * 0.5, size.height * 0.88);
|
||||
path.quadraticBezierTo(size.width * 0.25, size.height * 0.80, 0, size.height * 0.92);
|
||||
path.close();
|
||||
canvas.drawPath(path, paint);
|
||||
}
|
||||
|
||||
@override
|
||||
bool shouldRepaint(_BlobPainter oldDelegate) => oldDelegate.color != color;
|
||||
}
|
||||
Reference in New Issue
Block a user