Created
July 4, 2023 08:44
-
-
Save Chinecherem20199/95680ab18450a33593a88f0ae9b914c2 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:air_hukup/prensentation/resources/color_manager.dart'; | |
import 'package:air_hukup/prensentation/resources/style_manager.dart'; | |
import 'package:flutter/material.dart'; | |
import '../resources/value_manager.dart'; | |
class GenderPage extends StatefulWidget { | |
const GenderPage({Key? key}) : super(key: key); | |
@override | |
State<GenderPage> createState() => _GenderPageState(); | |
} | |
List<String> options = ["Male", "Female"]; | |
class _GenderPageState extends State<GenderPage> { | |
bool isClicked = false; | |
bool isImageVisible = false; | |
bool isContainer1Selected = false; | |
bool isContainer2Selected = false; | |
void _handleClick() { | |
setState(() { | |
isClicked = !isClicked; | |
isImageVisible = !isImageVisible; | |
isContainer1Selected = !isContainer1Selected; | |
}); | |
} | |
void _handleClick2() { | |
setState(() { | |
isClicked = !isClicked; | |
isImageVisible = !isImageVisible; | |
isContainer2Selected = !isContainer2Selected; | |
}); | |
} | |
String currentOption = options[0]; | |
@override | |
Widget build(BuildContext context) { | |
Color containerColor = | |
isClicked ? ColorManager.primary : Colors.transparent; | |
return SafeArea( | |
child: Scaffold( | |
body: SingleChildScrollView( | |
child: Padding( | |
padding: EdgeInsets.only( | |
top: screenHeight(context) * 0.1, | |
left: screenWidth(context) * 0.04, | |
right: screenWidth(context) * 0.04, | |
), | |
child: Column( | |
children: [ | |
Text( | |
"What is your gender?", | |
style: getBoldInterText( | |
fontSize: screenWidth(context) * 0.07, | |
color: ColorManager.secondary), | |
), | |
SizedBox( | |
height: screenHeight(context) * 0.04, | |
), | |
Row( | |
mainAxisAlignment: MainAxisAlignment.center, | |
children: [ | |
GestureDetector( | |
onTap: _handleClick, | |
child: Container( | |
width: screenWidth(context) * 0.3, | |
height: screenHeight(context) * 0.25, | |
padding: EdgeInsets.only( | |
top: screenHeight(context) * 0.02, | |
bottom: screenHeight(context) * 0.02, | |
), | |
clipBehavior: Clip.antiAlias, | |
decoration: BoxDecoration( | |
color: Color(0xFFFEFAFA), | |
borderRadius: BorderRadius.circular(12), | |
border: Border.all( | |
color: containerColor, | |
width: 2, | |
style: BorderStyle.solid), | |
), | |
child: Container( | |
child: Stack( | |
children: [ | |
Positioned( | |
// frame1000004098FkV (1:25) | |
left: 46, | |
top: 24, | |
child: Align( | |
child: SizedBox( | |
width: 52, | |
height: 52, | |
child: Image.asset( | |
"assets/images/male.png", | |
width: 52, | |
height: 52, | |
), | |
), | |
), | |
), | |
Positioned( | |
// vectorL1F (1:27) | |
left: 117, | |
top: 8.861541748, | |
child: Align( | |
child: SizedBox( | |
width: 20, | |
height: 20, | |
child: isImageVisible && | |
isContainer1Selected | |
? Image.asset( | |
"assets/images/tick.png", | |
width: 20, | |
height: 20, | |
) | |
: Container( | |
width: screenWidth(context) * 0.3, | |
height: | |
screenHeight(context) * 0.25, | |
padding: EdgeInsets.only( | |
top: screenHeight(context) * 0.02, | |
bottom: | |
screenHeight(context) * 0.02, | |
), | |
clipBehavior: Clip.antiAlias, | |
decoration: BoxDecoration( | |
color: Color(0xFFFEFAFA), | |
borderRadius: | |
BorderRadius.circular(12), | |
border: Border.all( | |
color: containerColor, | |
width: 2, | |
style: BorderStyle.solid), | |
), | |
child: Container( | |
child: Stack( | |
children: [ | |
Positioned( | |
// frame1000004098FkV (1:25) | |
left: 46, | |
top: 24, | |
child: Align( | |
child: SizedBox( | |
width: 52, | |
height: 52, | |
child: Image.asset( | |
"assets/images/male.png", | |
width: 52, | |
height: 52, | |
), | |
), | |
), | |
), | |
Positioned( | |
// womanEcR (1:28) | |
left: 35, | |
top: 100, | |
child: Align( | |
child: SizedBox( | |
width: 73, | |
height: 20, | |
child: Text( | |
'Man', | |
textAlign: | |
TextAlign.center, | |
style: | |
getBoldInterText( | |
color: ColorManager | |
.secondary, | |
fontSize: screenWidth( | |
context) * | |
0.04, | |
// fontSize: 20, | |
// color: Color(0xff2d286a), | |
), | |
), | |
), | |
), | |
), | |
], | |
), | |
), | |
), | |
), | |
), | |
), | |
Positioned( | |
// womanEcR (1:28) | |
left: 35, | |
top: 100, | |
child: Align( | |
child: SizedBox( | |
width: 73, | |
height: 20, | |
child: Text( | |
'Man', | |
textAlign: TextAlign.center, | |
style: getBoldInterText( | |
color: ColorManager.secondary, | |
fontSize: screenWidth(context) * 0.04, | |
// fontSize: 20, | |
// color: Color(0xff2d286a), | |
), | |
), | |
), | |
), | |
), | |
], | |
), | |
), | |
), | |
), | |
SizedBox( | |
width: screenWidth(context) * 0.05, | |
), | |
GestureDetector( | |
onTap: _handleClick2, | |
child: Container( | |
width: screenWidth(context) * 0.3, | |
height: screenHeight(context) * 0.25, | |
padding: EdgeInsets.only( | |
top: screenHeight(context) * 0.02, | |
bottom: screenHeight(context) * 0.02, | |
), | |
clipBehavior: Clip.antiAlias, | |
decoration: BoxDecoration( | |
color: Color(0xFFFEFAFA), | |
borderRadius: BorderRadius.circular(12), | |
border: Border.all( | |
color: containerColor, | |
width: 2, | |
style: BorderStyle.solid), | |
), | |
child: Container( | |
child: Stack( | |
children: [ | |
Positioned( | |
// frame1000004098FkV (1:25) | |
left: 46, | |
top: 24, | |
child: Align( | |
child: SizedBox( | |
width: 52, | |
height: 52, | |
child: Image.asset( | |
"assets/images/female.png", | |
width: 52, | |
height: 52, | |
), | |
), | |
), | |
), | |
Positioned( | |
// vectorL1F (1:27) | |
left: 117, | |
top: 8.861541748, | |
child: Align( | |
child: SizedBox( | |
width: 20, | |
height: 20, | |
child: isImageVisible && | |
isContainer2Selected | |
? Image.asset( | |
"assets/images/tick.png", | |
width: 20, | |
height: 20, | |
) | |
: Container( | |
width: screenWidth(context) * 0.3, | |
height: | |
screenHeight(context) * 0.25, | |
padding: EdgeInsets.only( | |
top: screenHeight(context) * 0.02, | |
bottom: | |
screenHeight(context) * 0.02, | |
), | |
clipBehavior: Clip.antiAlias, | |
decoration: BoxDecoration( | |
color: Color(0xFFFEFAFA), | |
borderRadius: | |
BorderRadius.circular(12), | |
border: Border.all( | |
color: containerColor, | |
width: 2, | |
style: BorderStyle.solid), | |
), | |
child: Container( | |
child: Stack( | |
children: [ | |
Positioned( | |
// frame1000004098FkV (1:25) | |
left: 46, | |
top: 24, | |
child: Align( | |
child: SizedBox( | |
width: 52, | |
height: 52, | |
child: Image.asset( | |
"assets/images/female.png", | |
width: 52, | |
height: 52, | |
), | |
), | |
), | |
), | |
Positioned( | |
// womanEcR (1:28) | |
left: 35, | |
top: 100, | |
child: Align( | |
child: SizedBox( | |
width: 73, | |
height: 20, | |
child: Text( | |
'Woman', | |
textAlign: | |
TextAlign.center, | |
style: | |
getBoldInterText( | |
color: ColorManager | |
.secondary, | |
fontSize: screenWidth( | |
context) * | |
0.04, | |
// fontSize: 20, | |
// color: Color(0xff2d286a), | |
), | |
), | |
), | |
), | |
), | |
], | |
), | |
), | |
), | |
), | |
), | |
), | |
Positioned( | |
// womanEcR (1:28) | |
left: 35, | |
top: 100, | |
child: Align( | |
child: SizedBox( | |
width: 73, | |
height: 20, | |
child: Text( | |
'Woman', | |
textAlign: TextAlign.center, | |
style: getBoldInterText( | |
color: ColorManager.secondary, | |
fontSize: screenWidth(context) * 0.04, | |
// fontSize: 20, | |
// color: Color(0xff2d286a), | |
), | |
), | |
), | |
), | |
), | |
], | |
), | |
), | |
), | |
), | |
], | |
), | |
SizedBox( | |
height: screenHeight(context) * 0.1, | |
), | |
Padding( | |
padding: EdgeInsets.only( | |
left: screenWidth(context) * 0.09, | |
right: screenWidth(context) * 0.09, | |
), | |
child: Container( | |
height: screenHeight(context) * 0.06, | |
width: double.infinity, | |
// width: screenWidth(context) * 0.6, | |
decoration: BoxDecoration( | |
gradient: const LinearGradient( | |
colors: [ | |
Color(0xfff0323755), | |
Color(0xffEF4335), | |
], | |
begin: Alignment.topLeft, | |
end: Alignment.topRight, | |
// stops: [0.6, 0.1], | |
), | |
borderRadius: BorderRadius.circular(10), | |
), | |
child: MaterialButton( | |
onPressed: () { | |
Navigator.pushNamed( | |
context, | |
"/account", | |
); | |
}, | |
child: Padding( | |
padding: EdgeInsets.only( | |
left: screenWidth(context) * 0.01, | |
right: screenWidth(context) * 0.01, | |
), | |
child: Text( | |
"Next", | |
style: getInterTextButton( | |
color: ColorManager.buttonTextColor, | |
fontSize: screenWidth(context) * 0.04, | |
), | |
), | |
), | |
), | |
), | |
), | |
], | |
), | |
), | |
), | |
), | |
); | |
} | |
} |
ghost
commented
Jul 4, 2023
import 'package:flutter/material.dart';
class GenderPage extends StatefulWidget {
const GenderPage({Key? key}) : super(key: key);
@override
State<GenderPage> createState() => _GenderPageState();
}
List<String> options = ["Male", "Female"];
class _GenderPageState extends State<GenderPage> {
bool isClicked = false;
bool isImageVisible = false;
bool isContainer1Selected = false;
bool isContainer2Selected = false;
int _chosenIndex = 0;
void _handleClick() {
setState(() {
_chosenIndex = 0;
isClicked = !isClicked;
isImageVisible = !isImageVisible;
isContainer1Selected = !isContainer1Selected;
});
}
void _handleClick2() {
setState(() {
_chosenIndex = 1;
isClicked = !isClicked;
isImageVisible = !isImageVisible;
isContainer2Selected = !isContainer2Selected;
});
}
String currentOption = options[0];
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: SingleChildScrollView(
child: Padding(
padding: EdgeInsets.only(
top: screenHeight(context) * 0.1,
left: screenWidth(context) * 0.04,
right: screenWidth(context) * 0.04,
),
child: Column(
children: [
Text(
"What is your gender?",
style: getBoldInterText(
fontSize: screenWidth(context) * 0.07,
color: ColorManager.secondary),
),
SizedBox(
height: screenHeight(context) * 0.04,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
selectGender(
title: 'Man', imagePath: "assets/images/male.png",
isActive: (_chosenIndex == 0) ? true : false, onTap: _handleClick
),
SizedBox(
width: screenWidth(context) * 0.05,
),
selectGender(title: 'Female', imagePath: "assets/images/female.png",
isActive: (_chosenIndex == 1) ? true : false, onTap: _handleClick2,
),
],
),
SizedBox(
height: screenHeight(context) * 0.1,
),
Padding(
padding: EdgeInsets.only(
left: screenWidth(context) * 0.09,
right: screenWidth(context) * 0.09,
),
child: Container(
height: screenHeight(context) * 0.06,
width: double.infinity,
// width: screenWidth(context) * 0.6,
decoration: BoxDecoration(
gradient: const LinearGradient(
colors: [
Color(0xfff0323755),
Color(0xffEF4335),
],
begin: Alignment.topLeft,
end: Alignment.topRight,
// stops: [0.6, 0.1],
),
borderRadius: BorderRadius.circular(10),
),
child: MaterialButton(
onPressed: () {
Navigator.pushNamed(
context,
"/account",
);
},
child: Padding(
padding: EdgeInsets.only(
left: screenWidth(context) * 0.01,
right: screenWidth(context) * 0.01,
),
child: Text(
"Next",
style: getInterTextButton(
color: ColorManager.buttonTextColor,
fontSize: screenWidth(context) * 0.04,
),
),
),
),
),
),
],
),
),
),
),
);
}
Widget selectGender({required VoidCallback onTap,required String title,required String imagePath,required bool isActive}){
GestureDetector(
onTap: onTap,
child: Container(
width: screenWidth(context) * 0.3,
height: screenHeight(context) * 0.25,
padding: EdgeInsets.only(
top: screenHeight(context) * 0.02,
bottom: screenHeight(context) * 0.02,
),
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
color: Color(0xFFFEFAFA),
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: (isActive) ? Colors.red : Colors.blue, //Change to correct color
width: 2,
style: BorderStyle.solid),
),
child: Container(
color: (isActive) ? Colors.red : Colors.blue, //Change to correct color
child: Stack(
children: [
Positioned(
// frame1000004098FkV (1:25)
left: 46,
top: 24,
child: Align(
child: SizedBox(
width: 52,
height: 52,
child: Image.asset(
"assets/images/male.png",
width: 52,
height: 52,
),
),
),
),
Positioned(
// vectorL1F (1:27)
left: 117,
top: 8.861541748,
child: Align(
child: SizedBox(
width: 20,
height: 20,
child: isImageVisible &&
isContainer1Selected
? Image.asset(
"assets/images/tick.png",
width: 20,
height: 20,
)
: Container(
width: screenWidth(context) * 0.3,
height:
screenHeight(context) * 0.25,
padding: EdgeInsets.only(
top: screenHeight(context) * 0.02,
bottom:
screenHeight(context) * 0.02,
),
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
color: Color(0xFFFEFAFA),
borderRadius:
BorderRadius.circular(12),
border: Border.all(
color: containerColor,
width: 2,
style: BorderStyle.solid),
),
child: Container(
child: Stack(
children: [
Positioned(
// frame1000004098FkV (1:25)
left: 46,
top: 24,
child: Align(
child: SizedBox(
width: 52,
height: 52,
child: Image.asset(
"assets/images/male.png",
width: 52,
height: 52,
),
),
),
),
Positioned(
// womanEcR (1:28)
left: 35,
top: 100,
child: Align(
child: SizedBox(
width: 73,
height: 20,
child: Text(
'Man',
textAlign:
TextAlign.center,
style:
getBoldInterText(
color: ColorManager
.secondary,
fontSize: screenWidth(
context) *
0.04,
// fontSize: 20,
// color: Color(0xff2d286a),
),
),
),
),
),
],
),
),
),
),
),
),
Positioned(
// womanEcR (1:28)
left: 35,
top: 100,
child: Align(
child: SizedBox(
width: 73,
height: 20,
child: Text(
'Man',
textAlign: TextAlign.center,
style: getBoldInterText(
color: ColorManager.secondary,
fontSize: screenWidth(context) * 0.04,
// fontSize: 20,
// color: Color(0xff2d286a),
),
),
),
),
),
],
),
),
),
);
}
}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment