首先来看一下效果图
注意事项：
动态改变Widget，需要使用StatefulWidget，在更新Widget时，使用setState就行。废话不说，上代码：
import 'package:flutter/material.dart';
import 'dart:io';
import 'package:flutter/services.dart';
var usernameController = new TextEditingController();
var passworkController = new TextEditingController();
String userName;
String passwork;
bool checkboxSelected;
void main() {
runApp(MyApp());
if (Platform.isAndroid) {
// 以下两行 设置android状态栏为透明的沉浸。写在组件渲染之后，是为了在渲染后进行set赋值，覆盖状态栏，写在渲染之前MaterialApp组件会覆盖掉这个值。
SystemUiOverlayStyle systemUiOverlayStyle =
SystemUiOverlayStyle(statusBarColor: Colors.transparent);
SystemChrome.setSystemUIOverlayStyle(
systemUiOverlayStyle.copyWith(statusBarBrightness: Brightness.light));
// SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light
// .copyWith(statusBarBrightness: Brightness.light));
}
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SingleChildScrollView(
child: Column(
//MainAxisSize在主轴方向占有空间的值，默认是max。还有一个min
mainAxisSize: MainAxisSize.max,
//MainAxisAlignment：主轴方向上的对齐方式，会对child的位置起作用，默认是start。
mainAxisAlignment: MainAxisAlignment.start,
children:
iconImg(),
editWidget(),
bt_Widget(),
radioBt_Widget(),
],
),
),
),
);
}
}
/**
* icon界面
*/
class iconImg extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
alignment: Alignment.topCenter,
child: Container(
decoration: BoxDecoration(
borderRadius: new BorderRadius.circular((20.0)), // 圆角度
boxShadow: [
///阴影颜色/位置/大小等
BoxShadow(
color: Colors.grey[300],
offset: Offset(1, 1),
///模糊阴影半径
blurRadius: 10,
),
BoxShadow(
color: Colors.grey[300],
offset: Offset(-1, -1),
blurRadius: 5),
BoxShadow(
color: Colors.grey[200],
offset: Offset(1, -1),
blurRadius: 10),
BoxShadow(
color: Colors.grey[100],
offset: Offset(-1, 1),
blurRadius: 10)
],
border: Border.all(
width: 1.0,
color: Color(0xFFE0E0E0),
)),
margin: EdgeInsets.only(top: 60.0),
child: Container(
decoration: BoxDecoration(
borderRadius: new BorderRadius.circular((20.0)), // 圆角度
color: Colors.white,
),
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children:
new Padding(
padding: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
child: Container(
width: 70.0,
height: 70.0,
child: Image.asset(
'images/icon.png',
scale: 2.85,
alignment: Alignment.center,
),
),
),
],
),
),
),
);
}
}
class editWidget extends StatefulWidget {
editWidget({Key key}) : super(key: key);
@override
_editWidget createState() => new _editWidget();
}
/**
* 输入框界面
*/
class _editWidget extends State
var userClearFlag = false;
var pswClearFlag = false;
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
padding: EdgeInsets.fromLTRB(30.0, 5.0, 10.0, 10.0),
child: Column(
children:
Container(
alignment: Alignment.centerLeft,
margin: EdgeInsets.only(bottom: 30.0, top: 100.0),
child: Text(
'用户登录',
textAlign: TextAlign.left,
style: TextStyle(fontSize: 22.0, color: Color(0xff333333)),
),
),
Row(
children:
Image.asset(
'images/user.png',
width: 18.0,
),
Expanded(
child: Container(
margin: EdgeInsets.only(left: 10.0, right: 5.0),
child: TextField(
controller: usernameController,
maxLines: 1,
//是否自动更正
autocorrect: true,
//是否自动对焦
autofocus: false,
textInputAction: TextInputAction.unspecified,
decoration: InputDecoration(
hintStyle:
TextStyle(color: Color(0xffBFBFBF), fontSize: 16.0),
hintText: '请输入用户名',
border: InputBorder.none,
prefixStyle: TextStyle(
color: Color(0xff333333), fontSize: 16.0)),
onChanged: (val) {
setState(() {
pswClearFlag = false;
if (val.length > 0)
userClearFlag = true;
else
userClearFlag = false;
});
print(val);
},
onEditingComplete: () {
print('点击键盘');
},
onSubmitted: (val) {
print('完成${val}');
},
),
),
),
Offstage(
offstage: !userClearFlag,
child: GestureDetector(
child: Container(
margin: EdgeInsets.only(right: 10.0),
child: Image.asset(
'images/clear.png',
width: 15.0,
),
),
onTap: () {
print('清空');
usernameController.clear();
},
),
),
],
),
Container(
height: 1.0,
margin: EdgeInsets.only(bottom: 40.0),
decoration: BoxDecoration(
border: Border.all(width: 1.0, color: Color(0xffD9D9D9)),
),
),
Row(
children:
Image.asset(
'images/psw.png',
width: 18.0,
),
Expanded(
child: Container(
margin: EdgeInsets.only(left: 10.0, right: 5.0),
child: TextField(
controller: passworkController,
maxLines: 1,
//是否自动更正
autocorrect: true,
//是否自动对焦
autofocus: false,
// 是否是密码
obscureText: true,
textInputAction: TextInputAction.unspecified,
keyboardType: TextInputType.phone,
decoration: InputDecoration(
hintStyle:
TextStyle(color: Color(0xffBFBFBF), fontSize: 16.0),
prefixStyle:
TextStyle(color: Color(0xff333333), fontSize: 16.0),
hintText: '请输入密码',
border: InputBorder.none),
onChanged: (val) {
setState(() {
userClearFlag = false;
if (val.length > 0)
pswClearFlag = true;
else
pswClearFlag = false;
});
print(val);
},
),
),
),
Offstage(
offstage: !pswClearFlag,
child: GestureDetector(
child: Container(
margin: EdgeInsets.only(right: 10.0),
child: Image.asset(
'images/clear.png',
width: 15.0,
),
),
onTap: () {
passworkController.clear();
},
),
),
],
),
Container(
height: 1.0,
decoration: BoxDecoration(
border: Border.all(width: 1.0, color: Color(0xffD9D9D9)),
),
),
],
),
);
}
}
/**
* 登录按钮
*/
class bt_Widget extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return GestureDetector(
child: Container(
margin:
EdgeInsets.only(left: 30.0, right: 30.0, top: 50.0, bottom: 10.0),
padding: EdgeInsets.only(top: 10.0, bottom: 10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: Color(0xff3896FF),
boxShadow: [
///阴影颜色/位置/大小等
BoxShadow(
color: Colors.grey[200],
offset: Offset(1, 1),
///模糊阴影半径
blurRadius: 10,
),
BoxShadow(
color: Colors.grey[200], offset: Offset(-1, -1), blurRadius: 5),
BoxShadow(
color: Colors.grey[200], offset: Offset(1, -1), blurRadius: 10),
BoxShadow(
color: Colors.grey[200], offset: Offset(-1, 1), blurRadius: 10)
],
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children:
Text(
'登 录',
style: TextStyle(fontSize: 16.0, color: Color(0xffffffff)),
textAlign: TextAlign.center,
),
],
),
),
onTap: () {
showAlertDialog(context);
},
);
}
void showAlertDialog(BuildContext context) {
showDialog(
context: context,
builder: (_) => new AlertDialog(
title: new Text("Dialog Title"),
content: new Text("This is my content"),
actions:
new FlatButton(
child: new Text("CANCEL"),
onPressed: () {
Navigator.of(context).pop();
},
),
new FlatButton(
child: new Text("OK"),
onPressed: () {
Navigator.of(context).pop();
},
)
]));
}
}
class radioBt_Widget extends StatefulWidget {
radioBt_Widget({Key key}) : super(key: key);
@override
_radioBt_Widget createState() => new _radioBt_Widget();
}
/**
* 记住密码单选框
*/
class _radioBt_Widget extends State
bool _checkboxSelected = true;
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
margin: EdgeInsets.only(left: 25.0, top: 15.0),
child: GestureDetector(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children:
Container(
margin: EdgeInsets.only(right: 5.0),
padding: EdgeInsets.only(top: 5.0, bottom: 5.0, left: 5.0),
child: Image.asset(
_checkboxSelected ? 'images/wu.png' : 'images/gou.png',
width: 15.0,
),
),
Text(
'记住密码',
style: TextStyle(fontSize: 14.0, color: Color(0xff333333)),
)
],
),
onTap: () {
setState(() {
_checkboxSelected = !_checkboxSelected;
});
},
),
);
}
}