app-zj/lib/page/login/login_page.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';
import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
import 'package:lszlgl/router/my_navigator.dart';
import 'package:lszlgl/widget/button.dart';

import '../../base/base_state.dart';
import '../main_tab_page.dart';

/// 登录页面
class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends BaseState<LoginPage> {
  late TextEditingController accountCtrl;
  late TextEditingController pwdCtrl;

  void onLogin() {
    var account = accountCtrl.text;
    var pwd = pwdCtrl.text;
    if (account.isEmpty || pwd.isEmpty) {
      SmartDialog.showToast('请输入账号和密码');
      return;
    }
    MyRouter.startMain(popAll: true);
  }

  @override
  void initState() {
    super.initState();
    accountCtrl = TextEditingController();
    pwdCtrl = TextEditingController();
  }

  @override
  void dispose() {
    accountCtrl.dispose();
    pwdCtrl.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF49AAF2),
      body: KeyboardDismissOnTap(
        dismissOnCapturedTaps: true,
        child: SingleChildScrollView(
          physics: const BouncingScrollPhysics(),
          child: Stack(
            children: [
              Positioned.fill(child: Image.asset(imgLoginBg, fit: BoxFit.fill)),
              SizedBox(
                height: MediaQuery.of(context).size.height,
                child: buildBody(),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget buildBody() {
    return Column(
      children: [
        const SizedBox(height: 88),
        Container(
          width: double.infinity,
          padding: const EdgeInsets.symmetric(horizontal: 72),
          child: Image.asset(imgLoginTitle, fit: BoxFit.fill),
        ),
        const SizedBox(height: 32),
        loginContainer(),
      ],
    );
  }

  Widget loginContainer() {
    return SizedBox(
      width: double.infinity,
      child: Stack(
        alignment: Alignment.topCenter,
        children: [
          buildInputContent(),
          userTitle(),
        ],
      ),
    );
  }

  Widget userTitle() {
    return Container(
      height: 48,
      width: 174,
      alignment: Alignment.center,
      decoration: const BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.all(Radius.circular(100)),
        border: Border.fromBorderSide(BorderSide(color: Color(0xFF49AAF2), width: 1)),
        boxShadow: [BoxShadow(color: Color(0x941C90FF), offset: Offset(0, 3))],
      ),
      child: const Text(
        '用户登录',
        style: TextStyle(color: Color(0xFF1187DE), fontSize: 18),
      ),
    );
  }

  Widget buildInputContent() {
    return Container(
      margin: const EdgeInsets.only(top: 14, left: 18, right: 18),
      padding: const EdgeInsets.all(10),
      decoration: BoxDecoration(
        color: Colors.white.withOpacity(0.2),
        borderRadius: const BorderRadius.all(Radius.circular(24)),
      ),
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 32),
        alignment: Alignment.center,
        decoration: const BoxDecoration(color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(24))),
        child: Column(
          children: [
            const SizedBox(height: 72),
            buildEdit(
              ctrl: accountCtrl,
              hint: '请输入登录账号',
              icon: imgLoginAccount,
              action: TextInputAction.next,
            ),
            const SizedBox(height: 32),
            buildEdit(
              ctrl: pwdCtrl,
              hint: '请输入登录密码',
              icon: imgLoginPwd,
              obscure: true,
              onSubmit: (value) => onLogin(),
            ),
            const SizedBox(height: 80),
            buildLoginBtn(),
            const SizedBox(height: 56),
          ],
        ),
      ),
    );
  }

  Widget buildEdit({
    required TextEditingController ctrl,
    required String hint,
    String? icon,
    TextInputAction action = TextInputAction.done,
    bool obscure = false,
    ValueChanged? onSubmit,
  }) {
    return TextField(
      controller: ctrl,
      decoration: InputDecoration(
        prefixIcon: icon == null
            ? null
            : Padding(
                padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
                child: Image.asset(icon, height: 22),
              ),
        prefixIconConstraints: const BoxConstraints(),
        border: const OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(100))),
        enabledBorder: const OutlineInputBorder(
          borderSide: BorderSide(color: Color(0xFFE6E6E6), width: 1),
          borderRadius: BorderRadius.all(Radius.circular(100)),
        ),
        hintText: hint,
        hintStyle: const TextStyle(color: Color(0xFFBBBBBB)),
        isDense: true,
        contentPadding: EdgeInsets.zero,
      ),
      style: const TextStyle(fontSize: 14),
      textInputAction: action,
      obscureText: obscure,
      onSubmitted: onSubmit,
    );
  }

  Widget buildLoginBtn() {
    return MyButton(
      '登录',
      onTap: onLogin,
      gradient: const LinearGradient(colors: [Color(0xFF60B5F4), Color(0xFF62A4D6)]),
    );
    return GestureDetector(
      onTap: onLogin,
      child: Container(
        alignment: Alignment.center,
        padding: const EdgeInsets.symmetric(vertical: 12),
        decoration: const BoxDecoration(
          gradient: LinearGradient(colors: [Color(0xFF60B5F4), Color(0xFF62A4D6)]),
          borderRadius: BorderRadius.all(Radius.circular(100)),
        ),
        child: const Text('登录', style: TextStyle(fontSize: 16, color: Colors.white)),
      ),
    );
  }
}