flutter实现水波纹登录页

class LoginPage extends StatefulWidget {  const LoginPage({Key? key}) : super(key: key);  @override  State createState() => _LoginPageState();}class _LoginPageState extends State    with SingleTickerProviderStateMixin {  bool showPassword = false;  bool rememberMe = false;  String? userName = '';  String? passWord = '';  bool loginEnable = false;  TextEditingController nameController = TextEditingController();  TextEditingController pwdController = TextEditingController();  ///动画控制器  late AnimationController _animationController;  Future sharedPreferences = SharedPreferences.getInstance();  void getData() async {    SharedPreferences preferences = await sharedPreferences;    rememberMe = preferences.getBool("rememberMe") == null        ? false        : preferences.getBool("rememberMe")!;    userName = preferences.getString("username");    passWord = preferences.getString("password");    nameController.text = userName!;    pwdController.text = passWord!;    setState(() {});    if (rememberMe) {      loginEnable = true;    }  }  @override  void initState() {    super.initState();    getData();    //创建动画控制器    _animationController = AnimationController(      //默认的初始值      value: 0.0,      //执行时间      duration: const Duration(seconds: 10),      //值变化范围      upperBound: 1,      lowerBound: -1,      vsync: this,    );    //重复执行    _animationController.repeat();  }  @override  void dispose() {    _animationController.dispose();    super.dispose();  }  @override  Widget build(BuildContext context) {    //获取当前组件的大小    Size size = MediaQuery.of(context).size;    return Scaffold(      //允许键盘弹出布局文件上移      resizeToAvoidBottomInset: true,      body: Container(        width: size.width,        height: size.height,        child: Stack(          children: [            //第一部分 水波纹背景            buildFirstAnimation(size),            buildTopIcon(size),            buildBottomButton(size),          ],        ),      ),    );  }  void send() async {    String uName = nameController.text;    String uPwd = pwdController.text;    try {      var result = await LoginDao.login(uName, uPwd, rememberMe);      if (result['code'] == 200) {        showToast(result['message']);        saveOrDeleteData(rememberMe, uName, uPwd);        Get.offNamed("/");      } else {        showWarnToast(result['message']);      }    } on HiNetError catch (e) {      print(e);    }    print('rememberMe$rememberMe,-username$uName,-password$uPwd');// Get.back();  }  void saveOrDeleteData(bool rememberMe, String name, String pwd) async {    if (rememberMe) {      SharedPreferences preferences = await sharedPreferences;      preferences.setBool('rememberMe', rememberMe);      preferences.setString("username", name);      preferences.setString("password", pwd);    } else {      SharedPreferences preferences = await sharedPreferences;      preferences.setBool('rememberMe', rememberMe);      preferences.remove("username");      preferences.remove("password");    }  }  void checkInput() {    bool enable;    if (isNotEmpty(userName) && isNotEmpty(passWord)) {      enable = true;    } else {      enable = false;    }    setState(() {      loginEnable = enable;    });  }  ///  构建 AnimatedBuilder 与裁剪水波纹  ///  AnimatedBuilder buildFirstAnimation(Size size) {    return AnimatedBuilder(      //绑定动画控制器      animation: _animationController,      builder: (BuildContext context, Widget? child) {        //裁剪组件        return ClipPath(          //自定义裁剪路径          clipper: HeaderClipper(_animationController.value),          //裁剪的子Widget          child: Container(            //高度            height: size.height * 0.48,            //线性渐变颜色的样式            decoration: const BoxDecoration(              gradient: LinearGradient(                //线性渐变的方向                  begin: Alignment.bottomLeft,                  end: Alignment.topRight,                  // colors: [Color(0xFFE0647B), Color(0xFFFCDD89)]),                  colors: [Color(0xFF0C8EEA), Color(0xFFFFFFFF)]),            ),          ),        );      },    );  }  Positioned buildTopIcon(Size size) {    return Positioned(      top: size.height * 0.18,      left: 0,      right: 0,      child: Center(        child: TImage(          Assets.images.login.logo.path,          width: 292,          height: 80,        ),      ),    );  }  ///底部对齐的输入框  Positioned buildBottomButton(Size size) {    return Positioned(      bottom: 60,      left: 0,      right: 0,      child: Column(        //包裹子Widget        mainAxisSize: MainAxisSize.min,        //主方向子Widget 底部对齐 （Column的垂直方向）        mainAxisAlignment: MainAxisAlignment.end,        //次方向子Widget居中对齐 （Column的水平方向）        crossAxisAlignment: CrossAxisAlignment.center,        children: [          Container(              width: size.width * 0.8,              margin: const EdgeInsets.only(top: 18),              child: TextField(                controller: nameController,                onChanged: (text) {                  userName = text;                  checkInput();                },                decoration: const InputDecoration(                  labelText: '用户名',                  hintText: '请输入用户名',                  hintStyle: TextStyle(color: Color(0xFFACACAC), fontSize: 14),                  //输入内容的内边距                  contentPadding:                  EdgeInsets.only(top: 20, bottom: 20, left: 38),                  //输入框可用时的边框样式                  enabledBorder: OutlineInputBorder(                    borderSide: BorderSide(color: Colors.lightBlueAccent),                    borderRadius: BorderRadius.all(Radius.circular(30.0)),                  ),                  //输入框获取输入焦点时的边框样式                  focusedBorder: OutlineInputBorder(                    borderSide: BorderSide(color: Colors.green),                    borderRadius: BorderRadius.all(Radius.circular(30.0)),                  ),                ),              )),          Container(            width: size.width * 0.8,            margin: const EdgeInsets.only(top: 18),            child: TextField(              controller: pwdController,              obscureText: !showPassword,              onChanged: (text) {                passWord = text;                checkInput();              },              decoration: InputDecoration(                labelText: '密码',                hintText: '请输入密码',                suffixIcon: IconButton(                  icon: Icon(                    showPassword ? Icons.visibility_off : Icons.visibility,                  ),                  onPressed: () {                    setState(() {                      showPassword = !showPassword;                    });                  },                ),                hintStyle: const TextStyle(color: Color(0xFFACACAC), fontSize: 14),                //输入内容的内边距                contentPadding:                const EdgeInsets.only(top: 20, bottom: 20, left: 38),                //输入框可用时的边框样式                enabledBorder: const OutlineInputBorder(                  borderSide: BorderSide(color: Colors.lightBlueAccent),                  borderRadius: BorderRadius.all(Radius.circular(30.0)),                ),                //输入框获取输入焦点时的边框样式                focusedBorder: const OutlineInputBorder(                  borderSide: BorderSide(color: Colors.green),                  borderRadius: BorderRadius.all(Radius.circular(30.0)),                ),),            ),          ),          Container(            margin: const EdgeInsets.only(top: 20),            padding: const EdgeInsets.only(bottom: 20),            width: size.width * 0.7,            child: ElevatedButton(              onPressed: loginEnable ? send : null,              child: const Text(                '登录',                style: TextStyle(                  color: Colors.white,                  fontSize: 20,                ),              ),            ),          ),          MediaQuery.of(context).size.width <              MediaQuery.of(context).size.height?          _buildOthers():_buildWidth()        ],      ),    );  }  _buildOthers() {    return Column(      children: [        Row(          mainAxisAlignment: MainAxisAlignment.center,          children: [            Checkbox(              value: rememberMe,              onChanged: (value) {                setState(() {                  rememberMe = !rememberMe;                });              },            ),            const Text('保存密码'),          ],        ),        Row(          mainAxisAlignment: MainAxisAlignment.center,          children: const [            Text('还没有账号,联系开通:'),            TextButton(                onPressed: null,                child: Text(                  '',                  style: TextStyle(color: Colors.blueAccent),                ))          ],        )      ],    );  }  _buildWidth() {    return Row(      mainAxisAlignment: MainAxisAlignment.center,      crossAxisAlignment: CrossAxisAlignment.center,      children: [        Row(          mainAxisAlignment: MainAxisAlignment.center,          children: [            Checkbox(              value: rememberMe,              onChanged: (value) {                setState(() {                  rememberMe = !rememberMe;                });              },            ),            const Text('保存密码 '),          ],        ),        const SizedBox(width: 40,),        Row(          mainAxisAlignment: MainAxisAlignment.center,          children: const [            Text(' 还没有账号,联系开通:'),            TextButton(                onPressed: null,                child: Text(                  '',                  style: TextStyle(color: Colors.blueAccent),                ))          ],        )      ],    );  }}