优化使用体验

This commit is contained in:
jyuesong
2022-06-08 10:06:54 +08:00
parent b89de1414a
commit 14c3b1a965
20 changed files with 659 additions and 454 deletions

View File

@@ -2,6 +2,7 @@ import 'package:dio_log/dio_log.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_animator/flutter_animator.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:qinglong_app/base/http/http.dart';
import 'package:qinglong_app/base/routes.dart';
@@ -62,13 +63,15 @@ class _LoginPageState extends ConsumerState<LoginPage> {
}
}
getIt<UserInfoViewModel>().updateToken("");
WidgetsBinding.instance?.addPostFrameCallback((timeStamp) {
WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
if (useSecretLogin) {
cardKey.currentState?.toggleCard();
}
});
}
GlobalKey<AnimatorWidgetState> loginKey = GlobalKey<AnimatorWidgetState>();
@override
Widget build(BuildContext context) {
return Scaffold(
@@ -76,273 +79,393 @@ class _LoginPageState extends ConsumerState<LoginPage> {
value: ref.watch(themeProvider).darkMode == true ? SystemUiOverlayStyle.light : SystemUiOverlayStyle.dark,
child: ColoredBox(
color: ref.watch(themeProvider).themeColor.settingBgColor(),
child: SizedBox(
height: MediaQuery.of(context).size.height,
child: Stack(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Positioned(
bottom: 0,
child: Image.asset(
"assets/images/login_bg.png",
width: MediaQuery.of(context).size.width,
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 40,
),
),
Scaffold(
backgroundColor: Colors.transparent,
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 40,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: MediaQuery.of(context).size.height / 8,
),
Row(
children: [
Expanded(
child: Align(
alignment: Alignment.centerLeft,
child: Text(
useSecretLogin ? "client_id登录" : "账号登录",
style: TextStyle(
fontSize: 26,
fontWeight: FontWeight.bold,
color: ref.watch(themeProvider).themeColor.titleColor(),
),
),
),
),
GestureDetector(
onDoubleTap: () {
if (debugBtnIsShow()) {
dismissDebugBtn();
} else {
showDebugBtn(context, btnColor: ref.watch(themeProvider).primaryColor);
}
WidgetsBinding.instance.endOfFrame;
},
child: Image.asset(
"assets/images/ql.png",
height: 45,
),
),
],
),
SizedBox(
height: MediaQuery.of(context).size.height / 15,
),
Row(
children: [
const SizedBox(
width: 40,
child: Text(
"域名",
style: TextStyle(
fontSize: 16,
),
),
),
const SizedBox(
width: 30,
),
Expanded(
child: TextField(
onChanged: (_) {
setState(() {});
},
controller: _hostController,
decoration: InputDecoration(
border: InputBorder.none,
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
isDense: true,
contentPadding: const EdgeInsets.all(4),
hintText: "http://1.1.1.1:5700",
hintStyle: TextStyle(
fontSize: 16,
color: ref.watch(themeProvider).themeColor.descColor(),
),
),
autofocus: false,
),
),
],
),
const Divider(
color: Color(0xff999999),
),
const SizedBox(
height: 10,
),
FlipCard(
key: cardKey,
flipOnTouch: false,
onFlipDone: (back) {
useSecretLogin = back;
setState(() {});
},
direction: FlipDirection.HORIZONTAL,
front: SizedBox(
height: 110,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: MediaQuery.of(context).size.height / 10,
),
Row(
children: [
Expanded(
child: Align(
alignment: Alignment.centerLeft,
child: Image.asset(
"assets/images/login_tip.png",
height: 45,
const SizedBox(
child: Text(
"账户",
style: TextStyle(
fontSize: 16,
),
),
width: 40,
),
GestureDetector(
onDoubleTap: () {
if (debugBtnIsShow()) {
dismissDebugBtn();
} else {
showDebugBtn(context, btnColor: ref.watch(themeProvider).primaryColor);
}
WidgetsBinding.instance?.endOfFrame;
},
child: Image.asset(
"assets/images/ql.png",
height: 45,
const SizedBox(
width: 30,
),
Expanded(
child: TextField(
onChanged: (_) {
setState(() {});
},
controller: _userNameController,
decoration: InputDecoration(
border: InputBorder.none,
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
isDense: true,
contentPadding: const EdgeInsets.all(4),
hintText: "请输入账户",
hintStyle: TextStyle(
fontSize: 16,
color: ref.watch(themeProvider).themeColor.descColor(),
),
),
autofocus: false,
),
),
],
),
SizedBox(
height: MediaQuery.of(context).size.height / 15,
),
const Text(
"域名:",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
TextField(
onChanged: (_) {
setState(() {});
},
controller: _hostController,
decoration: const InputDecoration(
contentPadding: EdgeInsets.fromLTRB(0, 5, 0, 5),
hintText: "http://1.1.1.1:5700",
),
autofocus: false,
),
FlipCard(
key: cardKey,
flipOnTouch: false,
onFlipDone: (back) {
useSecretLogin = back;
setState(() {});
},
direction: FlipDirection.HORIZONTAL,
front: SizedBox(
height: 200,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(
height: 15,
),
const Text(
"用户名:",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
TextField(
onChanged: (_) {
setState(() {});
},
controller: _userNameController,
decoration: const InputDecoration(
contentPadding: EdgeInsets.fromLTRB(0, 5, 0, 5),
hintText: "请输入用户名",
),
autofocus: false,
),
const SizedBox(
height: 15,
),
const Text(
"密码:",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
TextField(
onChanged: (_) {
setState(() {});
},
controller: _passwordController,
obscureText: true,
decoration: const InputDecoration(
contentPadding: EdgeInsets.fromLTRB(0, 5, 0, 5),
hintText: "请输入密码",
),
autofocus: false,
),
const SizedBox(
height: 10,
),
],
),
),
back: SizedBox(
height: 200,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(
height: 15,
),
const Text(
"client_id:",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
TextField(
onChanged: (_) {
setState(() {});
},
controller: _cIdController,
decoration: const InputDecoration(
contentPadding: EdgeInsets.fromLTRB(0, 5, 0, 5),
hintText: "请输入client_id",
),
autofocus: false,
),
const SizedBox(
height: 15,
),
const Text(
"client_secret:",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
TextField(
onChanged: (_) {
setState(() {});
},
controller: _cSecretController,
obscureText: true,
decoration: const InputDecoration(
contentPadding: EdgeInsets.fromLTRB(0, 5, 0, 5),
hintText: "请输入client_secret",
),
autofocus: false,
),
const SizedBox(
height: 10,
),
],
),
),
),
],
),
),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 25,
),
child: Row(
children: [
Checkbox(
value: rememberPassword,
onChanged: (checked) {
rememberPassword = checked ?? false;
setState(() {});
},
),
const Text(
"记住密码/client",
style: TextStyle(
fontSize: 14,
),
),
const Spacer(),
GestureDetector(
onTap: () {
cardKey.currentState?.toggleCard();
WidgetsBinding.instance?.addPostFrameCallback((timeStamp) {
setState(() {});
});
},
child: Text(
loginByUserName() ? "client_id登录" : "账号登录",
style: const TextStyle(
fontSize: 14,
),
),
const Divider(
color: Color(0xff999999),
),
const SizedBox(
width: 10,
height: 10,
),
Row(
children: [
const SizedBox(
width: 40,
child: Text(
"密码",
style: TextStyle(
fontSize: 16,
),
),
),
const SizedBox(
width: 30,
),
Expanded(
child: TextField(
onChanged: (_) {
setState(() {});
},
controller: _passwordController,
obscureText: true,
decoration: InputDecoration(
border: InputBorder.none,
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
isDense: true,
contentPadding: const EdgeInsets.all(4),
hintText: "请输入密码",
hintStyle: TextStyle(
fontSize: 16,
color: ref.watch(themeProvider).themeColor.descColor(),
),
),
autofocus: false,
),
),
],
),
const Divider(
color: Color(0xff999999),
),
],
),
),
const SizedBox(
height: 30,
),
Container(
alignment: Alignment.center,
padding: const EdgeInsets.symmetric(
horizontal: 40,
back: SizedBox(
height: 110,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
const SizedBox(
width: 40,
child: Text(
"id",
style: TextStyle(
fontSize: 16,
),
),
),
const SizedBox(
width: 30,
),
Expanded(
child: TextField(
onChanged: (_) {
setState(() {});
},
controller: _cIdController,
decoration: InputDecoration(
border: InputBorder.none,
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
isDense: true,
contentPadding: const EdgeInsets.all(4),
hintText: "请输入client_id",
hintStyle: TextStyle(
fontSize: 16,
color: ref.watch(themeProvider).themeColor.descColor(),
),
),
autofocus: false,
),
),
],
),
const Divider(
color: Color(0xff999999),
),
const SizedBox(
height: 10,
),
Row(
children: [
const SizedBox(
width: 50,
child: Text(
"secret",
style: TextStyle(
fontSize: 16,
),
),
),
const SizedBox(
width: 20,
),
Expanded(
child: TextField(
onChanged: (_) {
setState(() {});
},
controller: _cSecretController,
obscureText: true,
decoration: InputDecoration(
border: InputBorder.none,
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
isDense: true,
contentPadding: const EdgeInsets.all(4),
hintText: "请输入client_secret",
hintStyle: TextStyle(
fontSize: 16,
color: ref.watch(themeProvider).themeColor.descColor(),
),
),
autofocus: false,
),
),
],
),
const Divider(
color: Color(0xff999999),
),
],
),
child: SizedBox(
width: MediaQuery.of(context).size.width - 80,
child: IgnorePointer(
ignoring: !canClickLoginBtn(),
child: CupertinoButton(
),
),
const SizedBox(
height: 10,
),
],
),
),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 25,
),
child: Row(
children: [
Checkbox(
value: rememberPassword,
onChanged: (checked) {
rememberPassword = checked ?? false;
setState(() {});
},
),
const Text(
"记住密码",
style: TextStyle(
color: Color(0xff555555),
fontSize: 14,
),
),
const Spacer(),
GestureDetector(
onTap: () {
cardKey.currentState?.toggleCard();
WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
setState(() {});
});
},
child: Text(
loginByUserName() ? "client_id登录" : "账号登录",
style: const TextStyle(
color: Color(0xff555555),
fontSize: 14,
),
),
),
const SizedBox(
width: 10,
),
],
),
),
const SizedBox(
height: 30,
),
Shake(
preferences: const AnimationPreferences(autoPlay: AnimationPlayStates.None),
key: loginKey,
child: Center(
child: Container(
alignment: Alignment.center,
width: MediaQuery.of(context).size.width * 0.8,
padding: const EdgeInsets.symmetric(
horizontal: 40,
),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: canClickLoginBtn()
? [
const Color(0xff5DD16F),
const Color(0xff089556),
]
: [
const Color(0xff5DD16F).withOpacity(0.6),
const Color(0xff089556).withOpacity(0.6),
],
),
borderRadius: const BorderRadius.all(
Radius.circular(10),
),
),
child: SizedBox(
width: MediaQuery.of(context).size.width - 80,
child: IgnorePointer(
ignoring: !canClickLoginBtn(),
child: Builder(
builder: (context) {
return CupertinoButton(
padding: const EdgeInsets.symmetric(
vertical: 5,
),
color: canClickLoginBtn() ? ref.watch(themeProvider).primaryColor : ref.watch(themeProvider).primaryColor.withOpacity(0.4),
child: isLoading
? const CupertinoActivityIndicator()
: const Text(
"登 录",
style: TextStyle(
fontSize: 16,
fontSize: 18,
color: Colors.white,
),
),
onPressed: () {
onPressed: () async {
Http.pushedLoginPage = false;
Utils.hideKeyBoard(context);
if (loginByUserName()) {
@@ -351,22 +474,22 @@ class _LoginPageState extends ConsumerState<LoginPage> {
login(_cIdController.text, _cSecretController.text);
}
},
),
),
);
},
),
),
const SizedBox(
height: 30,
),
],
),
),
),
),
Positioned(
bottom: 10,
child: (getIt<UserInfoViewModel>().historyAccounts.isEmpty)
? const SizedBox.shrink()
: SizedBox(
const SizedBox(
height: 30,
),
(getIt<UserInfoViewModel>().historyAccounts.isEmpty)
? const SizedBox.shrink()
: SafeArea(
top: false,
child: SizedBox(
width: MediaQuery.of(context).size.width,
child: Center(
child: Material(
@@ -378,24 +501,39 @@ class _LoginPageState extends ConsumerState<LoginPage> {
itemBuilder: (BuildContext context) => <PopupMenuEntry<UserInfoBean>>[
...getIt<UserInfoViewModel>()
.historyAccounts
.map((e) => PopupMenuItem<UserInfoBean>(
value: e,
child: buildCell(e),
))
.map(
(e) => PopupMenuItem<UserInfoBean>(
value: e,
child: buildCell(context, e),
),
)
.toList(),
],
child: Text(
"切换账号",
style: TextStyle(
color: ref.watch(themeProvider).primaryColor,
fontSize: 14,
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Image.asset(
"assets/images/icon_history.png",
fit: BoxFit.cover,
width: 16,
),
const SizedBox(
width: 5,
),
const Text(
"历史账号",
style: TextStyle(
color: Color(0xff555555),
fontSize: 14,
),
),
],
),
),
),
),
),
),
),
],
),
),
@@ -434,6 +572,7 @@ class _LoginPageState extends ConsumerState<LoginPage> {
void loginFailed() {
isLoading = false;
loginKey.currentState?.forward();
setState(() {});
}
@@ -512,7 +651,7 @@ class _LoginPageState extends ConsumerState<LoginPage> {
});
}
Widget buildCell(UserInfoBean bean) {
Widget buildCell(BuildContext context, UserInfoBean bean) {
return ListTile(
title: Text(
bean.host ?? "",
@@ -525,6 +664,19 @@ class _LoginPageState extends ConsumerState<LoginPage> {
bean.userName ?? "",
),
),
contentPadding: EdgeInsets.zero,
trailing: GestureDetector(
onTap: () {
getIt<UserInfoViewModel>().removeHistoryAccount(bean.host);
Navigator.pop(context);
setState(() {});
},
child: const Icon(
CupertinoIcons.clear_thick,
size: 20,
),
),
);
}
@@ -534,7 +686,7 @@ class _LoginPageState extends ConsumerState<LoginPage> {
_cIdController.text = result.userName ?? "";
_cSecretController.text = result.password ?? "";
if (cardKey.currentState?.isFront ?? false) {
WidgetsBinding.instance?.addPostFrameCallback((timeStamp) {
WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
cardKey.currentState?.toggleCard();
});
}
@@ -542,7 +694,7 @@ class _LoginPageState extends ConsumerState<LoginPage> {
_userNameController.text = result.userName ?? "";
_passwordController.text = result.password ?? "";
if (!(cardKey.currentState?.isFront ?? false)) {
WidgetsBinding.instance?.addPostFrameCallback((timeStamp) {
WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
cardKey.currentState?.toggleCard();
});
}