flutter一个login界面（带动画）

如下为具体的实现效果，具体的实现代码以及解释可参考代码中的注释

import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage>
    with SingleTickerProviderStateMixin {
  //创建动画控制器 和动画 （动画用于控制log）
  AnimationController _animationController;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    //创建具体的动画控制器和动画
    _animationController = AnimationController(
        vsync: this, duration: Duration(milliseconds: 1000));
    _animation = new CurvedAnimation(
        parent: _animationController, curve: Curves.bounceOut);
    //为动画添加监听事件
    _animation.addListener(() => this.setState(() {}));
    //执行动画
    _animationController.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueAccent,
      body: Container(
        child: Stack(
          //堆叠布局
          fit: StackFit.expand,
          children: <Widget>[
            Image(
                image: AssetImage("images/girl.jpg"),
                fit: BoxFit.fill,
                color: Colors.black87,
                colorBlendMode: BlendMode.darken),
            Theme(
              data: ThemeData(
                  brightness: Brightness.dark,
                  inputDecorationTheme: InputDecorationTheme(
                      labelStyle: TextStyle(color: Colors.teal, fontSize: 20))),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  FlutterLogo(
                    size: _animation.value * 100,
                  ),
                  Container(
                    //内部为垂直布局 其中添加TextField和button
                      child: Column(
                    children: <Widget>[
                      TextFormField(
                        decoration:
                            InputDecoration(labelText: "Enter the Email"),
                        keyboardType: TextInputType.emailAddress,
                      ),
                      Padding(padding: EdgeInsets.only(top: 30)),
                      TextFormField(
                        decoration:
                            InputDecoration(labelText: "Enter the password"),
                        keyboardType: TextInputType.text,
                        obscureText: true,
                      ),
                      Padding(padding: EdgeInsets.only(top: 20)),
                      MaterialButton(
                        onPressed: () {},
                        color: Colors.teal,
                        textColor: Colors.white,
                        child: Text("Login"),
                        splashColor: Colors.blueAccent,
                      )
                    ],
                  ))
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

标签：动画,界面,animationController,children,Colors,animation,child,login,flutter
来源： https://blog.csdn.net/zhakesipailuo/article/details/91450768