trackoffical_app/libs/track_common/lib/view/login/login_view.dart

import 'package:common_pub/screen.dart';
import 'package:common_pub/utils.dart';
import 'package:flutter/gestures.dart';
import 'package:pretty_qr_code/pretty_qr_code.dart';
import 'package:rive/rive.dart';
import 'package:track_common/widget/prelude.dart';

import 'common.dart';
import 'login_controller.dart';

class LoginView extends GetView<LoginController> {
  static const name = '/LoginView';

  const LoginView({super.key});

  static Future<bool> to({
    bool canBack = true,
    VoidCallback? thenToPageCall,
  }) async {
    Future<dynamic>? r;
    if (canBack) {
      r = Get.toNamed(LoginView.name, arguments: thenToPageCall);
    } else {
      r = Get.offAllNamed(LoginView.name, arguments: thenToPageCall);
    }

    if (r != null) {
      final r2 = await r;
      if (r2 is bool) {
        return r2;
      }
    }
    return false;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // appBar: AppTopBar(title: '登录账号', hasBackText: true, height: context.height*0.3),
      backgroundColor: Colors.white,
      body: Container(
        height: double.infinity,
        decoration: const BoxDecoration(color: Colors.white),
        alignment: Alignment.center,
        clipBehavior: Clip.hardEdge,
        child: Row(
          children: [
            const Expanded(
              flex: 2,
              child: AnimationPage(),
            ),
            Expanded(
              flex: 3,
              child: wPageRight(context),
            )
          ],
        ),
      ),
    );
  }

  Widget wPageRight(BuildContext context) {
    var inputHeight = context.height * 0.45;
    const inputMinHeight = 260.0;
    if (inputHeight < inputMinHeight) {
      inputHeight = inputMinHeight;
    }

    return Container(
        padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
        decoration: const BoxDecoration(
          // color: Color(0xffffcb00),
          image: DecorationImage(
              image: AssetImage(Assets.imagesBkLoginRight, package: package),
              alignment: Alignment.topCenter,
              fit: BoxFit.fitWidth),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            const Spacer(),
            const Text(
              '定向运动活动现场监控系统',
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 29.87, fontWeight: FontWeight.w500),
            ),
            SizedBox(height: inputHeight, child: wInput(context)),
            Image.asset(Assets.imagesIcLoginLogo, height: 24, package: package),
            const Spacer()
            // Expanded(flex: 10,child:  wExtra()),
          ],
        ));
  }

  Widget wInput(BuildContext context) {
    return Obx(() => Container(
        width: 432.8,
        height: 424,
        margin: const EdgeInsets.only(top: 22.04, bottom: 21),
        decoration: BoxDecoration(
          color: const Color(0xffffffff),
          borderRadius: BorderRadius.circular(context.wp(1.0)),
          boxShadow: const [
            BoxShadow(
                color: Color(0x38000000),
                offset: Offset(0.0, 3.0),
                blurRadius: 6)
          ],
        ),
        child: controller.isPageQrCode.value ? _InputQrCode() : _InputPhone()));
  }

  Widget wExtra() {
    return Padding(
        padding: const EdgeInsets.only(left: 41.67, right: 41.67),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                divider(),
                const Padding(
                    padding: EdgeInsets.only(left: 22.9, right: 22.9),
                    child: Text(
                      '其他登录方式',
                      style: TextStyle(fontSize: 25.0),
                    )),
                divider(),
              ],
            ),
            const SizedBox(height: 76.5),
            const Row(),
            const Spacer(),
            Text.rich(TextSpan(
                text: '还不是我们的会员？',
                style: const TextStyle(fontSize: 33.33, color: Colors.black),
                children: [
                  TextSpan(
                    text: '点击注册',
                    style: const TextStyle(color: Color(0xffffb40b)),
                    recognizer: TapGestureRecognizer()
                      ..onTap = () {
                        // SignUpView.show();
                      },
                  ),
                ])),
            const SizedBox(height: 76.5),
          ],
        ));
  }

  Widget divider() {
    return Expanded(
        child: Container(
      height: 2.0,
      color: Colors.black,
    ));
  }
}

final _duration = 2.seconds;

class AnimationPage extends StatefulWidget {
  const AnimationPage({super.key});

  @override
  State<StatefulWidget> createState() {
    return _AnimationPageState();
  }
}

class _AnimationPageState extends State<AnimationPage>
    with SingleTickerProviderStateMixin {
  late Animation<double> animation;
  late AnimationController animationController;

  @override
  void initState() {
    super.initState();
    animationController = AnimationController(duration: _duration, vsync: this);
    animation = Tween<double>(begin: 0, end: 1).animate(animationController);
    animationController.forward();
  }

  @override
  void dispose() {
    animationController.dispose();
    super.dispose();
  }

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

  Widget wPageLeft(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
      decoration: const BoxDecoration(
          image: DecorationImage(
              image: AssetImage(Assets.imagesBkCommonPage, package: package),
              fit: BoxFit.cover)),
      child: Column(
        children: [
          Expanded(
              flex: 1,
              child: Container(
                // color: const Color(0xffffcb00),
                padding: const EdgeInsets.only(bottom: 32),
                alignment: Alignment.bottomCenter,
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    Image.asset(
                      Assets.imagesImCompassNoMap,
                      height: context.wp(15.0),
                      fit: BoxFit.fitHeight,
                      package: package,
                    ),
                    SizedBox(
                        height: context.wp(10.0),
                        child: const RiveAnimation.asset(
                          'packages/$package/${Assets.imagesAmAppStartArrow}',
                          fit: BoxFit.fitHeight,
                        ))
                  ],
                ),
              )),
          Expanded(
              flex: 1,
              child: Column(
                // mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  AnimatedText(animation: animation),
                  Expanded(
                      child: Stack(
                    alignment: Alignment.center,
                    children: [
                      Center(
                        child: AnimatedColors(
                          animation: animation,
                        ),
                      ),
                      // Positioned(
                      //     bottom: 2.6.width*,
                      //     child:
                      //     Image.asset(Assets.imagesIcLogo, height: 5.0.width*))
                    ],
                  ))
                ],
              )),
        ],
      ),
    );
  }
}

class AnimatedText extends AnimatedWidget {
  const AnimatedText({super.key, required Animation<double> animation})
      : super(listenable: animation);

  @override
  Widget build(BuildContext context) {
    final animation = listenable as Animation<double>;
    var style = (context.textTheme.titleLarge ?? const TextStyle()).copyWith(
        height: context.wp(0.14),
        color: Colors.white,
        fontSize: context.wp(2.2));

    return Opacity(
        opacity: animation.value,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            SizedBox(
              height: context.wp(0.9),
            ),
            Text('确定方向                ', style: style),
            Text('              发现你自己的路！', style: style),
            Text('Orienting, Discover Your Own Way!',
                style: style.copyWith(
                    color: const Color(0xffade0ff),
                    fontWeight: FontWeight.bold,
                    fontSize: context.wp(1.4))),
          ],
        ));
  }
}

class AnimatedColors extends AnimatedWidget {
  const AnimatedColors({super.key, required Animation<double> animation})
      : super(listenable: animation);

  @override
  Widget build(BuildContext context) {
    final animation = listenable as Animation<double>;

    var children = <Widget>[];

    for (var i = 0; i < hrPColors.length; i++) {
      final color = hrPColors[i];
      var opacity = 0.0;
      if (i < animation.value * hrPColors.length) {
        opacity = 1;
      }

      children.add(Opacity(
          opacity: opacity,
          child: Container(
            width: context.wp(1.02),
            decoration: BoxDecoration(
                color: color,
                borderRadius: BorderRadius.circular(context.wp(2.0)),
                border: Border.all(color: Colors.white.withAlpha(100))),
          )));
    }

    return Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        SizedBox(height: context.wp(5.36)),
        SizedBox(
            width: context.wp(7.6),
            height: context.wp(2.5),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: children,
            )),
        // Text('支持心率带检测身体数据',
        //     style: style.copyWith(
        //         color: const Color(0xffffcb00), fontSize: 3.3.width*)),
      ],
    );
  }
}

class _InputPhone extends GetView<LoginController> {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Align(
            alignment: Alignment.topRight,
            child: GestureDetector(
              onTap: () => controller.toQrcode(),
              child: Image.asset(Assets.imagesIcLoginQrcode,
                  package: package, width: 58.5, height: 58.5),
            )),
        Padding(
            padding: EdgeInsets.fromLTRB(
                context.wp(6), context.wp(3.6), context.wp(6), context.wp(2)),
            child: Column(
              children: [
                // const Spacer(flex: 20),
                TextFormField(
                    decoration: wInputDecoration('请输入手机号'),
                    validator: (String? value) {
                      if (value == null || !value.isPhoneNumber) {
                        return '请输入正确的手机号';
                      }
                      return null;
                    },
                    onChanged: (value) {
                      controller.phone.value = value;
                    },
                    keyboardType: TextInputType.phone),
                const Spacer(flex: 50),
                Stack(
                  alignment: Alignment.centerRight,
                  children: [
                    TextFormField(
                      decoration: wInputDecoration('请输入验证码'),
                      onChanged: (value) {
                        controller.password.value = value;
                      },
                      keyboardType: TextInputType.number,
                    ),
                    Padding(
                      padding: const EdgeInsets.only(right: 4),
                      child: SizedBox(
                        width: 84,
                        height: 37,
                        child: Obx(() => GetCodeButton(
                              codeRetryLeft: controller.codeRetryLeft.value,
                              onPressed: () => controller.onGetCode(),
                            )),
                      ),
                    ),
                  ],
                ),
                // _TextContract(),
                const Spacer(flex: 80),
                button(
                  context,
                  '登    录',
                  () => controller.onSignIn(),
                ),
                const Spacer(flex: 10),
              ],
            ))
      ],
    );
  }

  InputDecoration wInputDecoration(hintText) {
    return InputDecoration(
      // isCollapsed: true,
      contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
      hintText: hintText,
      // hintStyle: TextStyle(fontSize: 12.0.rpx),
      focusedBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(4.0),
        borderSide: const BorderSide(
          color: Colors.blue,
          width: 1.0,
        ),
      ),
      enabledBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(4.0),
        borderSide: const BorderSide(
          color: Color(0xffaaaaaa),
          width: 1.0,
        ),
      ),
    );
  }
}

class _InputQrCode extends GetView<LoginController> {
  @override
  Widget build(BuildContext context) {
    return Obx(() => Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Row(
              children: [
                const Spacer(),
                TextButton(
                    onPressed: () => controller.isPageQrCode.value = false,
                    child: const Text('使用短信登录',
                        style: TextStyle(color: Color(0xff004670))))
              ],
            ),
            Stack(children: [
              GestureDetector(
                  onTap: () => controller.flushQrCode(),
                  child: Obx(() => SizedBox.square(
                      dimension: 104,
                      child:
                          PrettyQrView.data(data: controller.qrCode.value)))),
              if (controller.codeErr.value.isNotEmpty)
                Container(
                  height: 104,
                  width: 104,
                  color: const Color(0xe6ffffff),
                  alignment: Alignment.center,
                  child: Column(
                    children: [
                      const Expanded(
                          child: Center(
                        child: Icon(
                          Icons.cancel,
                          color: Colors.red,
                          size: 53.3,
                        ),
                      )),
                      Text(controller.codeErr.value,
                          style: const TextStyle(
                              fontSize: 14.2, fontWeight: FontWeight.w500)),
                      const SizedBox(height: 5)
                    ],
                  ),
                )
            ]),
            Expanded(
                child: Center(
              child: controller.codeErr.value.isEmpty
                  ? const Text('请用彩图奔跑APP 扫一扫登录')
                  : TextButton(
                      onPressed: () => controller.flushQrCode(),
                      child: const Text(
                        '重新扫码',
                        style: TextStyle(color: Color(0xff004670)),
                      )),
            ))
          ],
        ));
  }
}