天天看點

flutter一個login界面(帶動畫)

如下為具體的實作效果,具體的實作代碼以及解釋可參考代碼中的注釋

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,
                      )
                    ],
                  ))
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}