onboarding screen added.
parent
005157fe5e
commit
c35c38aeb1
@ -0,0 +1,162 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:hmg_patient_app_new/core/app_assets.dart';
|
||||
import 'package:hmg_patient_app_new/core/utils/size_utils.dart';
|
||||
import 'package:hmg_patient_app_new/extensions/int_extensions.dart';
|
||||
import 'package:hmg_patient_app_new/extensions/string_extensions.dart';
|
||||
import 'package:hmg_patient_app_new/extensions/widget_extensions.dart';
|
||||
import 'package:hmg_patient_app_new/presentation/home/navigation_screen.dart';
|
||||
import 'package:hmg_patient_app_new/theme/colors.dart';
|
||||
import 'package:hmg_patient_app_new/widgets/buttons/custom_button.dart';
|
||||
import 'package:hmg_patient_app_new/widgets/transitions/fade_page.dart';
|
||||
import 'package:lottie/lottie.dart';
|
||||
|
||||
class OnboardingScreen extends StatefulWidget {
|
||||
OnboardingScreen({Key? key}) : super(key: key);
|
||||
|
||||
@override
|
||||
_OnboardingScreenState createState() {
|
||||
return _OnboardingScreenState();
|
||||
}
|
||||
}
|
||||
|
||||
class _OnboardingScreenState extends State<OnboardingScreen> {
|
||||
int selectedIndex = 0;
|
||||
|
||||
late PageController pageController;
|
||||
|
||||
void goToHomePage() => Navigator.of(context).pushReplacement(FadePage(page: LandingNavigation()));
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
pageController = PageController();
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
backgroundColor: AppColors.whiteColor,
|
||||
body: SafeArea(
|
||||
top: false,
|
||||
left: false,
|
||||
right: false,
|
||||
child: Column(
|
||||
spacing: 24,
|
||||
children: [
|
||||
PageView(
|
||||
controller: pageController,
|
||||
children: [
|
||||
onboardingView(
|
||||
AppAnimations.onboarding_1,
|
||||
"Booking appointment has never been easy".needTranslation,
|
||||
"In few clicks find yourself having consultation with the doctor of your choice.".needTranslation,
|
||||
),
|
||||
onboardingView(
|
||||
AppAnimations.onboarding_2,
|
||||
"Access the medical history on finger tips".needTranslation,
|
||||
"Keep track on your medical history including labs, prescription, insurance, etc".needTranslation,
|
||||
),
|
||||
],
|
||||
onPageChanged: (int index) {
|
||||
selectedIndex = index;
|
||||
setState(() {});
|
||||
},
|
||||
).expanded,
|
||||
Row(
|
||||
spacing: 4.h,
|
||||
children: [
|
||||
AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 250),
|
||||
height: 6.h,
|
||||
width: selectedIndex == 0 ? 18.h : 6.h,
|
||||
decoration: BoxDecoration(color: selectedIndex == 0 ? AppColors.textColor : AppColors.inputLabelTextColor, borderRadius: BorderRadius.circular(30)),
|
||||
),
|
||||
AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 250),
|
||||
height: 6.h,
|
||||
width: selectedIndex == 1 ? 18.h : 6.h,
|
||||
decoration: BoxDecoration(color: selectedIndex == 1 ? AppColors.textColor : AppColors.inputLabelTextColor, borderRadius: BorderRadius.circular(30)),
|
||||
),
|
||||
],
|
||||
).paddingOnly(left: 24, right: 24),
|
||||
Row(
|
||||
children: [
|
||||
AnimatedSwitcher(
|
||||
duration: const Duration(milliseconds: 250),
|
||||
transitionBuilder: (child, anim) => FadeTransition(opacity: anim, child: child),
|
||||
child: selectedIndex == 0
|
||||
? CustomButton(
|
||||
text: "Skip".needTranslation,
|
||||
onPressed: () => goToHomePage(),
|
||||
width: 86,
|
||||
backgroundColor: Color(0xffFEE9EA),
|
||||
textColor: AppColors.primaryRedColor,
|
||||
borderWidth: 0,
|
||||
borderColor: Colors.transparent,
|
||||
).paddingOnly(left: 24)
|
||||
: const SizedBox.shrink(),
|
||||
),
|
||||
const Spacer(),
|
||||
AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 400),
|
||||
curve: Curves.easeInOut,
|
||||
width: selectedIndex == 0 ? 86 : MediaQuery.of(context).size.width - 48,
|
||||
margin: EdgeInsets.only(left: 24, right: 24),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.primaryRedColor,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: AnimatedSwitcher(
|
||||
duration: const Duration(milliseconds: 250),
|
||||
transitionBuilder: (child, anim) => FadeTransition(opacity: anim, child: child),
|
||||
child: selectedIndex == 0
|
||||
? CustomButton(
|
||||
icon: AppAssets.arrow_forward,
|
||||
width: 86,
|
||||
text: "".needTranslation,
|
||||
backgroundColor: Colors.transparent,
|
||||
onPressed: () {
|
||||
pageController.animateToPage(1, duration: Duration(milliseconds: 400), curve: Curves.easeInOut);
|
||||
})
|
||||
: CustomButton(
|
||||
text: "Get Started".needTranslation,
|
||||
fontWeight: FontWeight.w500,
|
||||
fontSize: 16,
|
||||
textOverflow: TextOverflow.ellipsis,
|
||||
backgroundColor: Colors.transparent,
|
||||
onPressed: () => goToHomePage(),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget onboardingView(String icon, String heading, String body) {
|
||||
return Column(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
spacing: 12,
|
||||
children: [
|
||||
Lottie.asset(icon, repeat: true, reverse: false, frameRate: FrameRate(60), width: MediaQuery.sizeOf(context).width - 50, height: MediaQuery.sizeOf(context).width - 50),
|
||||
12.height,
|
||||
Text(
|
||||
heading,
|
||||
style: TextStyle(fontSize: 36, fontWeight: FontWeight.w600, color: AppColors.textColor, letterSpacing: -0.4, height: 1),
|
||||
),
|
||||
Text(
|
||||
body,
|
||||
style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500, color: AppColors.greyTextColor, letterSpacing: 0, height: 26 / 16),
|
||||
),
|
||||
],
|
||||
).paddingOnly(left: 24, right: 24);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue