void main() {
runApp(
MaterialApp(
title: 'hello flutter',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Main(),
),
);
if (Platform.isAndroid) {
// 以下两行 设置android状态栏为透明的沉浸。写在组件渲染之后,是为了在渲染后进行set赋值,覆盖状态栏,写在渲染之前 MaterialApp组件会覆盖掉这个值。
SystemUiOverlayStyle systemUiOverlayStyle =
SystemUiOverlayStyle(statusBarColor: Colors.transparent);
SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
}
}
class Main extends StatelessWidget {
//手机号的控制器
TextEditingController phoneController = TextEditingController();
//密码的控制器
TextEditingController passController = TextEditingController();
void login() async {
if (phoneController.text.length != 11) {
ToastUtil.showToast("请输入11位手机号码");
} else if (passController.text.length == 0) {
ToastUtil.showToast("密码不能为空");
} else if (passController.text.length < 6) {
ToastUtil.showToast("密码格式错误");
} else {
ToastUtil.showToast("登录成功");
//phoneController.clear();
//passController.clear();
}
}
@override
Widget build(BuildContext context) {
return Container(
//宽度
width: double.infinity,
//高度
height: double.infinity,
// 盒子样式
decoration: new BoxDecoration(
color: Colors.white,
//设置Border属性给容器添加边框
border: new Border.all(
//为边框添加颜色
color: Colors.white,
//边框宽度
width: 0,
),
),
child: Column(
children: [
Expanded(
flex: 1,
child: Stack(
alignment: Alignment.topCenter,
children: <Widget>[
Positioned(
child: Image.asset(
'images/icon.webp',
fit: BoxFit.cover,
width: double.infinity,
)),
Positioned(
top: 35.0,
child: Text(
'登录',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.normal,
fontSize: 20.0,
decoration: TextDecoration.none,
),
textAlign: TextAlign.center,
),
)
],
),
),
Expanded(
flex: 1,
child: Scaffold(
body: SingleChildScrollView(
child: Container(
padding: const EdgeInsets.only(top: 50.0),
// 盒子样式
decoration: new BoxDecoration(
color: Colors.white,
//设置Border属性给容器添加边框
border: new Border.all(
//为边框添加颜色
color: Colors.white,
//边框宽度
width: 0,
),
),
child: Column(
children: [
editText(Icon(Icons.person), '请输入您的账号',
TextInputType.number, false, phoneController),
editText(Icon(Icons.lock), '请输入您的密码',
TextInputType.visiblePassword, true, passController),
GestureDetector(
child: Container(
alignment: Alignment.center,
margin: const EdgeInsets.only(
top: 40, left: 20, right: 20),
//宽度
width: double.infinity,
//高度
height: 48.0,
// 盒子样式
decoration: new BoxDecoration(
color: Colors.blue,
//设置Border属性给容器添加边框
border: new Border.all(
//为边框添加颜色
color: Colors.blue,
//边框宽度
width: 1,
),
borderRadius:
BorderRadius.all(Radius.circular(30.0)),
),
child: Text(
'登录',
style: TextStyle(
color: Colors.white,
decoration: TextDecoration.none,
fontSize: 22.0,
),
),
),
behavior: HitTestBehavior.opaque,
onTap: () {
login();
},
)
],
),
),
))),
],
),
);
}
Widget editText(Widget icon, String labelText, TextInputType inputType,
bool b, TextEditingController controller) {
return Container(
margin: const EdgeInsets.only(left: 20.0, right: 20.0),
//宽度
width: double.infinity,
//高度
height: 50.0,
child: Column(
children: [
Expanded(
child: TextField(
// 控制器用于获取输入的内容
controller: controller,
keyboardType: inputType,
decoration: InputDecoration(
contentPadding: EdgeInsets.all(10.0),
icon: icon,
hintText: labelText,
),
//onChanged: _textFieldChanged,
autofocus: false,
obscureText: b,
maxLength: 11,
maxLines: 1,
),
),
],
),
);
}
}
最后实现效果: