如下為具體的實作效果,具體的實作代碼以及解釋可參考代碼中的注釋
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIyZuBnLzcDNxATMzcTMxEjNwkTMwIzLc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
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,
)
],
))
],
),
)
],
),
),
);
}
}