Flutter-登陆页面
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
AnimationController _animationController;
Animation _animation;
GlobalKey<FormState> _formKey = new GlobalKey<FormState>();
String _name;
String _password;
@override
void initState() {
super.initState();
_animationController = AnimationController(
vsync: this, duration: Duration(milliseconds: 1000));
_animation =
CurvedAnimation(curve: Curves.easeInOut, parent: _animationController);
_animation.addListener(() => setState(() {}));
_animationController.forward();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
fit: StackFit.expand,
children: <Widget>[
Image.network(
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554361176515&di=9241aeb8f6f657244334a295e2d5d08f&imgtype=0&src=http%3A%2F%2Fimages.liqucn.com%2Fimg%2Fh21%2Fh58%2Fimg_localize_343bc043c369b3ade96ea7f707fde2ec_400x400.png',
fit: BoxFit.cover,
color: Colors.black87,
colorBlendMode: BlendMode.darken,
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FlutterLogo(
size: _animation.value * 100,
),
Form(
key: _formKey,
child: Theme(
data: ThemeData(
brightness: Brightness.dark,
primarySwatch: Colors.teal,
inputDecorationTheme: InputDecorationTheme(
labelStyle: TextStyle(
color: Colors.teal,
fontSize: 20,
))),
child: Container(
padding: EdgeInsets.all(40),
child: Column(
children: <Widget>[
TextFormField(
decoration: InputDecoration(
// hintText: '输入邮箱',
labelText: '输入邮箱',
),
keyboardType: TextInputType.emailAddress,
autofocus: true,
onSaved: (val) {
_name = val;
},
),
TextFormField(
decoration: InputDecoration(
// hintText: '输入密码',
labelText: '输入密码',
),
keyboardType: TextInputType.phone,
obscureText: true,
validator: (val) {
return val.length < 4 ? "密码长度错误" : null;
},
onSaved: (val) {
_password = val;
},
),
Padding(
padding: EdgeInsets.only(top: 20),
),
MaterialButton(
height: 40,
minWidth: 100,
color: Colors.teal,
textColor: Colors.white,
child: Text('登 录'),
onPressed: _forSubmitted,
splashColor: Colors.red,
)
],
),
),
),
)
],
)
],
));
}
void _forSubmitted() {
var _form = _formKey.currentState;
if (_form.validate()) {
_form.save();
print(_name);
print(_password);
}
}
}
