311 lines
13 KiB
Dart
311 lines
13 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 SelectIndividualActivity extends StatefulWidget {
|
|
const SelectIndividualActivity({super.key});
|
|
|
|
@override
|
|
State<SelectIndividualActivity> createState() =>
|
|
_SelectIndividualActivityState();
|
|
}
|
|
|
|
class _SelectIndividualActivityState extends State<SelectIndividualActivity> {
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
backgroundColor: Color.fromARGB(255, 18, 32, 47),
|
|
body: Stack(
|
|
children: [
|
|
Positioned(top: 220, left: -30, child: CommonBlurLeftSecond()),
|
|
Positioned(top: 450, right: -30, child: CommonBlurRightSecond()),
|
|
Positioned(top: 530, 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 2 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: 87.w,
|
|
height: 15.h,
|
|
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),
|
|
),
|
|
),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.end,
|
|
children: [
|
|
Container(
|
|
width: 15,
|
|
height: 15,
|
|
decoration: ShapeDecoration(
|
|
gradient: LinearGradient(
|
|
begin: Alignment(0.98, -0.21),
|
|
end: Alignment(-0.98, 0.21),
|
|
colors: [
|
|
Color(0xFFD90B2E),
|
|
Color(0x60D90B2E)
|
|
],
|
|
),
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius:
|
|
BorderRadius.circular(30),
|
|
),
|
|
),
|
|
)
|
|
],
|
|
))
|
|
],
|
|
),
|
|
),
|
|
),
|
|
sizedBoxHeight(40.h),
|
|
Center(
|
|
child:
|
|
text20400white('What is your main activity ?')),
|
|
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),
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
ActivityContainer(
|
|
titleString: 'Kayaking',
|
|
image:
|
|
'assets/images/svg/individualact1.svg'),
|
|
ActivityContainer(
|
|
titleString: 'Cycling',
|
|
image:
|
|
'assets/images/svg/individualact2.svg'),
|
|
ActivityContainer(
|
|
titleString: 'Running',
|
|
image:
|
|
'assets/images/svg/individualact3.svg'),
|
|
],
|
|
),
|
|
sizedBoxHeight(20.h),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
ActivityContainer(
|
|
titleString: 'Swimming',
|
|
image:
|
|
'assets/images/svg/individualact4.svg'),
|
|
ActivityContainer(
|
|
titleString: 'Triathlon',
|
|
image:
|
|
'assets/images/svg/individualact5.svg'),
|
|
ActivityContainer(
|
|
titleString: 'Hiking',
|
|
image:
|
|
'assets/images/svg/individualact6.svg'),
|
|
],
|
|
),
|
|
sizedBoxHeight(20.h),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
ActivityContainer(
|
|
titleString: 'Football',
|
|
image:
|
|
'assets/images/svg/individualact7.svg'),
|
|
sizedBoxWidth(20.w),
|
|
ActivityContainer(
|
|
titleString: 'Rugby',
|
|
image:
|
|
'assets/images/svg/individualact8.svg'),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
Spacer(flex: 1),
|
|
CustomButton(
|
|
text: "Continue",
|
|
onPressed: () {
|
|
Get.toNamed(RouteName.individualgroupstep3);
|
|
})
|
|
],
|
|
),
|
|
)),
|
|
],
|
|
));
|
|
}
|
|
}
|
|
|
|
class ActivityContainer extends StatefulWidget {
|
|
final String titleString;
|
|
final String image;
|
|
|
|
ActivityContainer({
|
|
Key? key,
|
|
required this.titleString,
|
|
required this.image,
|
|
}) : super(key: key);
|
|
|
|
@override
|
|
State<ActivityContainer> createState() => _ActivityContainerState();
|
|
}
|
|
|
|
class _ActivityContainerState extends State<ActivityContainer> {
|
|
bool _colorcontainer = false;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return GestureDetector(
|
|
onTap: () {
|
|
setState(() {
|
|
_colorcontainer = !_colorcontainer;
|
|
});
|
|
// Set the selected ValueNotifier to true when tapped
|
|
},
|
|
child: Container(
|
|
width: 110.w,
|
|
height: 106.h,
|
|
decoration: ShapeDecoration(
|
|
gradient: LinearGradient(
|
|
begin: Alignment(0.98, -0.21),
|
|
end: Alignment(-0.98, 0.21),
|
|
colors: _colorcontainer
|
|
? [
|
|
Color(0XFFD90B2E).withOpacity(0.80),
|
|
Color(0XFFD90B2E).withOpacity(0.77),
|
|
Color(0XFFD90B2E).withOpacity(0.66),
|
|
Color(0XFFD90B2E).withOpacity(0.18),
|
|
]
|
|
: [
|
|
Colors.white.withOpacity(0.05999999865889549),
|
|
Colors.white.withOpacity(0.07999999821186066)
|
|
]),
|
|
shape: RoundedRectangleBorder(
|
|
side: BorderSide(width: 1, color: Color(0xFF434A53)),
|
|
borderRadius: BorderRadius.circular(10),
|
|
),
|
|
),
|
|
child: Padding(
|
|
padding: EdgeInsets.symmetric(horizontal: 10.w, vertical: 10.h),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
children: [
|
|
SvgPicture.asset(
|
|
widget.image,
|
|
width: 50.w,
|
|
height: 50.h,
|
|
),
|
|
sizedBoxHeight(10.h),
|
|
SizedBox(
|
|
// width: 60,
|
|
// height: 16,
|
|
child: text14400white(widget.titleString)),
|
|
],
|
|
),
|
|
),
|
|
));
|
|
}
|
|
}
|