dreampad/lib/app/modules/welcome/views/input_widget.dart

import 'package:dreampad/app/modules/welcome/controllers/welcome_controller.dart';
import 'package:dreampad/app/shared/constants/constants.dart';
import 'package:dreampad/app/shared/shared.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
import 'package:get/get.dart';
import 'package:intl/intl.dart';
import 'package:scroll_date_picker/scroll_date_picker.dart';

class InputWidget extends StatelessWidget {
  const InputWidget({
    super.key,
    required this.onFinished,
  });

  final VoidCallback onFinished;

  WelcomeController get controller => Get.find<WelcomeController>();

  @override
  Widget build(BuildContext context) {
    return buildInput(context);
  }

  Widget buildInput(BuildContext context) {
    return Row(
      children: [
        const RSizedBox(width: 339),
        RSizedBox(
          width: 498.0,
          height: double.infinity,
          child: SingleChildScrollView(
            child: Column(
              children: [
                const RSizedBox(
                  height: 100.0,
                ),
                Container(
                  width: 498.w,
                  height: 450.h,
                  decoration: const BoxDecoration(
                    image: DecorationImage(
                      image: Images.welcomeInputBg,
                      fit: BoxFit.fill,
                    ),
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Text(
                        '探险者信息录入',
                        style: TextStyles.mediumWhite26,
                      ),
                      const RSizedBox(
                        height: 24,
                      ),
                      buildName(context),
                      const RSizedBox(
                        height: 18,
                      ),
                      buildBirthday(context),
                      const RSizedBox(
                        height: 24,
                      ),
                      RSizedBox(
                        height: 29.0,
                        width: 386,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.end,
                          children: [
                            buildRadio('我是男生', 2),
                            const RSizedBox(width: 68),
                            buildRadio('我是女生', 1),
                          ],
                        ),
                      ),
                      const RSizedBox(
                        height: 45,
                      ),
                      ImageTxtButton(
                        text: '确定',
                        imgName:
                            'welcome/btn_icon_confirm${controller.clickable.value ? '_enable' : ''}',
                        textStyle: TextStyles.mediumWhiteShadow26_014,
                        width: 386.0,
                        height: 66.0,
                        onPressed: () {
                          if (controller.clickable.value) {
                            onFinished.call();
                          }
                        },
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }

  Widget buildName(BuildContext context) {
    return Container(
      height: 46.h,
      width: 386.w,
      decoration: BoxDecoration(
        color: Colors.transparent,
        border: Border.all(
          color: const Color(0xFF8FC1FF),
          width: 1.r,
        ),
        borderRadius: BorderRadius.all(Radius.circular(6.r)),
      ),
      padding: REdgeInsets.only(left: 13, right: 13, bottom: 0, top: 4),
      child: TextField(
        controller: controller.textController,
        focusNode: controller.focusNode,
        cursorColor: Colors.white,
        style: TextStyles.mediumWhiteShadow16_034,
        autofocus: false,
        maxLines: 1,
        minLines: 1,
        textInputAction: TextInputAction.done,
        onEditingComplete: () {
          controller.focusNode.unfocus();
        },
        decoration: InputDecoration(
          hintText: '请输入您的名称',
          hintStyle: TextStyles.mediumColor16,
          counterText: '',
          border: InputBorder.none,
        ),
      ),
    );
  }

  Widget buildBirthday(BuildContext context) {
    return Container(
      height: 46.h,
      width: 386.w,
      decoration: BoxDecoration(
        color: Colors.transparent,
        border: Border.all(
          color: const Color(0xFF8FC1FF),
          width: 1.r,
        ),
        borderRadius: BorderRadius.all(Radius.circular(6.r)),
      ),
      padding: REdgeInsets.symmetric(horizontal: 13.0, vertical: 5.0),
      child: GestureDetector(
        onTap: () {
          controller.pullStatus.value = 'up';
          dateDialog(context);
        },
        child: Obx(
          () => Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Expanded(
                child: Text(
                  controller.birthday.value.isEmpty
                      ? '请选择你的出生日期'
                      : controller.birthday.value,
                  style: controller.birthday.value.isEmpty
                      ? TextStyles.mediumColor18
                      : TextStyles.mediumWhite18,
                ),
              ),
              Gaps.hGap4,
              controller.pullStatus.value == 'down'
                  ? Images.pullDown
                  : Images.pullUp,
            ],
          ),
        ),
      ),
    );
  }

  Widget buildRadio(String name, int value) {
    return GestureDetector(
      onTap: () async {
        controller.selectedGender.value = value;
        await controller.changeGende(value);
      },
      child: Obx(
        () => Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Stack(
              children: [
                Images.selectDefault,
                AnimatedVisibilityWidget(
                  animationWidgetBuilder: AnimatedVisibilityWidget.fadeAnimationWidgetBuilder,
                  isVisible: value == controller.selectedGender.value,
                  child: Images.selectPre,
                ),
              ],
            ),
            const RSizedBox(
              width: 10,
            ),
            AnimatedDefaultTextStyle(
              duration: kThemeAnimationDuration,
              style: value == controller.selectedGender.value
                  ? TextStyles.mediumWhite21_024
                  : TextStyles.mediumColor21,
              child: Text(
                name,
                textAlign: TextAlign.center,
              ),
            )
          ],
        ),
      ),
    );
  }

  void dateDialog(BuildContext context) {
    SmartDialog.showAttach(
      targetContext: null,
      targetBuilder: (Offset targetOffset, Size targetSize) =>
          Offset(588.w, 330.h),
      maskColor: Colors.transparent,
      animationType: SmartAnimationType.centerFade_otherSlide,
      onDismiss: () {
        controller.pullStatus.value = 'down';
        var formatter = DateFormat('yyyy-MM-dd');
        controller.birthday.value =
            formatter.format(controller.selectedDate.value);
        controller.verify();
      },
      builder: (_) {
        return Obx(
          () => Container(
            width: 386.w,
            height: 200.h,
            decoration: const BoxDecoration(
              color: Color(0xFF2D306C),
            ),
            child: ScrollDatePicker(
              minimumDate:
                  DateTime.now().subtract(const Duration(days: 20 * 365)),
              selectedDate: controller.selectedDate.value,
              locale: const Locale('zh', 'CH'),
              options: const DatePickerOptions(
                backgroundColor: Color(0xFF2D306C),
                itemExtent: 36,
                diameterRatio: 3,
              ),
              indicator: Container(
                height: 36,
                decoration: BoxDecoration(
                  color: const Color(0x33FFFFFF),
                  border: Border.all(
                    color: const Color(0xFF8FC1FF),
                    width: 1.r,
                  ),
                ),
              ),
              scrollViewOptions: DatePickerScrollViewOptions(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                year: controller.dateScrollViewDetailOptions,
                month: controller.dateScrollViewDetailOptions,
                day: controller.dateScrollViewDetailOptions,
              ),
              onDateTimeChanged: (DateTime value) {
                controller.selectedDate.value = value;
              },
            ),
          ),
        );
      },
    );
  }
}