运行界面
登录界面
文件页面
个人页面
说明
在登录页面输入任意账号密码即可登录
登录后会跳转到文件页面
文件页面文件都是模拟的，文件的功能等都还未实现
个人主页的功能项目前只是图片，有退出功能
源代码
main
import 'package:flutter/material.dart';
import 'package:myapp/personalCenter.dart';
import 'package:myapp/myHomePage.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
title: 'Baidu Disk',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: LoginPage(),
);
}
}
class LoginPage extends StatefulWidget {
State createState() {
return _LoginPageState();
}
}
class _LoginPageState extends State<LoginPage> {
final _biggerFont =
const TextStyle(fontSize: 30.0, fontWeight: FontWeight.w600);
final _normalFont = const TextStyle(fontSize: 18.0);
final _borderRadius = BorderRadius.circular(6);
String _accountText = '';
String _pwdText = '';
bool _isEnableLogin = false;
bool _obscureText = true;
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('LoginPage'),
),
body: Container(
margin: EdgeInsets.only(left: 25, right: 25),
child: Column(
children: <Widget>[
_buildTopWidget(),
_buildAccountEditTextField(),
_buildPwdEditTextField(),
_buildLoginButton(),
],
),
),
);
}
Widget _buildTopWidget() {
return Container(
margin: EdgeInsets.only(top: 40),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Image.asset(
'assets/baiduLogo.png',
),
Text(
'欢迎登录百度账户',
style: _biggerFont,
),
],
),
);
}
void _checkUserInput() {
if (_accountText.isNotEmpty && _pwdText.isNotEmpty) {
if (_isEnableLogin) return;
} else {
if (!_isEnableLogin) return;
}
setState(() {
_isEnableLogin = !_isEnableLogin;
});
}
Widget _buildAccountEditTextField() {
return Container(
margin: EdgeInsets.only(top: 80),
child: TextField(
onChanged: (text) {
_accountText = text;
_checkUserInput();
},
style: _normalFont,
decoration: InputDecoration(
hintText: '请输入手机号/用户名/邮箱',
filled: true,
fillColor: Color.fromARGB(255, 240, 240, 240),
contentPadding: EdgeInsets.only(left: 8),
border: OutlineInputBorder(
borderSide: BorderSide.none, borderRadius: _borderRadius),
),
),
);
}
Widget _buildPwdEditTextField() {
return Container(
margin: EdgeInsets.only(top: 15),
child: TextField(
onChanged: (text) {
_pwdText = text;
_checkUserInput();
},
style: _normalFont,
obscureText: _obscureText,
decoration: InputDecoration(
hintText: '请输入密码',
filled: true,
fillColor: Color.fromARGB(255, 240, 240, 240),
contentPadding: EdgeInsets.only(left: 8),
border: OutlineInputBorder(
borderSide: BorderSide.none, borderRadius: _borderRadius),
suffixIcon: IconButton(
onPressed: () => setState(() => _obscureText = !_obscureText),
//远程图片加载
// icon: Image.network(
// _obscureText ? 'https://pic.kurihada.com/assets/closeEye.png' : 'https://pic.kurihada.com/assets/openEye.png',
// width: 20,
// height: 20,
// ),
//本地图片加载
icon: Image.asset(
_obscureText ? 'assets/closeEye.png' : 'assets/openEye.png',
width: 20,
height: 20,
),
splashColor: Colors.transparent,
// 点击去掉阴影效果
highlightColor: Colors.transparent, //点击去掉阴影效果
),
),
),
);
}
_getLoginButtonPressed() {
if (!_isEnableLogin) return null;
return () {
showDialog(
context: this.context,
builder: (context) {
return AlertDialog(
title: Text('登录提醒'),
content: Text('登录账户: $_accountText \n'
'登录密码: $_pwdText'),
actions: <Widget>[
FlatButton(
color: Colors.blue,
child: Text(
'确 认',
style: _normalFont,
),
onPressed: () {
Navigator.of(context).pop();
Navigator.push(context,
MaterialPageRoute(builder: (context) => MyHomePage()));
},
),
FlatButton(
color: Colors.blue,
child: Text(
'取 消',
style: _normalFont,
),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
});
};
}
bool _login() {
if (_accountText == "admin" && _pwdText == '123456') {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => PersonalCenter(), maintainState: false));
return true;
} else {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text("提示"),
content: Text("账号或密码错误，请检查"),
actions: <Widget>[
ElevatedButton(
child: Text("确认"),
onPressed: () {
Navigator.of(context).pop(true); //关闭对话框
},
)
],
);
});
return false;
}
}
Widget _buildLoginButton() {
return Container(
margin: EdgeInsets.only(top: 30),
width: MediaQuery.of(context).size.width,
height: 45,
child: ElevatedButton(
child: Text(
"登录",
style: _normalFont,
),
style: ButtonStyle(
//字体颜色
foregroundColor: MaterialStateProperty.resolveWith(
(states) {
if (_accountText.isNotEmpty && _pwdText.isNotEmpty) {
//获取焦点时的颜色
return Colors.white;
}
//默认状态使用灰色
return Colors.black38;
},
),
//背景颜色
backgroundColor: MaterialStateProperty.resolveWith(
(states) {
if (_accountText.isNotEmpty && _pwdText.isNotEmpty) {
//获取焦点时的颜色
return Colors.blue;
}
//默认状态使用灰色
return Color.fromARGB(255, 220, 220, 220);
},
),
side: MaterialStateProperty.all(
BorderSide(width: 1, color: Colors.white)), //边框
shape: MaterialStateProperty.all(BeveledRectangleBorder(
borderRadius: BorderRadius.circular(8))), //圆角弧度
),
// onPressed: _getLoginButtonPressed(),
onPressed: _getLoginButtonPressed(),
),
);
}
}
Comments | NOTHING