Skip to content

Instantly share code, notes, and snippets.

@Chinecherem20199

Chinecherem20199/gender.dart

Created July 4, 2023 08:44
Show Gist options
  • Save Chinecherem20199/95680ab18450a33593a88f0ae9b914c2 to your computer and use it in GitHub Desktop.
Save Chinecherem20199/95680ab18450a33593a88f0ae9b914c2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gender.dart
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,
),
),
),
),
),
),
],
),
),
),
),
);
}
}
@mbaka-bilal
Copy link 

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