farmer_client/lib/pages/login/login.dart

import 'dart:async';

import 'package:farmer_client/components/UI/DefaultButton.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';



class MyRouteLogin extends StatefulWidget {
  @override
  State<MyRouteLogin> createState() => _RouteLogin();
}

class _RouteLogin extends State<MyRouteLogin> {
  bool isButtonEnable = true; //按钮状态  是否可点击
  String buttonText = '发送验证码'; //初始文本
  int count = 5; //初始倒计时时间
  var timer; //倒计时的计时器
  TextEditingController mController = TextEditingController();
  void _buttonClickListen() {
    print('获取验证码按钮');
    setState(() {
      if (isButtonEnable) {
        //当按钮可点击时
        isButtonEnable = false; //按钮状态标记
        _initTimer();
        return null; //返回null按钮禁止点击
      } else {
        //当按钮不可点击时
//        debugPrint('false');
        return null; //返回null按钮禁止点击
      }
    });
  }

  void _initTimer() {
    timer = new Timer.periodic(Duration(seconds: 1), (Timer timer) {
      count--;
      setState(() {
        if (count == 0) {
          timer.cancel(); //倒计时结束取消定时器
          isButtonEnable = true; //按钮可点击
          count = 5; //重置时间
          buttonText = '发送验证码'; //重置按钮文本
        } else {
          buttonText = '重新发送($count)'; //更新文本内容
        }
      });
    });
  }

  @override
  void dispose() {
    timer?.cancel(); //销毁计时器
    timer = null;
    mController.dispose();
    super.dispose();
  }

// -------------逻辑分割-------------------------------------------
  var handlePhones = '';
  var handleCodes = '';

  void _handlePhone(e) => {
    setState(() => {handlePhones = e})
  };

  void _handleCode(e) => {
    setState(() => {handleCodes = e})
  };

  var userContent = {'phones': '', 'code': ''};

  void phoneUser() => {
    setState(() {
      userContent['phones'] = handlePhones;
      userContent['code'] = handleCodes;
    }),
    print('我输入的信息：${userContent}，手机号：${userContent['phones']}')
  };

  @override
  Widget build(BuildContext context) {
    return Container(
        width: 12.w,
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage("images/icon_login.png"),
            fit: BoxFit.cover,
          ),
        ),
        child: Scaffold(
            backgroundColor: Colors.transparent, //把scaffold的背景色改成透明
            appBar: AppBar(
              backgroundColor: Colors.transparent, //把appbar的背景色改成透明
              // elevation: 0,//appbar的阴影
              title: const Text('登陆'),
            ),
            body: Center(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      '您好!',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 50,
                      ),
                    ),
                    Text(
                      '欢迎进入农户端应用！',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 35,
                      ),
                    ),

                    Container(
                      // margin: EdgeInsets.fromLTRB(5,0,0,0),
                        decoration: BoxDecoration(
                            border: Border(
                                bottom: BorderSide(
                                    width: 1, color: Color(0xffe5e5e5)))),
                        child: Flex(
                          direction: Axis.horizontal,
                          children: <Widget>[
                            Expanded(
                              child: TextField(
                                autofocus: true,
                                maxLength: 11,
                                keyboardType: TextInputType.number,
                                cursorColor: Color(0xD4D4D4FF),
                                decoration: const InputDecoration(
                                  contentPadding:EdgeInsets.fromLTRB(30.0, 0, 0, 0),
                                  hintText: "请输入手机号",
                                  prefixIcon: Icon(Icons.phone_iphone_outlined),
                                  counterText: '',
                                  border: OutlineInputBorder(
                                      borderSide: BorderSide.none),
                                ),
                                onChanged: (e) {
                                  _handlePhone(e);
                                  // phoneUser(e);
                                },
                              ),
                            ),
                            Container(
                              width: 100.0,
                              child: SizedBox(
                                child: FlatButton(
                                  disabledColor:
                                  Colors.grey.withOpacity(0.1), //按钮禁用时的颜色
                                  disabledTextColor: Colors.white, //按钮禁用时的文本颜色
                                  textColor: isButtonEnable
                                      ? Colors.white
                                      : Colors.black.withOpacity(0.2), //文本颜色
                                  color: isButtonEnable
                                      ? Color(0xffff703b)
                                      : Colors.grey.withOpacity(0.1), //按钮的颜色
                                  splashColor: isButtonEnable
                                      ? Colors.white.withOpacity(0.1)
                                      : Colors.transparent,
                                  shape: StadiumBorder(side: BorderSide.none),
                                  onPressed: () {
                                    setState(() {
                                      if (isButtonEnable) {
                                        _buttonClickListen();
                                      } else {
                                        return;
                                      }
                                    });
                                  },
                                  child: Text(
                                    '$buttonText',
                                    style: TextStyle(
                                      fontSize: 13,

                                    ),
                                  ),
                                ),
                              ),
                            ),
                          ],
                        )),

                    TextField(
                      keyboardType: TextInputType.number,
                      cursorColor: Color(0xD4D4D4FF),
                      decoration: const InputDecoration(
                          hintText: "请输入验证码",
                          prefixIcon: Icon(Icons.beenhere)),
                      onChanged: (e) {
                        _handleCode(e);
                      },
                    ),
                    // 登录按钮

                    Container(
                      child: DefaultButton(
                        margin:
                        EdgeInsets.fromLTRB(0, 30.0, 0, 0), //可选配置，自定义控件中有默认配置
                        text: "登陆",
                        width: 200.0,
                        height: 50.0,
                        fontSize: 20.0,
                        backColor: Color(0xffff703b),
                        color: Colors.white,
                        onPressed: () {
                          Navigator.push(
                            context,
                            MaterialPageRoute(builder: (context) {
                              return MyRouteLogin();
                            }),
                          );
                        },
                      ),
                    )
                  ],
                ))));
  }
}