运行界面
登录页面
个人主页
说明
账号：admin
密码：123456
对于账号和密码的格式没有进行验证
图片资源可以用外部图片，也可下载我以上传的资源，已放在:https://pic.kurihada.com/assets 中，在后面添加相应需要的文件名即可，例如：https://pic.kurihada.com/assets/baiduLogo.png
源代码
mian.dart
import 'package:flutter/material.dart';
import 'package:myapp/personal_center.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 () {};
}
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: () {
if (_getLoginButtonPressed() != null) _login();
},
),
);
}
}
personal_center.dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:myapp/res/listData.dart';
class PersonalCenter extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("个人中心"),
),
body: Container(
child: Column(
children: <Widget>[
_userHead(),
_functionalDomain(),
_quit(context),
],
),
));
}
}
String _userName = '移动用户';
double _usedSpace = 668;
double _totSpace = 3220;
Widget _userHead() {
return Container(
height: 200,
width: 600,
color: Colors.white,
child: Stack(
children: <Widget>[
Align(
alignment: Alignment(-0.95, -0.65),
child: Container(
width: 100.0,
height: 100.0,
decoration: new BoxDecoration(
borderRadius: BorderRadius.circular(150.0),
image: DecorationImage(
image: new AssetImage('assets/user-head.jpg'),
fit: BoxFit.cover,
),
),
),
),
Align(
alignment: Alignment(-0.35, -0.75),
child: Text(
_userName,
style: TextStyle(
fontSize: 30,
color: Colors.black,
),
),
),
Align(
alignment: Alignment(0.07, -0.68),
child: Container(
width: 30.0,
height: 30.0,
decoration: new BoxDecoration(
borderRadius: BorderRadius.circular(150.0),
image: DecorationImage(
image: new AssetImage('assets/user-level0.png'),
fit: BoxFit.cover,
),
),
),
),
Align(
alignment: Alignment(0.25, -0.72),
child: Container(
padding: EdgeInsets.only(left: 120.0, right: 50.0, top: 50.0),
child: LinearProgressIndicator(
value: _usedSpace/_totSpace,
backgroundColor: Colors.black12,
),
),
),
Align(
alignment: Alignment(-0.23, -0.1),
child: Text(
_usedSpace.toString()+'GB/'+_totSpace.toString()+'GB',
style: TextStyle(
fontSize: 20,
color: Colors.black38,
),
),
),
],
),
);
}
List<Widget> _getListData() {
var tempList = listData.map((value) {
return Container(
child: Column(
children: <Widget>[
Image.asset(
value['imageUrl'],
width: 90.0,
height: 90.0,
),
Text(
value['title'],
textAlign: TextAlign.center,
style: TextStyle(fontSize: 20),
),
],
),
);
});
return tempList.toList();
}
Widget _functionalDomain() {
return GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4, //横轴三个子widget
childAspectRatio: 1.0, //宽高比为1时，子widget
),
children: _getListData(),
shrinkWrap: true,
);
}
Widget _quit(BuildContext context) {
final _normalFont = const TextStyle(fontSize: 18.0);
return Container(
margin: EdgeInsets.only(top: 30),
width: MediaQuery.of(context).size.width,
height: 45,
alignment: AlignmentDirectional.bottomCenter,
child: ElevatedButton(
child: Text(
"退出",
style: _normalFont,
),
style: ButtonStyle(
side: MaterialStateProperty.all(
BorderSide(width: 1, color: Colors.white)), //边框
shape: MaterialStateProperty.all(BeveledRectangleBorder(
borderRadius: BorderRadius.circular(8))), //圆角弧度
),
onPressed: () {
Navigator.pop(context);
},
),
);
}
Comments NOTHING