flutter 自己项目中的登录界面
问题是这个方式是用于列表的import 'dart:convert';import 'package:dio/dio.dart';import 'package:flutter/material.dart';import 'package:fluttertoast/fluttertoast.dart';import 'package:music/ResetPassword.dart';import
·
问题是这个方式是用于列表的
import 'dart:convert';
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:music/ResetPassword.dart';
import 'package:music/data/LoginByPhone.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'DialogRouter.dart';
import 'LoadingDialog.dart';
import 'MusicPlayer.dart';
import 'RegisterDart.dart';
import 'ResetPasswordDart.dart';
//账号登录界面
class LoginAccountStateless extends StatelessWidget {
const LoginAccountStateless({key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(home: LoginAccount1());
}
}
class LoginAccount1 extends StatefulWidget {
const LoginAccount1({key}) : super(key: key);
@override
LoginAccount1State createState() => LoginAccount1State();
}
class LoginAccount1State extends State<LoginAccount1> {
//焦点
final FocusNode _focusNodeUserPhone = FocusNode();
final FocusNode _focusNodePassWord = FocusNode();
//是否显示提示语句
bool mUserPhone = false;
bool mUserPassWord = false;
//是否显示正在登陆中
bool mPrompt=false;
//手机号码输入框尾部的清除按钮
var _isShowPhoneClear = false;
//密码输入框尾部的清除按钮
var _isShowPassWordClear = false;
//是否显示密码
var _isShowPwd = false;
//电话输入框控制器，此控制器可以获取里面的内容
final TextEditingController _userPhoneController = TextEditingController();
//密码输入框控制器
final TextEditingController _userPassWordController = TextEditingController();
@override
void initState() {
// TODO: implement initState
//设置焦点监听
_focusNodeUserPhone.addListener(_focusNodeListener);
_focusNodePassWord.addListener(_focusNodeListener);
//手机号码输入框监听
_userPhoneController.addListener(() {
// 监听文本框输入变化，当有内容的时候，显示尾部清除按钮，否则不显示
if (_userPhoneController.text.length > 0) {
_isShowPhoneClear = true;
} else {
_isShowPhoneClear = false;
}
if (_userPhoneController.text.length == 11) {
mUserPhone = false;
}
setState(() {});
});
//密码输入框监听
_userPassWordController.addListener(() {
// 监听文本框输入变化，当有内容的时候，显示尾部清除按钮，否则不显示
if (_userPassWordController.text.length > 0) {
_isShowPassWordClear = true;
} else {
_isShowPassWordClear = false;
}
if (_userPassWordController.text.length < 8 ||
_userPassWordController.text.length > 20) {
mUserPassWord = false;
}
setState(() {});
});
super.initState();
}
@override
void dispose() {
// TODO: implement dispose
// 移除焦点监听
_focusNodeUserPhone.removeListener(_focusNodeListener);
_focusNodePassWord.removeListener(_focusNodeListener);
_userPhoneController.dispose();
_userPassWordController.dispose();
super.dispose();
}
// 监听焦点
Future<Null> _focusNodeListener() async {
if (_focusNodeUserPhone.hasFocus) {
// 取消密码框的焦点状态
_focusNodePassWord.unfocus();
}
if (_focusNodePassWord.hasFocus) {
// 取消电话框焦点状态
_focusNodeUserPhone.unfocus();
}
}
//登录接口
loginByPhone() async {
setState(() {
mPrompt=true;
});
var apiUrl = "http://47.242.63.216:9527/v1/user/loginByPhone";
//参数
Map map = {};
//ID写死
map["app_id"] = "10001";
//手机型号
map["mobile_model"] = "HongMi";
//手机系统
map["mobile_os"] = "android";
//密码
map["password"] = _userPassWordController.text;
//手机号
map["phone"] = _userPhoneController.text;
map["uuid"] = "1";
map["version_code"] = "1";
map["version_name"] = "1";
Response result = await Dio().post(apiUrl, data: map);
debugPrint("${result}");
//json解析
Map<String, dynamic> login = json.decode(result.toString());
var httpRes = LoginByPhone.fromJson(login);
//如果成功就吐司
if (httpRes.code == 200) {
//数据缓存写入token值
SharedPreferences prefs = await SharedPreferences.getInstance();
await prefs.setString('token', httpRes.data.token);
await prefs.setInt('userId', httpRes.data.userId);
Fluttertoast.showToast(
msg: "登录成功",
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.BOTTOM,
timeInSecForIosWeb: 10,
backgroundColor: Colors.white,
textColor: Colors.black,
fontSize: 16.0);
//登录成功后进入主界面
Navigator.pushAndRemoveUntil(
context,
MaterialPageRoute(builder: (context) => const MusicPlayer()),
(route) => route == null,
);
} else {
setState(() {
mPrompt=false;
});
Fluttertoast.showToast(
msg: "登录失败",
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.BOTTOM,
timeInSecForIosWeb: 10,
backgroundColor: Colors.white,
textColor: Colors.black,
fontSize: 16.0);
}
// if (httpRes.code != 200) {
// Fluttertoast.showToast(
// msg: "${httpRes.msg}}",
// toastLength: Toast.LENGTH_SHORT,
// gravity: ToastGravity.BOTTOM,
// timeInSecForIosWeb: 10,
// backgroundColor: Colors.white,
// textColor: Colors.black,
// fontSize: 16.0);
// //登录成功后进入主界面
// Navigator.pushAndRemoveUntil(
// context,
// MaterialPageRoute(builder: (context) => const MusicPlayer()),
// (route) => route == null,
// );
// }
}
@override
Widget build(BuildContext context) {
//欢迎区域
Widget welcomeArea = Container(
margin: EdgeInsets.only(left: 60, top: 70),
child: Text(
"歡迎您的登錄！",
style: TextStyle(color: Color(0xFFBEAA72), fontSize: 24),
),
);
//输入文本框区域
Widget inputTextArea = Container(
margin: const EdgeInsets.only(left: 60, right: 60, top: 70),
child: Form(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: [
Expanded(
child: TextFormField(
style: const TextStyle(color: Color(0xFFFFE5B9)),
controller: _userPhoneController,
focusNode: _focusNodeUserPhone,
//设置键盘类型
keyboardType: TextInputType.number,
decoration: InputDecoration(
border: OutlineInputBorder(borderSide: BorderSide.none),
hintText: "請鍵入電郵地址",
hintStyle: const TextStyle(color: Color(0xFF54514C)),
prefixIcon: Image.asset(
"assets/base_widgets/icon_login_account_phone.png",
scale: 1.6,
),
),
),
),
//是否删除
if (_isShowPhoneClear)
GestureDetector(
onTap: () {
setState(() {
// 清空输入框内容
_userPhoneController.clear();
});
},
child: Container(
height: 20,
width: 20,
margin: const EdgeInsets.only(left: 5.0),
child: Image.asset(
"assets/base_widgets/icon_login_delete.png"),
),
),
if (!_isShowPhoneClear)
GestureDetector(
child: Container(
height: 0,
width: 0,
margin: const EdgeInsets.only(left: 5.0),
child: Image.asset(
"assets/base_widgets/icon_login_delete.png"),
),
),
],
),
//分割线
Container(
margin: const EdgeInsets.only(bottom: 2),
height: 1,
decoration: const BoxDecoration(color: Color(0xFF3B3631)),
),
//手机号提示语
if (mUserPhone == true)
Container(
child: Text(
"*請輸入正確的11位手機號碼",
style: TextStyle(color: Color(0xFFD04343), fontSize: 13),
),
),
if (mUserPhone == false)
Container(
child: Text(
"",
style: TextStyle(color: Color(0xFFD04343), fontSize: 0),
),
),
Row(
children: [
Expanded(
child: Container(
margin: const EdgeInsets.only(top: 45),
child: TextFormField(
style: const TextStyle(color: Color(0xFFFFE5B9)),
controller: _userPassWordController,
focusNode: _focusNodePassWord,
decoration: InputDecoration(
border:
OutlineInputBorder(borderSide: BorderSide.none),
hintText: "請鍵入8-10個字符",
hintStyle: const TextStyle(color: Color(0xFF54514C)),
prefixIcon: Image.asset(
"assets/base_widgets/icon_login_account_password.png",
scale: 1.6,
height: 2.0,
),
),
obscureText: !_isShowPwd,
)),
),
//密码是否显示
GestureDetector(
onTap: () {
setState(() {
_isShowPwd = !_isShowPwd;
});
},
child: Container(
height: 20,
width: 20,
margin: const EdgeInsets.only(right: 5.0, top: 45),
child: Image.asset(_isShowPwd
? "assets/base_widgets/icon_login_visible.png"
: "assets/base_widgets/icon_login_invisible.png"),
),
),
//是否删除
if (_isShowPassWordClear)
GestureDetector(
onTap: () {
setState(() {
// 清空输入框内容
_userPassWordController.clear();
});
},
child: Container(
height: 20,
width: 20,
margin: const EdgeInsets.only(left: 5.0, top: 45),
child: Image.asset(
"assets/base_widgets/icon_login_delete.png"),
),
),
if (!_isShowPassWordClear)
GestureDetector(
child: Container(
height: 0,
width: 0,
margin: const EdgeInsets.only(left: 5.0),
child: Image.asset(
"assets/base_widgets/icon_login_delete.png"),
),
),
],
),
//分割线
Container(
margin: const EdgeInsets.only(bottom: 2),
height: 1,
decoration: const BoxDecoration(color: Color(0xFF3B3631)),
),
//密码提示语
if (mUserPassWord == true)
Container(
margin: const EdgeInsets.only(bottom: 30),
child: Text(
"*避免輸入連續數字或字母的密碼",
style: TextStyle(color: Color(0xFFD04343), fontSize: 13),
),
),
if (mUserPassWord == false)
Container(
child: Text(
"",
style: TextStyle(color: Color(0xFFD04343), fontSize: 0),
),
),
],
),
),
);
// 登录按钮区域
Widget loginButtonArea = Column(
children: [
//如果两个输入框长度为0，或者验证不通过就显示灰色的登录按键
if (mUserPhone == true ||
mUserPassWord == true ||
_userPhoneController.text.length == 0 ||
_userPassWordController.text.length == 0)
GestureDetector(
onTap: () {
//点击登录按钮，解除焦点，回收键盘
_focusNodePassWord.unfocus();
_focusNodeUserPhone.unfocus();
//弹窗
// Navigator.push(context, DialogRouter(LoadingDialog(true)));
loginByPhone();
if (_userPhoneController.text.length != 11) {
setState(() {
mUserPhone = true;
});
} else {
setState(() {
mUserPhone = false;
});
}
//限制密码长度
if (_userPassWordController.text.length < 8 ||
_userPassWordController.text.length > 20) {
setState(() {
mUserPassWord = true;
});
} else {
setState(() {
mUserPassWord = false;
});
}
// Navigator.pushAndRemoveUntil(
// context,
// MaterialPageRoute(builder: (context) => const MusicPlayer()),
// (route) => route == null,
// );
},
child: Container(
margin: const EdgeInsets.only(left: 50, right: 50, top: 30),
decoration: BoxDecoration(
color: const Color(0xFF919191),
borderRadius: BorderRadius.circular(50.0)),
height: 45.0,
child: const Center(
child: Text(
"登陸",
style: TextStyle(
color: Colors.black,
fontSize: 18,
fontWeight: FontWeight.bold),
),
),
),
),
//如果两个输入框不为空，而且验证通过就显示金色登录按键
if (mUserPhone == false &&
mUserPassWord == false &&
_userPhoneController.text.length != 0 &&
_userPassWordController.text.length != 0)
GestureDetector(
onTap: () {
//点击登录按钮，解除焦点，回收键盘
_focusNodePassWord.unfocus();
_focusNodeUserPhone.unfocus();
//弹窗
// Navigator.push(context, DialogRouter(LoadingDialog(true)));
loginByPhone();
if (_userPhoneController.text.length != 11) {
setState(() {
mUserPhone = true;
});
} else {
setState(() {
mUserPhone = false;
});
}
//限制密码长度
if (_userPassWordController.text.length < 8 ||
_userPassWordController.text.length > 20) {
setState(() {
mUserPassWord = true;
});
} else {
setState(() {
mUserPassWord = false;
});
}
// Navigator.pushAndRemoveUntil(
// context,
// MaterialPageRoute(builder: (context) => const MusicPlayer()),
// (route) => route == null,
// );
},
child: Container(
margin: const EdgeInsets.only(left: 50, right: 50, top: 30),
decoration: BoxDecoration(
color: const Color(0xFFD0B878),
borderRadius: BorderRadius.circular(50.0)),
height: 45.0,
child: const Center(
child: Text(
"登陸",
style: TextStyle(
color: Colors.black,
fontSize: 18,
fontWeight: FontWeight.bold),
),
),
),
),
],
);
//提示信息部分
Widget promptArea = Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Container(
margin: EdgeInsets.only(top: 26),
padding: EdgeInsets.only(top: 21, bottom: 21, left: 17, right: 17),
decoration: BoxDecoration(
border: new Border.all(
//边框颜色
color: Color(0xFFA39469),
//边框粗细
width: 1.0,
),
),
child: Text(
"輸入正確的信息後才能登录",
style: TextStyle(
fontSize: 18,
color: Color(0xFFA39469),
fontWeight: FontWeight.bold,
),
),
)
],
));
//提示信息部分
Widget promptGoldArea = Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Container(
margin: EdgeInsets.only(top: 26),
padding: EdgeInsets.only(top: 21, bottom: 21, left: 17, right: 17),
decoration: BoxDecoration(
border: new Border.all(
//边框颜色
color: Color(0xFFA39469),
//边框粗细
width: 1.0,
),
),
child: Text(
"正在登錄中！",
style: TextStyle(
fontSize: 18,
color: Color(0xFFA39469),
fontWeight: FontWeight.bold,
),
),
)
],
));
//忘记密码
Widget forgotPasswordSection = Container(
margin: const EdgeInsets.only(top: 16.0),
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const ResetPasswordDart()),
);
},
child: const Text(
"忘記密碼?",
style: TextStyle(color: Color(0xFF5F5538), fontSize: 14.0),
textAlign: TextAlign.center,
),
));
//第三方登录区域
Widget thirdLoginArea = Container(
margin: const EdgeInsets.only(left: 20, right: 20, top: 180),
child: Column(
children: <Widget>[
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
width: 80,
height: 1.0,
color: Colors.grey,
),
const Text(
'使用其他登錄方式',
style: TextStyle(color: Color(0xFF555555), fontSize: 12),
),
Container(
width: 80,
height: 1.0,
color: Colors.grey,
),
],
),
const SizedBox(
height: 18,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: const <Widget>[],
)
],
),
);
//立即注册
Widget registerSection = Column(
children: [
Container(
margin:
const EdgeInsets.only(right: 20, left: 30, top: 200, bottom: 30),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: [
GestureDetector(
onTap: () {
//跳转到注册界面
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const RegisterAccount()),
);
},
child: Text(
"還沒賬號？快速註冊",
style: TextStyle(
color: Colors.blue[400],
fontSize: 16.0,
),
),
)
],
),
)
],
);
//其他登录行
Widget otherLoginSection = Container(
margin: const EdgeInsets.only(top: 19.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
GestureDetector(
//轻触后跳转界面
onTap: () {},
child: Container(
height: 45.0,
width: 45.0,
margin: const EdgeInsets.only(bottom: 10.0),
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage(
"assets/base_widgets/icon_login_account_line.png"),
fit: BoxFit.fitWidth,
),
),
),
),
const Text(
"手機",
style: TextStyle(
color: Color(0xFF999999),
fontSize: 12.0,
),
)
],
),
Column(
children: [
Container(
height: 45.0,
width: 45.0,
margin: const EdgeInsets.only(bottom: 10.0),
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage(
"assets/base_widgets/icon_login_account_apple.png"),
fit: BoxFit.fitHeight,
),
),
),
const Text(
"Line",
style: TextStyle(
color: Color(0xFF999999),
fontSize: 12.0,
),
)
],
),
Column(
children: [
Container(
height: 45.0,
width: 45.0,
margin: const EdgeInsets.only(bottom: 10.0),
decoration: const BoxDecoration(
image: DecorationImage(
image:
AssetImage("assets/base_widgets/icon_login_line.png"),
fit: BoxFit.fitHeight,
),
),
),
const Text(
"Line",
style: TextStyle(
color: Color(0xFF999999),
fontSize: 12.0,
),
)
],
),
],
),
);
return Material(
child: Scaffold(
appBar: AppBar(
leading: Container(
margin: const EdgeInsets.only(left: 10.0),
width: 20,
),
title: const Text('賬號登陸'),
backgroundColor: const Color(0xFF222222),
//文字居中
centerTitle: true,
actions: [
GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Container(
margin: const EdgeInsets.only(right: 4.0),
child: Image.asset(
'assets/base_widgets/icon_login_account_close.png',
fit: BoxFit.cover,
),
)),
],
),
body: Container(
//设置界面背景
decoration: const BoxDecoration(
color: Color(0xFF222222),
),
child: ListView(
children: <Widget>[
welcomeArea,
inputTextArea,
if (mUserPhone == true || mUserPassWord == true) promptArea,
if (mUserPhone == false && mUserPassWord == false&&mPrompt==true) promptGoldArea,
loginButtonArea,
forgotPasswordSection,
// thirdLoginArea,
// otherLoginSection,
registerSection,
],
),
)));
}
}
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
0
0- 0
已为社区贡献68条内容
所有评论(0)