step_partner_view.dart 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395
  1. import 'package:flutter/cupertino.dart';
  2. import 'package:flutter/src/widgets/framework.dart';
  3. import 'package:flutter_screenutil/flutter_screenutil.dart';
  4. import 'package:keyboard/base/base_view.dart';
  5. import 'package:keyboard/module/new_user/new_user_controller.dart';
  6. import 'package:flutter/material.dart';
  7. import 'package:keyboard/resource/string.gen.dart';
  8. import 'package:get/get.dart';
  9. import '../../../../resource/assets.gen.dart';
  10. import '../../../../resource/colors.gen.dart';
  11. import '../../../../utils/age_zodiac_sign_util.dart';
  12. import '../../../../utils/styles.dart';
  13. import '../../../../widget/avatar/avatar_image_widget.dart';
  14. class StepPartnerView extends BaseView<NewUserController> {
  15. const StepPartnerView({super.key});
  16. @override
  17. Color backgroundColor() {
  18. return Colors.transparent;
  19. }
  20. @override
  21. Widget buildBody(BuildContext context) {
  22. return Container(
  23. child: Column(
  24. crossAxisAlignment: CrossAxisAlignment.start,
  25. children: [
  26. _buildStepTitle(),
  27. SizedBox(height: 24.w),
  28. Center(child: _buildAvatar()),
  29. SizedBox(height: 12.w),
  30. Expanded(child: SingleChildScrollView(child: _buildContent())),
  31. ],
  32. ),
  33. );
  34. }
  35. Widget _buildStepTitle() {
  36. return Container(
  37. margin: EdgeInsets.only(left: 30.w, right: 30.w),
  38. child: Column(
  39. crossAxisAlignment: CrossAxisAlignment.start,
  40. children: [
  41. Text(
  42. StringName.newUserPartnerTitle,
  43. style: TextStyle(
  44. color: Colors.black.withAlpha(204),
  45. fontSize: 22.sp,
  46. fontWeight: FontWeight.w500,
  47. ),
  48. ),
  49. SizedBox(height: 7.h),
  50. Text(
  51. StringName.newUserPartnerDesc,
  52. style: TextStyle(
  53. color: Colors.black.withAlpha(153),
  54. fontSize: 14.sp,
  55. fontWeight: FontWeight.w400,
  56. ),
  57. ),
  58. ],
  59. ),
  60. );
  61. }
  62. Widget _buildAvatar() {
  63. return GestureDetector(
  64. onTap: controller.nextAvatar,
  65. child: Obx(() {
  66. return Container(
  67. height: 90.w,
  68. child: Stack(
  69. children: [
  70. Container(
  71. width: 84.w,
  72. height: 84.w,
  73. child:
  74. controller.partnerAvatarUrl.isNotEmpty
  75. ? CircleAvatarWidget(
  76. image:
  77. Assets.images.iconKeyboardDefaultAvatar
  78. .provider(),
  79. imageUrl: controller.partnerAvatarUrl,
  80. size: 84.w,
  81. borderColor: Colors.white,
  82. borderWidth: 2.r,
  83. placeholder: (_, __) {
  84. return const CupertinoActivityIndicator();
  85. },
  86. )
  87. : SizedBox(),
  88. ),
  89. Positioned(
  90. left: 0,
  91. right: 0,
  92. bottom: 0,
  93. child: _buildAvatarSwitch(),
  94. ),
  95. ],
  96. ),
  97. );
  98. }),
  99. );
  100. }
  101. Widget _buildAvatarSwitch() {
  102. return GestureDetector(
  103. onTap: controller.nextAvatar,
  104. child: SizedBox(
  105. width: 22.r,
  106. height: 22.r,
  107. child: Assets.images.iconCharacterCustomDetailSwitch.image(
  108. width: 22.r,
  109. height: 22.r,
  110. ),
  111. ),
  112. );
  113. }
  114. Widget _buildContent() {
  115. return Container(
  116. margin: EdgeInsets.only(left: 16.w, right: 16.w, bottom: 200.w),
  117. padding: EdgeInsets.only(top: 21.w),
  118. decoration: BoxDecoration(
  119. borderRadius: BorderRadius.circular(18),
  120. color: Colors.white,
  121. ),
  122. child: Column(
  123. crossAxisAlignment: CrossAxisAlignment.start,
  124. children: [
  125. Padding(
  126. padding: EdgeInsets.only(left: 20.w),
  127. child: Text(
  128. StringName.newUserPartnerIs,
  129. style: Styles.getTextStyleBlack204W500(14.sp),
  130. ),
  131. ),
  132. SizedBox(height: 12.w),
  133. buildPartnerNameFiled(),
  134. SizedBox(height: 30.w),
  135. Padding(
  136. padding: EdgeInsets.only(left: 20.w),
  137. child: Text(
  138. StringName.gender,
  139. style: Styles.getTextStyleBlack204W500(14.sp),
  140. ),
  141. ),
  142. SizedBox(height: 9.w),
  143. Obx(
  144. () => Container(
  145. margin: EdgeInsets.symmetric(horizontal: 16.w),
  146. child: Row(
  147. mainAxisAlignment: MainAxisAlignment.spaceAround,
  148. children: [
  149. // 女生按钮
  150. Expanded(
  151. child: buildGenderSwitchButton(
  152. isSelected: controller.partnerGender == 2,
  153. text: StringName.newUserPartnerIsFemale,
  154. onTap: () => controller.onPartnerGenderChanged(2),
  155. ),
  156. ),
  157. SizedBox(width: 16.w),
  158. // 男生按钮
  159. Expanded(
  160. child: buildGenderSwitchButton(
  161. isSelected: controller.partnerGender == 1,
  162. text: StringName.newUserPartnerIsMale,
  163. onTap: () => controller.onPartnerGenderChanged(1),
  164. ),
  165. ),
  166. ],
  167. ),
  168. ),
  169. ),
  170. SizedBox(height: 30.w),
  171. Padding(
  172. padding: EdgeInsets.only(left: 20.w),
  173. child: Text(
  174. StringName.newUserBirthdayTitle,
  175. style: Styles.getTextStyleBlack204W500(14.sp),
  176. ),
  177. ),
  178. SizedBox(height: 12.w),
  179. _buildPartnerBirthday(),
  180. SizedBox(height: 32.w),
  181. ],
  182. ),
  183. );
  184. }
  185. Widget buildPartnerNameFiled() {
  186. return Container(
  187. height: 42.w,
  188. margin: EdgeInsets.symmetric(horizontal: 16.w),
  189. padding: EdgeInsets.symmetric(horizontal: 12.w),
  190. decoration: BoxDecoration(
  191. color: Color(0XFFF6F5FA),
  192. borderRadius: BorderRadius.circular(28.w),
  193. ),
  194. child: Row(
  195. children: [
  196. Expanded(
  197. child: TextField(
  198. cursorHeight: 20.w,
  199. style: TextStyle(
  200. fontSize: 14.sp,
  201. color: Colors.black.withAlpha(204),
  202. fontWeight: FontWeight.w500,
  203. ),
  204. maxLines: 1,
  205. textAlignVertical: TextAlignVertical.center,
  206. textInputAction: TextInputAction.next,
  207. decoration: InputDecoration(
  208. hintText: StringName.newUserNicknameTitle,
  209. counterText: '',
  210. hintStyle: TextStyle(
  211. fontSize: 14.sp,
  212. color: Colors.black.withAlpha(77),
  213. fontWeight: FontWeight.w500,
  214. ),
  215. labelStyle: TextStyle(
  216. fontSize: 14.sp,
  217. color: ColorName.primaryTextColor,
  218. ),
  219. contentPadding: const EdgeInsets.all(0),
  220. border: const OutlineInputBorder(borderSide: BorderSide.none),
  221. enabled: true,
  222. ),
  223. onChanged: controller.onNicknameChange,
  224. ),
  225. ),
  226. ],
  227. ),
  228. );
  229. }
  230. Widget buildSwitchPartnerGender() {
  231. return Container(
  232. width: 296,
  233. height: 42,
  234. decoration: ShapeDecoration(
  235. color: const Color(0xFFF5F4F9),
  236. shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(28)),
  237. ),
  238. );
  239. }
  240. Widget buildGenderSwitchButton({
  241. required String text,
  242. required bool isSelected,
  243. required VoidCallback onTap,
  244. }) {
  245. return GestureDetector(
  246. onTap: onTap,
  247. child: Container(
  248. height: 42.w,
  249. alignment: Alignment.center,
  250. decoration: BoxDecoration(
  251. borderRadius: BorderRadius.circular(28.r),
  252. color: isSelected ? null : const Color(0xFFF5F4F9),
  253. gradient:
  254. isSelected
  255. ? LinearGradient(
  256. begin: Alignment.centerLeft,
  257. end: Alignment.centerRight,
  258. transform: GradientRotation(0.5),
  259. colors: [const Color(0xFF7D46FC), const Color(0xFFBC87FF)],
  260. )
  261. : null,
  262. ),
  263. child: Text(
  264. text,
  265. style:
  266. isSelected
  267. ? Styles.getTextStyleWhiteW500(14.sp)
  268. : Styles.getTextStyleBlack204W500(14.sp),
  269. ),
  270. ),
  271. );
  272. }
  273. _buildPartnerBirthday() {
  274. return GestureDetector(
  275. onTap: controller.changePartnerBirthday,
  276. child: Obx(() {
  277. return Container(
  278. height: 42.w,
  279. margin: EdgeInsets.symmetric(horizontal: 16.w),
  280. padding: EdgeInsets.symmetric(horizontal: 12.w),
  281. decoration: BoxDecoration(
  282. color: Color(0XFFF6F5FA),
  283. borderRadius: BorderRadius.circular(28.w),
  284. ),
  285. child: Row(
  286. children: [
  287. controller.currentPartnerBirthday == null
  288. ? Expanded(
  289. child: Row(
  290. mainAxisAlignment: MainAxisAlignment.spaceBetween,
  291. children: [
  292. Text(
  293. StringName.newUserPartnerBirthday,
  294. style: TextStyle(
  295. color: Colors.black.withAlpha(77),
  296. fontSize: 14.sp,
  297. fontWeight: FontWeight.w500,
  298. ),
  299. ),
  300. Assets.images.iconArrowRight.image(
  301. width: 24.w,
  302. height: 24.w,
  303. fit: BoxFit.contain,
  304. ),
  305. ],
  306. ),
  307. )
  308. : Expanded(
  309. child: Row(
  310. mainAxisAlignment: MainAxisAlignment.spaceBetween,
  311. children: [
  312. _buildBirthdayNotEmptyText(),
  313. Assets.images.iconArrowRight.image(
  314. width: 24.w,
  315. height: 24.w,
  316. fit: BoxFit.contain,
  317. ),
  318. ],
  319. ),
  320. ),
  321. ],
  322. ),
  323. );
  324. }),
  325. );
  326. }
  327. _buildBirthdayNotEmptyText() {
  328. return Row(
  329. children: [
  330. Text(
  331. controller.dateComponents.yearPart,
  332. style: Styles.getTextStyleBlack204W500(14.sp),
  333. ),
  334. SizedBox(width: 4.w),
  335. Text(
  336. StringName.year,
  337. style: TextStyle(
  338. color: Colors.black.withAlpha(102),
  339. fontSize: 12.sp,
  340. fontWeight: FontWeight.w500,
  341. ),
  342. ),
  343. SizedBox(width: 4.w),
  344. Text(
  345. controller.dateComponents.monthPart,
  346. style: Styles.getTextStyleBlack204W500(14.sp),
  347. ),
  348. SizedBox(width: 4.w),
  349. Text(
  350. StringName.month,
  351. style: TextStyle(
  352. color: Colors.black.withAlpha(102),
  353. fontSize: 12.sp,
  354. fontWeight: FontWeight.w500,
  355. ),
  356. ),
  357. SizedBox(width: 4.w),
  358. Text(
  359. controller.dateComponents.dayPart,
  360. style: Styles.getTextStyleBlack204W500(14.sp),
  361. ),
  362. Text(
  363. StringName.day,
  364. style: TextStyle(
  365. color: Colors.black.withAlpha(102),
  366. fontSize: 12.sp,
  367. fontWeight: FontWeight.w500,
  368. ),
  369. ),
  370. SizedBox(width: 16.w),
  371. Text(
  372. AgeZodiacSignUtil.getZodiacSign(
  373. controller.currentPartnerBirthday!,
  374. ).name,
  375. style: Styles.getTextStyleBlack204W500(14.sp),
  376. ),
  377. ],
  378. );
  379. }
  380. }