From 7eb3234e9532e33dbbf023a6a8122d08c4e882b7 Mon Sep 17 00:00:00 2001 From: dev-Roshan-lab Date: Wed, 17 Jan 2024 17:31:46 +0530 Subject: [PATCH] chore:update-onboard-ui --- lib/pages/auth.dart | 141 +++++----- lib/pages/onboard.dart | 607 +++++++++++++++++++++-------------------- 2 files changed, 385 insertions(+), 363 deletions(-) diff --git a/lib/pages/auth.dart b/lib/pages/auth.dart index 8c5e09a..beb9b8c 100644 --- a/lib/pages/auth.dart +++ b/lib/pages/auth.dart @@ -14,7 +14,6 @@ class Auth extends StatefulWidget { } class _AuthState extends State { - void checkAuth() async { SharedPreferences prefs = await SharedPreferences.getInstance(); if (FirebaseAuth.instance.currentUser != null) { @@ -88,79 +87,73 @@ class _AuthState extends State { // ), //sign in using google - const SizedBox(height: 5), - Padding( - padding: const EdgeInsets.only( - left: 40, right: 40, top: 5, bottom: 20), - child: OutlinedButton( - onPressed: () async { - GoogleAuthProvider googleAuthProvider = - GoogleAuthProvider(); - await FirebaseAuth.instance - .signInWithPopup(googleAuthProvider) - .then((value) { - if (FirebaseAuth.instance.currentUser!.email! - .split("@") - .last != - "srmist.edu.in") { - ScaffoldMessenger.of(context).showSnackBar(SnackBar( - backgroundColor: Colors.red, - content: Row( - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - Icon( - Icons.error_outline_rounded, - color: Colors.white, - ), - const SizedBox( - width: 20, - ), - Text( - "Please sign in using SRM Gmail", - style: GoogleFonts.openSans( - color: Colors.white, - fontWeight: FontWeight.w500), - ) - ], - ), - )); - } else { - checkAuth(); - } - - }); - }, - style: OutlinedButton.styleFrom( - backgroundColor: Theme.of(context).colorScheme.primary, - foregroundColor: Colors.grey[200], - shadowColor: Color.fromARGB(255, 17, 74, 121), - elevation: 5, - - //fixedSize:, - side: BorderSide( - width: 2, color: Color.fromARGB(255, 17, 74, 121))), - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - Padding( - padding: const EdgeInsets.all(8.0), - child: SizedBox( - height: 35, - child: Image.asset("assets/images/google.png")), - ), - SizedBox(width: 7), - Padding( - padding: const EdgeInsets.all(8.0), - child: Text("Sign in with Google", - style: GoogleFonts.poppins( - fontSize: 18, - fontWeight: FontWeight.bold, - color: Colors.white)), - ) - ], - )), - ), + const SizedBox(height: 20), + OutlinedButton( + onPressed: () async { + GoogleAuthProvider googleAuthProvider = GoogleAuthProvider(); + await FirebaseAuth.instance + .signInWithPopup(googleAuthProvider) + .then((value) { + if (FirebaseAuth.instance.currentUser!.email! + .split("@") + .last != + "srmist.edu.in") { + ScaffoldMessenger.of(context).showSnackBar(SnackBar( + backgroundColor: Colors.red, + content: Row( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Icon( + Icons.error_outline_rounded, + color: Colors.white, + ), + const SizedBox( + width: 20, + ), + Text( + "Please sign in using SRM Gmail", + style: GoogleFonts.openSans( + color: Colors.white, + fontWeight: FontWeight.w500), + ) + ], + ), + )); + } else { + checkAuth(); + } + }); + }, + style: OutlinedButton.styleFrom( + backgroundColor: Theme.of(context).colorScheme.primary, + foregroundColor: Colors.grey[200], + shadowColor: Color.fromARGB(255, 17, 74, 121), + elevation: 5, + fixedSize: + Size(MediaQuery.of(context).size.width * 0.9, 50), + side: BorderSide( + width: 2, color: Color.fromARGB(255, 17, 74, 121))), + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Padding( + padding: const EdgeInsets.all(8.0), + child: SizedBox( + height: 35, + child: Image.asset("assets/images/google.png")), + ), + SizedBox(width: 7), + Padding( + padding: const EdgeInsets.all(8.0), + child: Text("Sign in with Google", + style: GoogleFonts.poppins( + fontSize: 18, + fontWeight: FontWeight.bold, + color: Colors.white)), + ) + ], + )), const Spacer(), Padding( padding: const EdgeInsets.all(8.0), diff --git a/lib/pages/onboard.dart b/lib/pages/onboard.dart index 207806a..a1e6098 100644 --- a/lib/pages/onboard.dart +++ b/lib/pages/onboard.dart @@ -1,3 +1,4 @@ +import 'package:firebase_auth/firebase_auth.dart'; import 'package:flutter/material.dart'; import 'package:google_fonts/google_fonts.dart'; @@ -8,10 +9,6 @@ class Onboard extends StatefulWidget { } class _OnboardState extends State { - // TODO: get user class and section data - // TODO: implement onboard UI - // TODO: implement secure_sharedpreferences or hive for local DB - // TODO: implement onboard UI int year = 0; String _department = 'Computer Applications'; String _class = 'BCA'; @@ -44,316 +41,348 @@ class _OnboardState extends State { body: SingleChildScrollView( child: Column( mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.start, children: [ //lets find your tt text //const SizedBox(height: 30), Container( - height: 200, + height: 300, + width: MediaQuery.of(context).size.width, decoration: BoxDecoration( color: Theme.of(context).colorScheme.primary, borderRadius: const BorderRadius.only( bottomLeft: Radius.circular(30), bottomRight: Radius.circular(30))), - child: Row( - crossAxisAlignment: CrossAxisAlignment.center, - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Padding( - padding: const EdgeInsets.only(left: 4.0, right: 4), - child: Text( - "Let's find Your \nTimetable !", - style: GoogleFonts.poppins( - color: Colors.white, - fontSize: 28, - fontWeight: FontWeight.normal), - textAlign: TextAlign.center, - ), - ), - const Padding( - padding: EdgeInsets.only( - left: 50, right: 8.0, bottom: 8, top: 8), - child: Icon( - Icons.calendar_month_sharp, - size: 45, - color: Colors.white, + child: SizedBox( + height: 260, + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Container( + height: 160, + width: 160, + decoration: BoxDecoration( + shape: BoxShape.circle, + border: Border.all( + color: Theme.of(context).colorScheme.tertiary, + width: 4), + // boxShadow: [ + // BoxShadow( + // color: Theme.of(context) + // .colorScheme + // .tertiary + // .withOpacity(0.6), + // blurRadius: 3, + // spreadRadius: 3, + // offset: const Offset(0, 0)) + // ], + image: DecorationImage( + fit: BoxFit.fill, + image: NetworkImage(FirebaseAuth + .instance.currentUser!.photoURL!))), ), - ), - ], - ), - ), - - //select your year text - const SizedBox(height: 20), - Padding( - padding: const EdgeInsets.only(left: 30.0), - child: Text( - "Select your year ", - style: GoogleFonts.poppins( - color: Colors.grey[600], - fontSize: 20, - fontWeight: FontWeight.normal), - textAlign: TextAlign.left, - ), - ), - - //Year Buttons - Center( - child: Wrap( - direction: Axis.horizontal, - children: List.generate(4, (index) { - int number = index + 1; - return Padding( - padding: const EdgeInsets.all(5.0), - child: TextButton( - onPressed: () { - setState(() { - year = number; - }); - }, - style: ButtonStyle( - elevation: const MaterialStatePropertyAll(5), - fixedSize: const MaterialStatePropertyAll(Size(50, 50)), - backgroundColor: MaterialStatePropertyAll( - number == year - ? Theme.of(context).colorScheme.primary - : Theme.of(context).colorScheme.secondary, - ), - foregroundColor: MaterialStatePropertyAll( - number == year ? Colors.white : Colors.black, - ), - shadowColor: MaterialStatePropertyAll( - Theme.of(context).colorScheme.secondary, - ), - shape: - MaterialStateProperty.all( - RoundedRectangleBorder( - borderRadius: BorderRadius.circular(40.0), - ), - ), - ), - child: Text(number.toString(), - style: GoogleFonts.poppins( - fontSize: 20, - fontWeight: FontWeight.normal, - color: number == year - ? Colors.white - : Colors.grey[800], - )), + const SizedBox( + height: 10, ), - ); - }), - ), - ), - - //enter dept text - const SizedBox(height: 15), - Padding( - padding: const EdgeInsets.only(left: 30.0), - child: Text( - "Select your department ", - style: GoogleFonts.poppins( - color: Colors.grey[600], - fontSize: 20, - fontWeight: FontWeight.normal), - textAlign: TextAlign.left, - ), - ), - //Department dropdown - const SizedBox(height: 5), - Container( - width: 230, - padding: const EdgeInsets.only(left: 10, right: 10), - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(10), - border: Border.all(color: Colors.grey)), - child: DropdownButtonHideUnderline( - child: DropdownButton( - value: _department, - iconEnabledColor: Theme.of(context).colorScheme.primary, - icon: const Icon(Icons.arrow_drop_down), - iconSize: 24, - elevation: 6, - isExpanded: false, - style: const TextStyle(fontSize: 15, color: Colors.black), - items: - departments.map>((String value) { - return DropdownMenuItem( - value: value, - child: Text( - value, - style: GoogleFonts.poppins( - fontSize: 15, - fontWeight: FontWeight.normal, - color: Colors.grey[800]), - ), - ); - }).toList(), - onChanged: (String? newValue) { - if (newValue != null) { - setState(() { - _department = newValue; - }); - } - }, - ), - ), - ), - - //Class text - const SizedBox(height: 10), - Padding( - padding: const EdgeInsets.only(left: 30.0), - child: Text( - "Select your class", - style: GoogleFonts.poppins( - color: Colors.grey[600], - fontSize: 20, - fontWeight: FontWeight.normal), - textAlign: TextAlign.left, - ), - ), - - //Class dropdown - const SizedBox(height: 5), - Container( - width: 230, - padding: const EdgeInsets.only(left: 10, right: 10), - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(10), - border: Border.all(color: Colors.grey)), - child: DropdownButtonHideUnderline( - child: DropdownButton( - value: _class, - iconEnabledColor: Theme.of(context).colorScheme.primary, - icon: const Icon(Icons.arrow_drop_down), - iconSize: 24, - elevation: 6, - isExpanded: false, - style: const TextStyle(fontSize: 15, color: Colors.black), - items: classes.map>((String value) { - return DropdownMenuItem( - value: value, + Padding( + padding: const EdgeInsets.only(left: 4.0, right: 4), + child: RichText( + text: TextSpan(children: [ + TextSpan( + text: "Hey, ", + style: GoogleFonts.poppins( + fontWeight: FontWeight.bold, + fontSize: 28, + color: Colors.white)), + TextSpan( + text: FirebaseAuth + .instance.currentUser!.displayName! + .split("(") + .first, + style: GoogleFonts.poppins( + fontWeight: FontWeight.bold, + fontSize: 28, + color: + Theme.of(context).colorScheme.tertiary)) + ]), + )), + Padding( + padding: const EdgeInsets.only(left: 4.0, right: 4), child: Text( - value, + "Let's find Your timetable!", style: GoogleFonts.poppins( - fontSize: 15, - fontWeight: FontWeight.normal, - color: Colors.grey[800]), + color: Colors.grey.shade200, + fontSize: 23, + fontWeight: FontWeight.normal), + textAlign: TextAlign.center, ), - ); - }).toList(), - onChanged: (String? cl) { - if (cl != null) { - setState(() { - _class = cl; - }); - } - }, + ), + ], ), ), ), + //select your year text + const SizedBox(height: 20), - //enter section text - const SizedBox(height: 10), Padding( - padding: const EdgeInsets.only(left: 30.0), - child: Text( - "Select your section ", - style: GoogleFonts.poppins( - color: Colors.grey[600], - fontSize: 20, - fontWeight: FontWeight.normal), - textAlign: TextAlign.left, - ), - ), - - //Section dropdown - const SizedBox(height: 10), - Container( - width: 230, - padding: const EdgeInsets.only(left: 10, right: 10), - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(10), - border: Border.all(color: Colors.grey)), - child: DropdownButtonHideUnderline( - child: DropdownButton( - value: _section, - iconEnabledColor: Theme.of(context).colorScheme.primary, - icon: const Icon(Icons.arrow_drop_down), - iconSize: 24, - elevation: 6, - isExpanded: false, - style: const TextStyle(fontSize: 15, color: Colors.black), - items: sections.map>((String value) { - return DropdownMenuItem( - value: value, - child: Text( - value, - style: GoogleFonts.poppins( - fontSize: 15, - fontWeight: FontWeight.normal, - color: Colors.grey[800]), + padding: const EdgeInsets.all(20.0), + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + "Select your year ", + style: GoogleFonts.poppins( + color: Theme.of(context).colorScheme.primary, + fontSize: 20, + fontWeight: FontWeight.w600), + textAlign: TextAlign.left, + ), + //Year Buttons + Wrap( + alignment: WrapAlignment.center, + direction: Axis.horizontal, + children: List.generate(4, (index) { + int number = index + 1; + return Padding( + padding: const EdgeInsets.all(5.0), + child: TextButton( + onPressed: () { + setState(() { + year = number; + }); + }, + style: ButtonStyle( + elevation: const MaterialStatePropertyAll(5), + fixedSize: MaterialStatePropertyAll(Size( + ((MediaQuery.of(context).size.width * 0.9) - + 40) / + 4, + 50)), + backgroundColor: MaterialStatePropertyAll( + number == year + ? Theme.of(context).colorScheme.primary + : Theme.of(context).colorScheme.secondary, + ), + foregroundColor: MaterialStatePropertyAll( + number == year ? Colors.white : Colors.black, + ), + shadowColor: MaterialStatePropertyAll( + Theme.of(context).colorScheme.secondary, + ), + shape: MaterialStateProperty.all< + RoundedRectangleBorder>( + RoundedRectangleBorder( + borderRadius: BorderRadius.circular(40.0), + ), + ), + ), + child: Text(number.toString(), + style: GoogleFonts.poppins( + fontSize: 20, + fontWeight: FontWeight.normal, + color: number == year + ? Colors.white + : Colors.grey[800], + )), + ), + ); + }), + ), + //enter dept text + const SizedBox(height: 15), + Text( + "Select your department ", + style: GoogleFonts.poppins( + color: Theme.of(context).colorScheme.primary, + fontSize: 20, + fontWeight: FontWeight.w600), + textAlign: TextAlign.left, + ), + //Department dropdown + Container( + width: MediaQuery.of(context).size.width * 0.9, + padding: const EdgeInsets.only(left: 10, right: 10), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(10), + border: Border.all(color: Colors.grey)), + child: DropdownButtonHideUnderline( + child: DropdownButton( + value: _department, + iconEnabledColor: Theme.of(context).colorScheme.primary, + icon: const Icon(Icons.arrow_drop_down), + iconSize: 24, + elevation: 6, + isExpanded: false, + style: + const TextStyle(fontSize: 15, color: Colors.black), + items: departments + .map>((String value) { + return DropdownMenuItem( + value: value, + child: Text( + value, + style: GoogleFonts.poppins( + fontSize: 15, + fontWeight: FontWeight.normal, + color: Colors.grey[800]), + ), + ); + }).toList(), + onChanged: (String? newValue) { + if (newValue != null) { + setState(() { + _department = newValue; + }); + } + }, ), - ); - }).toList(), - onChanged: (String? sec) { - if (sec != null) { - setState(() { - _section = sec; - }); - } - }, - ), - ), - ), - - //continue text_icon button - const SizedBox(height: 10), - const Padding( - padding: - EdgeInsets.only(left: 50, right: 50, top: 20, bottom: 10), - child: Divider(color: Colors.grey), - ), - Padding( - padding: const EdgeInsets.only(bottom: 10, right: 100, left: 100), - child: TextButton( - onPressed: () { - Navigator.pushReplacementNamed(context, '/home'); - }, - style: ButtonStyle( - elevation: const MaterialStatePropertyAll(8), - shadowColor: MaterialStatePropertyAll( - Theme.of(context).colorScheme.secondary), - backgroundColor: MaterialStatePropertyAll( - Theme.of(context).colorScheme.primary), - foregroundColor: MaterialStatePropertyAll( - Theme.of(context).colorScheme.primary)), - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Padding( - padding: const EdgeInsets.all(8.0), - child: Text( - "Continue", - style: GoogleFonts.poppins( - color: Colors.white, - fontSize: 16, - fontWeight: FontWeight.bold), + ), + ), + const SizedBox(height: 15), + //Class text + Text( + "Select your class", + style: GoogleFonts.poppins( + color: Theme.of(context).colorScheme.primary, + fontSize: 20, + fontWeight: FontWeight.w600), + textAlign: TextAlign.left, + ), + //Class dropdown + Container( + width: MediaQuery.of(context).size.width * 0.9, + padding: const EdgeInsets.only(left: 10, right: 10), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(10), + border: Border.all(color: Colors.grey)), + child: DropdownButtonHideUnderline( + child: DropdownButton( + value: _class, + iconEnabledColor: Theme.of(context).colorScheme.primary, + icon: const Icon(Icons.arrow_drop_down), + iconSize: 24, + elevation: 6, + isExpanded: false, + style: + const TextStyle(fontSize: 15, color: Colors.black), + items: classes + .map>((String value) { + return DropdownMenuItem( + value: value, + child: Text( + value, + style: GoogleFonts.poppins( + fontSize: 15, + fontWeight: FontWeight.normal, + color: Colors.grey[800]), + ), + ); + }).toList(), + onChanged: (String? cl) { + if (cl != null) { + setState(() { + _class = cl; + }); + } + }, ), ), - const Padding( - padding: EdgeInsets.all(8.0), - child: Icon( - Icons.arrow_forward_ios_sharp, - color: Colors.white, - size: 16, + ), + //enter section text + const SizedBox(height: 15), + Text( + "Select your section ", + style: GoogleFonts.poppins( + color: Theme.of(context).colorScheme.primary, + fontSize: 20, + fontWeight: FontWeight.w600), + textAlign: TextAlign.left, + ), + //Section dropdown + Container( + width: MediaQuery.of(context).size.width * 0.9, + padding: const EdgeInsets.only(left: 10, right: 10), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(10), + border: Border.all(color: Colors.grey)), + child: DropdownButtonHideUnderline( + child: DropdownButton( + value: _section, + iconEnabledColor: Theme.of(context).colorScheme.primary, + icon: const Icon(Icons.arrow_drop_down), + iconSize: 24, + elevation: 6, + isExpanded: false, + style: + const TextStyle(fontSize: 15, color: Colors.black), + items: sections + .map>((String value) { + return DropdownMenuItem( + value: value, + child: Text( + value, + style: GoogleFonts.poppins( + fontSize: 15, + fontWeight: FontWeight.normal, + color: Colors.grey[800]), + ), + ); + }).toList(), + onChanged: (String? sec) { + if (sec != null) { + setState(() { + _section = sec; + }); + } + }, ), ), - ], - ), + ), + //continue text_icon button + const SizedBox(height: 20), + TextButton( + onPressed: () { + Navigator.pushReplacementNamed(context, '/home'); + }, + style: ButtonStyle( + elevation: const MaterialStatePropertyAll(8), + shadowColor: MaterialStatePropertyAll( + Theme.of(context).colorScheme.secondary), + backgroundColor: MaterialStatePropertyAll( + Theme.of(context).colorScheme.primary), + fixedSize: MaterialStateProperty.all( + Size(MediaQuery.of(context).size.width * 0.9, 50)), + foregroundColor: MaterialStatePropertyAll( + Theme.of(context).colorScheme.primary)), + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Padding( + padding: const EdgeInsets.all(8.0), + child: Text( + "Continue", + style: GoogleFonts.poppins( + color: Colors.white, + fontSize: 16, + fontWeight: FontWeight.bold), + ), + ), + const Padding( + padding: EdgeInsets.all(8.0), + child: Icon( + Icons.arrow_forward_ios_sharp, + color: Colors.white, + size: 16, + ), + ), + ], + ), + ) + ], ), - ) + ), ], ), ),