From e0f896ac51488f4ce7d469618693056488a020df Mon Sep 17 00:00:00 2001 From: yespanalo <65854733+yespanalo@users.noreply.github.com> Date: Sun, 22 Nov 2020 22:32:59 +0800 Subject: [PATCH 1/2] feat: Added edit profile Added edit profile on the card. Changed the Icon in the card if "edit" profile is selected --- lib/Pages/ProfilePage.dart | 228 ++++++++++++++++++++++++++++++------- 1 file changed, 187 insertions(+), 41 deletions(-) diff --git a/lib/Pages/ProfilePage.dart b/lib/Pages/ProfilePage.dart index 368a95d..14db0be 100644 --- a/lib/Pages/ProfilePage.dart +++ b/lib/Pages/ProfilePage.dart @@ -1,5 +1,6 @@ import 'package:flutter/material.dart'; import 'package:queuing_system/Presentation/custom_icons_icons.dart'; +import 'package:queuing_system/SubPages/EditProfile.dart'; import 'package:queuing_system/Variables/color.dart'; import 'package:queuing_system/Variables/size.dart'; import 'package:queuing_system/Widgets/ProfileDetails.dart'; @@ -10,6 +11,8 @@ class ProfilePage extends StatefulWidget { } class _ProfilePageState extends State { + bool editpro = true; + @override Widget build(BuildContext context) { return Scaffold( @@ -25,7 +28,7 @@ class _ProfilePageState extends State { Stack( alignment: Alignment.center, children: [ - Container(height: PhoneSize(context).height/1.3,), + Container(height: PhoneSize(context).height / 1.25), Positioned( top: 80, left: 0, @@ -46,61 +49,167 @@ class _ProfilePageState extends State { ), padding: EdgeInsets.all(10), child: Column( - crossAxisAlignment: CrossAxisAlignment.start, children: [ - SizedBox(height: 70), - ProfileDetails(icon: CustomIcons.profile, text: 'John Doe Mayers',color: Colors.grey,), - - SizedBox(height: 10), - ProfileDetails( icon: CustomIcons.contact,text: '22 Years Old',color: Colors.grey,), - - SizedBox(height: 10), - ProfileDetails(icon: Icons.contact_phone,text: '639-323-265-144', color: Colors.grey,), - - SizedBox(height: 10), - ProfileDetails( - icon: Icons.location_on, - text: '#61 Marinig Cabuya Laguna asd as dsa dasd qeqw asqwdasdsadas dqwe qwe asdqw eas dqwe ad wae dasd as asd asd as da sdas dsa dasdasd asd asdas dasd asd asd asd asdqwe wqe qwe wq', - color: Colors.grey, + Visibility( + visible: !editpro, + child: Column( + children: [ + SizedBox(height: 30), + EditProfile( + text: 'Full Name', + initialValue: 'John Doe Mayers', + icon: Icon(CustomIcons.profile), + ), + SizedBox(height: 10), + EditProfile( + text: 'Email', + initialValue: 'bautistaivan_26@yahoo.com', + icon: Icon(Icons.mail), + ), + SizedBox(height: 10), + EditProfile( + text: 'Contact', + initialValue: '639-323-265-144', + icon: Icon(Icons.contact_phone), + ), + SizedBox(height: 10), + EditProfile( + text: 'Age', + initialValue: '22 Years Old', + icon: Icon(Icons.cake), + ), + SizedBox(height: 10), + EditProfile( + text: 'City Address', + initialValue: 'Calamba, City Laguna', + icon: Icon(Icons.location_on), + ), + SizedBox(height: 10), + EditProfile( + text: 'Street Address', + initialValue: + '# 168 Purok 1, Barangay kabuto', + icon: Icon(Icons.home), + ), + ], + ), + ), + Visibility( + visible: editpro, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + SizedBox(height: 70), + SizedBox(height: 50), + ProfileDetails( + icon: Icons.contact_phone, + text: '639-323-265-144', + color: Colors.grey), + SizedBox(height: 10), + ProfileDetails( + icon: Icons.cake, + text: '22 Years Old', + color: Colors.grey), + SizedBox(height: 10), + ProfileDetails( + icon: Icons.location_on, + text: 'Calamba, City Laguna', + color: Colors.grey, + ), + SizedBox(height: 10), + ProfileDetails( + icon: Icons.home, + text: '# 168 Purok 1, Barangay kabuto', + color: Colors.grey, + ), + ], + ), ), ], ), ), ), ), + Positioned( + top: 150, + child: Visibility( + visible: editpro, + child: Column( + children: [ + Text( + 'Jonh Doe Mayers', + style: TextStyle( + fontWeight: FontWeight.bold, fontSize: 25), + ), + Text('bautistaivan_26@yahoo.com', + style: TextStyle(color: Colors.black54)), + ], + ), + ), + ), Positioned( right: 20, top: 100, - child: Icon( - CustomIcons.edit_profile, - color: secondaryColor, + child: GestureDetector( + onTap: () { + setState(() { + if (editpro == false) { + editpro = true; + } else { + editpro = false; + } + }); + }, + child: Icon( + editpro ? CustomIcons.edit_profile : Icons.save, + color: secondaryColor, + ), ), ), Positioned( top: 0, - child: Container( - margin: EdgeInsets.only(left: 5), - width: 150.0, - height: 150.0, - decoration: new BoxDecoration( - border: Border.all( - color: secondaryColor, - width: 5, + child: Stack( + children: [ + Container( + height: 160, + width: 160, ), - // boxShadow: [ - // BoxShadow( - // color: Colors.grey.withOpacity(0.8), - // spreadRadius: 2, - // blurRadius: 5, - // offset: Offset(0, 3), - // ), - // ], - shape: BoxShape.circle, - image: new DecorationImage( - fit: BoxFit.fill, - image: AssetImage('assets/IU.jpg'), + Container( + margin: EdgeInsets.only(left: 5), + width: 150.0, + height: 150.0, + decoration: new BoxDecoration( + border: Border.all( + color: secondaryColor, + width: 5, + ), + shape: BoxShape.circle, + image: new DecorationImage( + fit: BoxFit.fill, + image: AssetImage('assets/IU.jpg'), + ), + ), ), - ), + Visibility( + visible: !editpro, + child: Positioned( + bottom: 0, + right: 0, + child: RawMaterialButton( + onPressed: () {}, + elevation: 2.0, + fillColor: primaryColor, + child: Icon( + Icons.create, + size: 10.0, + color: Colors.white, + ), + padding: EdgeInsets.all(15.0), + shape: CircleBorder(), + ), + ), + ), + ], ), ), ], @@ -112,4 +221,41 @@ class _ProfilePageState extends State { ), ); } -} \ No newline at end of file +} + +class EditProfile extends StatelessWidget { + const EditProfile({ + Key key, + @required this.text, + @required this.initialValue, + @required this.icon, + }) : super(key: key); + + final String text; + final String initialValue; + final Icon icon; + + @override + Widget build(BuildContext context) { + return Container( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Padding( + padding: const EdgeInsets.only(left: 11.0), + child: Text('$text'), + ), + Container( + height: 35, + child: TextFormField( + initialValue: '$initialValue', + decoration: new InputDecoration( + prefixIcon: icon, + labelStyle: new TextStyle(color: const Color(0xFF424242))), + ), + ), + ], + ), + ); + } +} From bfb4613dcb75053fc4bc380aeffa5d7b56d65f96 Mon Sep 17 00:00:00 2001 From: yespanalo <65854733+yespanalo@users.noreply.github.com> Date: Mon, 23 Nov 2020 10:39:08 +0800 Subject: [PATCH 2/2] fix: Fixed Edit Profile format Added fields to the edit profile page --- lib/Pages/ProfilePage.dart | 117 +++++++++++++++++++++++++++---------- lib/Widgets/TextField.dart | 82 +++++++++++++------------- 2 files changed, 127 insertions(+), 72 deletions(-) diff --git a/lib/Pages/ProfilePage.dart b/lib/Pages/ProfilePage.dart index 14db0be..3f18715 100644 --- a/lib/Pages/ProfilePage.dart +++ b/lib/Pages/ProfilePage.dart @@ -4,6 +4,7 @@ import 'package:queuing_system/SubPages/EditProfile.dart'; import 'package:queuing_system/Variables/color.dart'; import 'package:queuing_system/Variables/size.dart'; import 'package:queuing_system/Widgets/ProfileDetails.dart'; +import 'package:queuing_system/Widgets/TextField.dart'; class ProfilePage extends StatefulWidget { @override @@ -28,7 +29,7 @@ class _ProfilePageState extends State { Stack( alignment: Alignment.center, children: [ - Container(height: PhoneSize(context).height / 1.25), + Container(height: PhoneSize(context).height / 1.0), Positioned( top: 80, left: 0, @@ -54,39 +55,84 @@ class _ProfilePageState extends State { visible: !editpro, child: Column( children: [ - SizedBox(height: 30), - EditProfile( - text: 'Full Name', - initialValue: 'John Doe Mayers', - icon: Icon(CustomIcons.profile), - ), - SizedBox(height: 10), + SizedBox(height: 60), EditProfile( + icon: Icon(Icons.mail), text: 'Email', initialValue: 'bautistaivan_26@yahoo.com', - icon: Icon(Icons.mail), ), - SizedBox(height: 10), - EditProfile( - text: 'Contact', - initialValue: '639-323-265-144', - icon: Icon(Icons.contact_phone), + EditProfile( + icon: Icon(Icons.lock), + text: 'Password', + initialValue: 'asdsadas', ), - SizedBox(height: 10), - EditProfile( - text: 'Age', - initialValue: '22 Years Old', - icon: Icon(Icons.cake), + EditProfile( + icon: Icon(Icons.lock), + text: 'Confirm Password', + initialValue: 'asdsadas', ), - SizedBox(height: 10), - EditProfile( - text: 'City Address', - initialValue: 'Calamba, City Laguna', - icon: Icon(Icons.location_on), + SizedBox(height: 20,), + Row( + children: [ + Flexible( + child: EditProfile( + text: 'First Name', + initialValue: 'John Doe', + icon: Icon(CustomIcons.profile), + ), + ), + Flexible( + child: EditProfile( + text: 'Last Name', + initialValue: 'Mayers', + icon: null, + ), + ), + ], ), SizedBox(height: 10), + Row( + children: [ + Flexible( + flex: 2, + child: EditProfile( + text: 'Contact Number', + initialValue: '639-323-265-144', + icon: Icon(Icons.contact_phone), + ), + ), + Flexible( + child: EditProfile( + text: 'Age', + initialValue: '22', + icon: Icon(Icons.cake), + ), + ), + ], + ), + SizedBox(height: 10), + Row( + children: [ + Flexible( + + child: EditProfile( + text: 'State', + initialValue: 'Cabuyao', + icon: Icon(Icons.location_on), + ), + ), + Flexible( + child: EditProfile( + text: 'Province', + initialValue: 'Laguna', + icon: null, + ), + ), + ], + ), + SizedBox(height: 10), EditProfile( - text: 'Street Address', + text: 'Complete Address', initialValue: '# 168 Purok 1, Barangay kabuto', icon: Icon(Icons.home), @@ -234,6 +280,7 @@ class EditProfile extends StatelessWidget { final String text; final String initialValue; final Icon icon; + @override Widget build(BuildContext context) { @@ -246,13 +293,21 @@ class EditProfile extends StatelessWidget { child: Text('$text'), ), Container( - height: 35, - child: TextFormField( - initialValue: '$initialValue', - decoration: new InputDecoration( - prefixIcon: icon, - labelStyle: new TextStyle(color: const Color(0xFF424242))), + height: 40, + child: MyTextField( + initial: initialValue, + icons: icon, + controller: null, + hintText: "$text", + keyboardType: null, + inputFormatter: [], ), + // child: TextFormField( + // initialValue: '$initialValue', + // decoration: new InputDecoration( + // prefixIcon: icon, + // labelStyle: new TextStyle(color: const Color(0xFF424242))), + // ), ), ], ), diff --git a/lib/Widgets/TextField.dart b/lib/Widgets/TextField.dart index 94b1a85..3f88b9c 100644 --- a/lib/Widgets/TextField.dart +++ b/lib/Widgets/TextField.dart @@ -1,33 +1,34 @@ - import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; class MyTextField extends StatefulWidget { - const MyTextField({ - @required this.controller, - @required this.hintText, - @required this.inputFormatter, - @required this.keyboardType, - - }); + const MyTextField( + {@required this.controller, + @required this.hintText, + @required this.inputFormatter, + @required this.keyboardType, + this.icons, + this.initial}); final String hintText; final TextEditingController controller; final List inputFormatter; final TextInputType keyboardType; + final Icon icons; + final String initial; @override _MyTextFieldState createState() => _MyTextFieldState(); } class _MyTextFieldState extends State { - bool isTextObscure; bool isDisposed = false; @override void initState() { - if (widget.hintText == "Password" || widget.hintText == "Confirm Password") { + if (widget.hintText == "Password" || + widget.hintText == "Confirm Password") { isTextObscure = false; } else { isTextObscure = true; @@ -48,50 +49,49 @@ class _MyTextFieldState extends State { Container( height: 40, child: new TextFormField( + initialValue: widget.initial, keyboardType: widget.keyboardType, inputFormatters: widget.inputFormatter, controller: widget.controller, obscureText: !isTextObscure, decoration: new InputDecoration( + prefixIcon: widget.icons, filled: true, fillColor: Color(0xFFEFEFEF), hintText: widget.hintText, - contentPadding: EdgeInsets.fromLTRB(10, 10, 40, 10), - border: OutlineInputBorder( - borderRadius: BorderRadius.circular(5.0), - borderSide: BorderSide(color: Color(0xFFEFEFEF)) - ), + contentPadding: EdgeInsets.fromLTRB(10, 10, 10, 10), + border: OutlineInputBorder( + borderRadius: BorderRadius.circular(5.0), + borderSide: BorderSide(color: Color(0xFFEFEFEF))), enabledBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular(5.0), - borderSide: BorderSide(color: Color(0xFFEFEFEF)) - ), + borderRadius: BorderRadius.circular(5.0), + borderSide: BorderSide(color: Color(0xFFEFEFEF))), ), ), ), - widget.hintText == "Password" || widget.hintText == "Confirm Password" ? Positioned( - right: 0, - top: -5, - child: Container( - child: IconButton( - icon: Icon( - isTextObscure - ? Icons.visibility - : Icons.visibility_off, - size: 20, - ), - onPressed: () { - if(!isDisposed){ - setState(() { - isTextObscure = !isTextObscure; - }); - } - }, - color: Colors.grey, - ), - ), - ) : Container(), + widget.hintText == "Password" || widget.hintText == "Confirm Password" + ? Positioned( + right: 0, + top: -5, + child: Container( + child: IconButton( + icon: Icon( + isTextObscure ? Icons.visibility : Icons.visibility_off, + size: 20, + ), + onPressed: () { + if (!isDisposed) { + setState(() { + isTextObscure = !isTextObscure; + }); + } + }, + color: Colors.grey, + ), + ), + ) + : Container(), ], ); } } -