272 lines
11 KiB
Dart
272 lines
11 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
|
import 'package:flutter_svg/flutter_svg.dart';
|
|
import 'package:get/get.dart';
|
|
import 'package:glassmorphism/glassmorphism.dart';
|
|
import 'package:regroup/Utils/Common/CustomNextButton.dart';
|
|
import 'package:regroup/Utils/Common/blureffect.dart';
|
|
import 'package:regroup/Utils/Common/sized_box.dart';
|
|
import 'package:regroup/Utils/texts.dart';
|
|
import 'package:regroup/resources/routes/route_name.dart';
|
|
|
|
class SelectIndividualProfile extends StatefulWidget {
|
|
const SelectIndividualProfile({super.key});
|
|
|
|
@override
|
|
State<SelectIndividualProfile> createState() =>
|
|
_SelectIndividualProfileState();
|
|
}
|
|
|
|
class _SelectIndividualProfileState extends State<SelectIndividualProfile> {
|
|
ValueNotifier<int> selectedIndex = ValueNotifier(-1);
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
backgroundColor: Color.fromARGB(255, 18, 32, 47),
|
|
body: Stack(
|
|
children: [
|
|
Positioned(top: 70, left: -30, child: CommonBlurLeftSecond()),
|
|
Positioned(top: 310, right: -30, child: CommonBlurRightSecond()),
|
|
Positioned(top: 540, left: -30, child: CommonBlurLeftBlue()),
|
|
GlassmorphicContainer(
|
|
width: MediaQuery.of(context).size.width,
|
|
height:
|
|
// 500.h,
|
|
MediaQuery.of(context).size.height,
|
|
borderRadius: 2,
|
|
blur: 10,
|
|
alignment: Alignment.bottomLeft,
|
|
border: 2,
|
|
linearGradient: LinearGradient(
|
|
begin: Alignment.topCenter,
|
|
end: Alignment.bottomCenter,
|
|
colors: [
|
|
Color(0XFF222935).withOpacity(0.60),
|
|
Color(0XFF222935).withOpacity(0.60),
|
|
Color(0XFF222935).withOpacity(0.60),
|
|
Color(0XFF222935).withOpacity(0.60),
|
|
|
|
// Color.fromARGB(255, 18, 32, 47).withOpacity(0.50),
|
|
// Color.fromARGB(255, 18, 32, 47).withOpacity(0.50),
|
|
// Color.fromARGB(255, 18, 32, 47).withOpacity(0.50),
|
|
// Color.fromARGB(255, 18, 32, 47).withOpacity(0.50),
|
|
],
|
|
),
|
|
borderGradient: LinearGradient(
|
|
begin: Alignment.topCenter,
|
|
end: Alignment.bottomCenter,
|
|
colors: [
|
|
// Color.fromARGB(255, 18, 32, 47).withOpacity(0.50),
|
|
// Color.fromARGB(255, 18, 32, 47).withOpacity(0.50),
|
|
Color(0XFF222935).withOpacity(0.60),
|
|
|
|
Color(0XFF222935).withOpacity(0.60),
|
|
],
|
|
),
|
|
child: Padding(
|
|
padding:
|
|
EdgeInsets.symmetric(horizontal: 16.w, vertical: 50.h),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Align(
|
|
alignment: Alignment.topRight,
|
|
child: GestureDetector(
|
|
onTap: () {
|
|
Get.toNamed(RouteName.communitycommitscreen);
|
|
},
|
|
child: Text(
|
|
'Skip',
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 16.sp,
|
|
fontFamily: 'Helvetica',
|
|
fontWeight: FontWeight.w400,
|
|
decoration: TextDecoration.underline,
|
|
decorationColor: Colors.white),
|
|
),
|
|
),
|
|
),
|
|
sizedBoxHeight(30.h),
|
|
Align(
|
|
alignment: Alignment.center,
|
|
child: text16400white('Step 1 of 4')),
|
|
sizedBoxHeight(20.h),
|
|
Container(
|
|
width: 358.w,
|
|
height: 25.h,
|
|
decoration: ShapeDecoration(
|
|
shape: RoundedRectangleBorder(
|
|
side:
|
|
BorderSide(width: 1, color: Color(0xFF434A53)),
|
|
borderRadius: BorderRadius.circular(30),
|
|
),
|
|
),
|
|
child: Padding(
|
|
padding: EdgeInsets.symmetric(
|
|
horizontal: 8.w, vertical: 2.h),
|
|
child: Row(
|
|
children: [
|
|
Container(
|
|
width: 15,
|
|
height: 15,
|
|
decoration: ShapeDecoration(
|
|
gradient: LinearGradient(
|
|
begin: Alignment(0.98, -0.21),
|
|
end: Alignment(-0.98, 0.21),
|
|
colors: [
|
|
Color(0xA5D90B2E),
|
|
Color(0x42D90B2E)
|
|
],
|
|
),
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(30),
|
|
),
|
|
),
|
|
)
|
|
],
|
|
),
|
|
),
|
|
),
|
|
sizedBoxHeight(30.h),
|
|
Center(child: text20400white('Select your profile type')),
|
|
sizedBoxHeight(10.w),
|
|
Center(
|
|
child: Container(
|
|
width: 154.w,
|
|
decoration: ShapeDecoration(
|
|
shape: RoundedRectangleBorder(
|
|
side: BorderSide(
|
|
width: 1,
|
|
strokeAlign: BorderSide.strokeAlignCenter,
|
|
color: Color(0xFF858585),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
sizedBoxHeight(30.h),
|
|
ProfileContainer(
|
|
titleString: "Athlete",
|
|
contentString:
|
|
"Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.",
|
|
image: 'assets/images/svg/runningindividual.svg',
|
|
selectedIndex: selectedIndex,
|
|
index: 0,
|
|
),
|
|
sizedBoxHeight(20.h),
|
|
ProfileContainer(
|
|
titleString: "Coach",
|
|
contentString:
|
|
"Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.",
|
|
image: 'assets/images/svg/coachindividual.svg',
|
|
selectedIndex: selectedIndex,
|
|
index: 1,
|
|
),
|
|
sizedBoxHeight(20.h),
|
|
ProfileContainer(
|
|
titleString: "Social",
|
|
contentString:
|
|
"Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.",
|
|
image: 'assets/images/svg/userindividual.svg',
|
|
selectedIndex: selectedIndex,
|
|
index: 2,
|
|
),
|
|
Spacer(flex: 1),
|
|
CustomButton(
|
|
text: "Continue",
|
|
onPressed: () {
|
|
Get.toNamed(RouteName.individualactivitystep2);
|
|
})
|
|
],
|
|
),
|
|
)),
|
|
],
|
|
));
|
|
}
|
|
}
|
|
|
|
class ProfileContainer extends StatefulWidget {
|
|
final String titleString;
|
|
final String contentString;
|
|
final String image;
|
|
final ValueNotifier<int> selectedIndex;
|
|
final int index;
|
|
|
|
ProfileContainer({
|
|
Key? key,
|
|
required this.titleString,
|
|
required this.contentString,
|
|
required this.image,
|
|
required this.selectedIndex,
|
|
required this.index,
|
|
}) : super(key: key);
|
|
|
|
@override
|
|
State<ProfileContainer> createState() => _ProfileContainerState();
|
|
}
|
|
|
|
class _ProfileContainerState extends State<ProfileContainer> {
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return GestureDetector(
|
|
onTap: () {
|
|
// Set the selected ValueNotifier to true when tapped
|
|
widget.selectedIndex.value = widget.index;
|
|
},
|
|
child: ValueListenableBuilder<int>(
|
|
valueListenable: widget.selectedIndex,
|
|
builder: (context, selectedIndex, child) {
|
|
bool isSelected = selectedIndex == widget.index;
|
|
return Container(
|
|
width: 358.w,
|
|
height: 126.h,
|
|
decoration: BoxDecoration(
|
|
gradient: LinearGradient(
|
|
begin: Alignment(0.98, -0.21),
|
|
end: Alignment(-0.98, 0.21),
|
|
colors: isSelected
|
|
? [
|
|
Color(0XFFD90B2E).withOpacity(0.80),
|
|
Color(0XFFD90B2E).withOpacity(0.77),
|
|
Color(0XFFD90B2E).withOpacity(0.66),
|
|
Color(0XFFD90B2E).withOpacity(0.18),
|
|
]
|
|
: [
|
|
Colors.white.withOpacity(0.06),
|
|
Colors.white.withOpacity(0.08)
|
|
],
|
|
),
|
|
border: Border.all(width: 1, color: Color(0xFF434A53)),
|
|
borderRadius: BorderRadius.circular(10),
|
|
),
|
|
child: Padding(
|
|
padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 16.h),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.start,
|
|
children: [
|
|
SvgPicture.asset(widget.image),
|
|
sizedBoxWidth(10.w),
|
|
SizedBox(
|
|
width: 241.w,
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
text16400white(widget.titleString),
|
|
sizedBoxHeight(3.h),
|
|
text12400white(widget.contentString)
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
);
|
|
}
|
|
}
|