From 55c185ab033d06d6f11049a9f41fc1dd6c850c5c Mon Sep 17 00:00:00 2001 From: jordyhers Date: Sun, 11 Jun 2023 21:09:11 +0200 Subject: [PATCH 1/6] chore(#11) : refactor splash screen by adding icons and removed svg files --- lib/app/splash/splash_content.dart | 42 +++--- lib/app/splash/splash_screen.dart | 228 ++++++++++++++--------------- lib/sign_in/sign_in_page.dart | 5 +- 3 files changed, 131 insertions(+), 144 deletions(-) diff --git a/lib/app/splash/splash_content.dart b/lib/app/splash/splash_content.dart index cad5541..49a851b 100644 --- a/lib/app/splash/splash_content.dart +++ b/lib/app/splash/splash_content.dart @@ -1,31 +1,33 @@ import 'package:flutter/material.dart'; import 'package:parental_control/common_widgets/autosize_text.dart'; -import 'package:parental_control/common_widgets/size_config.dart'; import 'package:parental_control/theme/theme.dart'; class SplashContent extends StatelessWidget { const SplashContent({ Key? key, + required this.title, required this.text, - required this.image, + required this.icon, }) : super(key: key); - final String text, image; + final String text, title; + final IconData icon; @override Widget build(BuildContext context) { return Column( - mainAxisAlignment: MainAxisAlignment.spaceAround, - crossAxisAlignment: CrossAxisAlignment.stretch, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.center, children: [ Padding( padding: const EdgeInsets.symmetric( horizontal: 10.0, + vertical: 40, ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ DisplayText( - text: "Time's Up", + text: title, fontSize: 35, style: TextStyle( color: CustomColors.indigoDark, @@ -33,25 +35,25 @@ class SplashContent extends StatelessWidget { ), ), SizedBox(height: 8), - Container( - width: MediaQuery.of(context).size.width / 1.5, - child: DisplayText( - text: text, - style: TextStyle( - color: Colors.black.withOpacity(0.5), - fontWeight: FontWeight.w500, - height: 1.5, - ), + DisplayText( + text: text, + fontSize: 17, + style: TextStyle( + color: Colors.black.withOpacity(0.5), + fontWeight: FontWeight.w500, + height: 1.5, + ), + ), + SizedBox(height: 20), + Center( + child: Icon( + icon, + size: 250, ), ), ], ), ), - Image.asset( - image, - height: getProportionateScreenHeight(150), - width: getProportionateScreenWidth(135), - ), ], ); } diff --git a/lib/app/splash/splash_screen.dart b/lib/app/splash/splash_screen.dart index 9906bbe..defcfdd 100644 --- a/lib/app/splash/splash_screen.dart +++ b/lib/app/splash/splash_screen.dart @@ -22,147 +22,97 @@ class SplashScreen extends StatefulWidget { class _SplashScreenState extends State { int currentPage = 0; - List> splashData = [ + List> splashData = [ { - 'text': 'The perfect tool to control apps and monitor the time\n' - 'Your kids spend on screen. Easy to use ! \n' - 'Start by setting up your device then set up\n your kid\'s phone', - 'image': 'images/png/undraw_1.png' + 'text': 'The perfect tool to control apps and monitor the time ' + 'Your kids spend on screen. Easy to use ! ' + 'Start by setting up your device then set up your kid\'s phone', + 'title': 'Times Up', + 'icon': Icons.dashboard_customize_outlined, }, { - 'text': 'Send notifications to your child when time \n ' - ' limit is reached or when\n he has to go to bed. ', - 'image': 'images/png/undraw4.png' + 'text': 'Send notifications to your child when time ' + ' limit is reached or when he has to go to bed. ', + 'title': 'Control', + 'icon': Icons.lock_reset, }, { - 'text': "Because we care, Let's live track their location \nand see on " + 'text': "Because we care, Let's live track their location and see on " 'the map where your child is.', - 'image': 'images/png/undraw3.png' + 'title': 'Track Location', + 'icon': Icons.location_history, }, ]; @override Widget build(BuildContext context) { - // You have to call it on your starting screen SizeConfig().init(context); return SafeArea( child: Scaffold( - body: Container( - decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.all(Radius.circular(8)), - ), - width: double.infinity, - child: Column( - children: [ - Expanded( - flex: 3, - child: PageView.builder( - physics: BouncingScrollPhysics(), - onPageChanged: (value) { - setState(() { - currentPage = value; - }); - }, - itemCount: splashData.length, - itemBuilder: (context, index) => SplashContent( - image: splashData[index]['image']!, - text: splashData[index]['text']!, - ), + body: Column( + children: [ + Expanded( + flex: 3, + child: PageView.builder( + physics: BouncingScrollPhysics(), + onPageChanged: (value) { + setState(() { + currentPage = value; + }); + }, + itemCount: splashData.length, + itemBuilder: (context, index) => SplashContent( + text: splashData[index]['text']!, + title: splashData[index]['title']!, + icon: splashData[index]['icon']!, ), ), - Expanded( - flex: 1, - child: Padding( - padding: EdgeInsets.symmetric( - horizontal: getProportionateScreenWidth(20), + ), + Expanded( + flex: 1, + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + SideButton( + color: Theme.of(context).primaryColor, + title: 'Parent device'.toUpperCase(), + onPress: () { + SharedPreference().setVisitingFlag(); + SharedPreference().setParentDevice(); + Navigator.of(context).pushReplacement( + CupertinoPageRoute( + builder: (context) => LandingPage(), + ), + ); + }, ), - child: Column( - children: [ - Spacer(flex: 3), - Row( - mainAxisAlignment: MainAxisAlignment.spaceEvenly, - children: [ - Container( - height: 40, - child: ElevatedButton( - style: ButtonStyle( - backgroundColor: - MaterialStateProperty.all( - Theme.of(context).primaryColor, - ), - ), - onPressed: () { - SharedPreference().setVisitingFlag(); - SharedPreference().setParentDevice(); - debugPrint( - 'The page is set to Parent => now moving ..', - ); - Navigator.of(context).pushReplacement( - CupertinoPageRoute( - builder: (context) => LandingPage(), - ), - ); - }, - child: Text( - 'Parent device'.toUpperCase(), - style: TextStyle( - fontSize: getProportionateScreenWidth(10), - color: Colors.white, - ), - ), - ), - ), - - ///------------------------------------ - Container( - height: 40, - child: ElevatedButton( - style: ButtonStyle( - backgroundColor: - MaterialStateProperty.all( - CustomColors.greenPrimary, - ), - ), - onPressed: () { - SharedPreference().setVisitingFlag(); - SharedPreference().setChildDevice(); - - debugPrint( - 'The page is set to Child => now moving ....', - ); - Navigator.of(context).pushReplacement( - CupertinoPageRoute( - builder: (context) => LandingPage(), - ), - ); - }, - child: Text( - ' Child device'.toUpperCase(), - style: TextStyle( - fontSize: getProportionateScreenWidth(10), - color: Colors.white, - ), - ), - ), - ), - ], - ), - Spacer(flex: 1), - Row( - mainAxisAlignment: MainAxisAlignment.center, - children: List.generate( - splashData.length, - (index) => buildDot(index: index), + SizedBox(height: 8), + SideButton( + color: CustomColors.greenPrimary, + title: ' Child device'.toUpperCase(), + onPress: () { + SharedPreference().setVisitingFlag(); + SharedPreference().setChildDevice(); + Navigator.of(context).pushReplacement( + CupertinoPageRoute( + builder: (context) => LandingPage(), ), - ), - Spacer(), - ], + ); + }, ), - ), + Spacer(flex: 1), + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: List.generate( + splashData.length, + (index) => buildDot(index: index), + ), + ), + Spacer(), + ], ), - ], - ), + ), + ], ), ), ); @@ -183,3 +133,39 @@ class _SplashScreenState extends State { ); } } + +class SideButton extends StatelessWidget { + final Color color; + final Function() onPress; + final String title; + const SideButton({ + Key? key, + required this.color, + required this.onPress, + required this.title, + }) : super(key: key); + + @override + Widget build(BuildContext context) { + return Center( + child: OutlinedButton( + style: OutlinedButton.styleFrom( + backgroundColor: color, + side: BorderSide(width: 1.5, color: Colors.transparent), + minimumSize: Size( + MediaQuery.of(context).size.width * 0.95, + SizeConfig.screenHeight! * 0.07, + ), + ), + onPressed: onPress, + child: Text( + title, + style: TextStyle( + fontSize: getProportionateScreenWidth(11), + color: Colors.white, + ), + ), + ), + ); + } +} diff --git a/lib/sign_in/sign_in_page.dart b/lib/sign_in/sign_in_page.dart index 739a6e1..aa76407 100644 --- a/lib/sign_in/sign_in_page.dart +++ b/lib/sign_in/sign_in_page.dart @@ -1,12 +1,11 @@ import 'package:firebase_auth/firebase_auth.dart'; import 'package:flutter/material.dart'; import 'package:parental_control/common_widgets/show_exeption_alert.dart'; -import 'package:parental_control/utils/constants.dart'; import 'package:parental_control/services/auth.dart'; import 'package:parental_control/sign_in/sign_in_button.dart'; import 'package:parental_control/sign_in/sign_in_manager.dart'; import 'package:parental_control/sign_in/social_sign_in_button.dart'; -import 'package:parental_control/theme/theme.dart'; +import 'package:parental_control/utils/constants.dart'; import 'package:provider/provider.dart'; import 'email_sign_in_page.dart'; @@ -98,7 +97,7 @@ class SignInPage extends StatelessWidget { Widget _buildContent(BuildContext context) { return Container( - decoration: BoxDecoration(color: CustomColors.indigoLight), + decoration: BoxDecoration(color: Colors.white), child: Padding( padding: EdgeInsets.all(16.0), child: Column( From e6a1a81643dc3f1e2ab533ca4e276b04d55cf0af Mon Sep 17 00:00:00 2001 From: jordyhers Date: Sun, 11 Jun 2023 21:13:59 +0200 Subject: [PATCH 2/6] chore(#11) : adds space and improve text --- lib/app/splash/splash_content.dart | 4 ++-- lib/app/splash/splash_screen.dart | 4 +++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/lib/app/splash/splash_content.dart b/lib/app/splash/splash_content.dart index 49a851b..62343db 100644 --- a/lib/app/splash/splash_content.dart +++ b/lib/app/splash/splash_content.dart @@ -34,7 +34,7 @@ class SplashContent extends StatelessWidget { fontWeight: FontWeight.w800, ), ), - SizedBox(height: 8), + SizedBox(height: 20), DisplayText( text: text, fontSize: 17, @@ -44,7 +44,7 @@ class SplashContent extends StatelessWidget { height: 1.5, ), ), - SizedBox(height: 20), + SizedBox(height: 50), Center( child: Icon( icon, diff --git a/lib/app/splash/splash_screen.dart b/lib/app/splash/splash_screen.dart index defcfdd..15e07e5 100644 --- a/lib/app/splash/splash_screen.dart +++ b/lib/app/splash/splash_screen.dart @@ -32,7 +32,9 @@ class _SplashScreenState extends State { }, { 'text': 'Send notifications to your child when time ' - ' limit is reached or when he has to go to bed. ', + ' limit is reached or when he has to go to bed. Explore more about' + ' controls ' + 'in the dashboard section. ', 'title': 'Control', 'icon': Icons.lock_reset, }, From 87a1baafe4b24d62978b6b4ef72f029180dc494a Mon Sep 17 00:00:00 2001 From: jordyhers Date: Mon, 12 Jun 2023 09:10:54 +0200 Subject: [PATCH 3/6] chore(#11) : add animation effect --- lib/app/splash/splash_content.dart | 236 ++++++++++++++++++++++++----- lib/app/splash/splash_screen.dart | 20 ++- 2 files changed, 206 insertions(+), 50 deletions(-) diff --git a/lib/app/splash/splash_content.dart b/lib/app/splash/splash_content.dart index 62343db..d4da18d 100644 --- a/lib/app/splash/splash_content.dart +++ b/lib/app/splash/splash_content.dart @@ -2,59 +2,211 @@ import 'package:flutter/material.dart'; import 'package:parental_control/common_widgets/autosize_text.dart'; import 'package:parental_control/theme/theme.dart'; -class SplashContent extends StatelessWidget { +class SplashContent extends StatefulWidget { + final String text, title; + final IconData icon; + const SplashContent({ Key? key, - required this.title, required this.text, + required this.title, required this.icon, }) : super(key: key); - final String text, title; - final IconData icon; + @override + _SplashContentState createState() => _SplashContentState(); +} + +class _SplashContentState extends State + with SingleTickerProviderStateMixin { + late AnimationController _animationController; + late Animation _slideAnimation; + + @override + void initState() { + super.initState(); + _animationController = AnimationController( + duration: const Duration(seconds: 1), + vsync: this, + ); + + _slideAnimation = Tween( + begin: Offset(0, 1), + end: Offset.zero, + ).animate(CurvedAnimation( + parent: _animationController, + curve: Curves.easeInOut, + )); + + _animationController.forward(); + } + + @override + void dispose() { + _animationController.dispose(); + super.dispose(); + } @override Widget build(BuildContext context) { - return Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - Padding( - padding: const EdgeInsets.symmetric( - horizontal: 10.0, - vertical: 40, - ), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - DisplayText( - text: title, - fontSize: 35, - style: TextStyle( - color: CustomColors.indigoDark, - fontWeight: FontWeight.w800, - ), - ), - SizedBox(height: 20), - DisplayText( - text: text, - fontSize: 17, - style: TextStyle( - color: Colors.black.withOpacity(0.5), - fontWeight: FontWeight.w500, - height: 1.5, - ), - ), - SizedBox(height: 50), - Center( - child: Icon( - icon, - size: 250, - ), + return Container( + padding: const EdgeInsets.all(16), + child: Stack( + children: [ + Positioned.fill( + child: SingleChildScrollView( + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Padding( + padding: const EdgeInsets.symmetric( + horizontal: 10.0, + vertical: 40, + ), + child: Column( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Center( + child: Icon( + widget.icon, + size: 260, + ), + ), + SizedBox(height: 20), + _SlideText( + slideAnimation: _slideAnimation, + delay: Duration(milliseconds: 200), + child: DisplayText( + text: widget.title, + fontSize: 25, + style: TextStyle( + color: CustomColors.indigoDark, + fontWeight: FontWeight.w800, + ), + ), + ), + SizedBox(height: 20), + _SlideText( + slideAnimation: _slideAnimation, + delay: Duration(milliseconds: 300), + child: Container( + margin: EdgeInsets.symmetric(horizontal: 20), + child: DisplayText( + text: widget.text, + fontSize: 17, + style: TextStyle( + color: Colors.black.withOpacity(0.5), + fontWeight: FontWeight.w400, + height: 1.2, + ), + ), + ), + ), + ], + ), + ), + ], ), - ], + ), + ), + ], + ), + ); + } +} + +class _SlideText extends StatelessWidget { + final Widget? child; + final Animation? slideAnimation; + final Duration? delay; + + const _SlideText({ + Key? key, + this.child, + this.slideAnimation, + this.delay, + }) : super(key: key); + + @override + Widget build(BuildContext context) { + return AnimatedPositioned( + duration: const Duration(milliseconds: 300), + curve: Curves.easeInOut, + left: 0, + right: 0, + top: 0, + bottom: 0, + child: SlideTransition( + position: slideAnimation!, + child: _DelayedDisplay( + delay: delay!, + child: Transform.translate( + offset: Offset(0, 90), + child: child, ), ), - ], + ), + ); + } +} + +class _DelayedDisplay extends StatefulWidget { + final Widget child; + final Duration delay; + + const _DelayedDisplay({ + Key? key, + required this.child, + required this.delay, + }) : super(key: key); + + @override + _DelayedDisplayState createState() => _DelayedDisplayState(); +} + +class _DelayedDisplayState extends State<_DelayedDisplay> + with SingleTickerProviderStateMixin { + late AnimationController _animationController; + late Animation _animation; + + @override + void initState() { + super.initState(); + _animationController = AnimationController( + duration: const Duration(milliseconds: 500), + vsync: this, + ); + + _animation = Tween(begin: 0, end: 1).animate( + CurvedAnimation( + parent: _animationController, + curve: Curves.easeInOut, + ), + ); + + _animationController.forward(); + } + + @override + void dispose() { + _animationController.dispose(); + super.dispose(); + } + + @override + Widget build(BuildContext context) { + return FadeTransition( + opacity: _animation, + child: AnimatedBuilder( + animation: _animation, + builder: (context, child) { + return Visibility( + visible: _animation.value != 0, + child: child!, + ); + }, + child: widget.child, + ), ); } } diff --git a/lib/app/splash/splash_screen.dart b/lib/app/splash/splash_screen.dart index 15e07e5..cb3efc3 100644 --- a/lib/app/splash/splash_screen.dart +++ b/lib/app/splash/splash_screen.dart @@ -23,25 +23,29 @@ class _SplashScreenState extends State { int currentPage = 0; List> splashData = [ + { + 'text': + "Time's Up is your solution to monitor the time your kids spend on " + 'screen.', + 'title': 'Get your new companion', + 'icon': Icons.family_restroom, + }, { 'text': 'The perfect tool to control apps and monitor the time ' - 'Your kids spend on screen. Easy to use ! ' - 'Start by setting up your device then set up your kid\'s phone', - 'title': 'Times Up', + 'Your kids spend on screen.', + 'title': 'Get insightful dashboard', 'icon': Icons.dashboard_customize_outlined, }, { 'text': 'Send notifications to your child when time ' - ' limit is reached or when he has to go to bed. Explore more about' - ' controls ' - 'in the dashboard section. ', - 'title': 'Control', + ' limit is reached or when he has to go to bed.', + 'title': 'Learn to Control and Monitor', 'icon': Icons.lock_reset, }, { 'text': "Because we care, Let's live track their location and see on " 'the map where your child is.', - 'title': 'Track Location', + 'title': 'Get to track their Location', 'icon': Icons.location_history, }, ]; From 64f836ec49af767e1ebdfe67d3d77fcba245d3ad Mon Sep 17 00:00:00 2001 From: jordyhers Date: Mon, 12 Jun 2023 09:37:06 +0200 Subject: [PATCH 4/6] chore(#11) : add missing comma --- lib/app/splash/splash_content.dart | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/lib/app/splash/splash_content.dart b/lib/app/splash/splash_content.dart index d4da18d..143796d 100644 --- a/lib/app/splash/splash_content.dart +++ b/lib/app/splash/splash_content.dart @@ -32,10 +32,12 @@ class _SplashContentState extends State _slideAnimation = Tween( begin: Offset(0, 1), end: Offset.zero, - ).animate(CurvedAnimation( - parent: _animationController, - curve: Curves.easeInOut, - )); + ).animate( + CurvedAnimation( + parent: _animationController, + curve: Curves.easeInOut, + ), + ); _animationController.forward(); } From b21ffb737475ee17fc5838248de1e467d597b943 Mon Sep 17 00:00:00 2001 From: jordyhers Date: Mon, 12 Jun 2023 09:40:27 +0200 Subject: [PATCH 5/6] chore(#11) : increase margin --- lib/app/splash/splash_content.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/app/splash/splash_content.dart b/lib/app/splash/splash_content.dart index 143796d..b8e3b4b 100644 --- a/lib/app/splash/splash_content.dart +++ b/lib/app/splash/splash_content.dart @@ -92,7 +92,7 @@ class _SplashContentState extends State slideAnimation: _slideAnimation, delay: Duration(milliseconds: 300), child: Container( - margin: EdgeInsets.symmetric(horizontal: 20), + margin: EdgeInsets.symmetric(horizontal: 40), child: DisplayText( text: widget.text, fontSize: 17, From f94cc1882174d24fb32208cb49ab341fa9c3363b Mon Sep 17 00:00:00 2001 From: jordyhers Date: Mon, 12 Jun 2023 17:33:25 +0200 Subject: [PATCH 6/6] chore(#11) : removed unnecessary widgets --- lib/app/splash/splash_content.dart | 103 +++++++++++++---------------- 1 file changed, 47 insertions(+), 56 deletions(-) diff --git a/lib/app/splash/splash_content.dart b/lib/app/splash/splash_content.dart index b8e3b4b..a43caaa 100644 --- a/lib/app/splash/splash_content.dart +++ b/lib/app/splash/splash_content.dart @@ -50,65 +50,56 @@ class _SplashContentState extends State @override Widget build(BuildContext context) { - return Container( - padding: const EdgeInsets.all(16), - child: Stack( - children: [ - Positioned.fill( - child: SingleChildScrollView( - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - Padding( - padding: const EdgeInsets.symmetric( - horizontal: 10.0, - vertical: 40, + return SingleChildScrollView( + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Padding( + padding: const EdgeInsets.symmetric( + horizontal: 10.0, + vertical: 40, + ), + child: Column( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Center( + child: Icon( + widget.icon, + size: 260, + ), + ), + SizedBox(height: 20), + _SlideText( + slideAnimation: _slideAnimation, + delay: Duration(milliseconds: 200), + child: DisplayText( + text: widget.title, + fontSize: 25, + style: TextStyle( + color: CustomColors.indigoDark, + fontWeight: FontWeight.w800, ), - child: Column( - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - Center( - child: Icon( - widget.icon, - size: 260, - ), - ), - SizedBox(height: 20), - _SlideText( - slideAnimation: _slideAnimation, - delay: Duration(milliseconds: 200), - child: DisplayText( - text: widget.title, - fontSize: 25, - style: TextStyle( - color: CustomColors.indigoDark, - fontWeight: FontWeight.w800, - ), - ), - ), - SizedBox(height: 20), - _SlideText( - slideAnimation: _slideAnimation, - delay: Duration(milliseconds: 300), - child: Container( - margin: EdgeInsets.symmetric(horizontal: 40), - child: DisplayText( - text: widget.text, - fontSize: 17, - style: TextStyle( - color: Colors.black.withOpacity(0.5), - fontWeight: FontWeight.w400, - height: 1.2, - ), - ), - ), - ), - ], + ), + ), + SizedBox(height: 20), + _SlideText( + slideAnimation: _slideAnimation, + delay: Duration(milliseconds: 300), + child: Container( + margin: EdgeInsets.symmetric(horizontal: 40), + child: DisplayText( + text: widget.text, + fontSize: 17, + style: TextStyle( + color: Colors.black.withOpacity(0.5), + fontWeight: FontWeight.w400, + height: 1.2, + ), ), ), - ], - ), + ), + ], ), ), ],