fmk
/
huixiang_app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

登陆动画

null_safety
哈哈哈 4 years ago
parent
76cd410649
commit
3620545de2
3 changed files with 295 additions and 105 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 84
      lib/home/huixiang_brand_page.dart
  2. 277
      lib/login/login_page.dart
  3. 1
      pubspec.yaml

84
lib/home/huixiang_brand_page.dart
Unescape View File

@ -105,20 +105,20 @@ class _BrandPage extends State<BrandPage>
banner(),
buildInfo(),
buildTab(),
Container(
decoration: new BoxDecoration(
border: Border(
bottom:
BorderSide(color: Colors.black, width: 0.0)),
color: Colors.black,
),
key: chiliGlobalKey,
child: Image.asset(
"assets/image/brand_store_cj.png",
fit: BoxFit.fill,
width: double.infinity,
),
),
// Container(
// decoration: new BoxDecoration(
// border: Border(
// bottom:
// BorderSide(color: Colors.black, width: 0.0)),
// color: Colors.black,
// ),
// key: chiliGlobalKey,
// child: Image.asset(
// "assets/image/brand_store_cj.png",
// fit: BoxFit.fill,
// width: double.infinity,
// ),
// ),
Container(
decoration: new BoxDecoration(
border: Border(
@ -196,20 +196,20 @@ class _BrandPage extends State<BrandPage>
SizedBox(
height: 16,
),
Container(
decoration: new BoxDecoration(
border: Border(
bottom:
BorderSide(color: Colors.white, width: 0.0)),
color: Colors.white,
),
key: milkTeaGlobalKey,
child: Image.asset(
"assets/image/brand_store_hx.png",
fit: BoxFit.fill,
width: double.infinity,
),
),
// Container(
// decoration: new BoxDecoration(
// border: Border(
// bottom:
// BorderSide(color: Colors.white, width: 0.0)),
// color: Colors.white,
// ),
// key: milkTeaGlobalKey,
// child: Image.asset(
// "assets/image/brand_store_hx.png",
// fit: BoxFit.fill,
// width: double.infinity,
// ),
// ),
Container(
decoration: new BoxDecoration(
border: Border(
@ -279,20 +279,20 @@ class _BrandPage extends State<BrandPage>
SizedBox(
height: 16,
),
Container(
decoration: new BoxDecoration(
border: Border(
bottom: BorderSide(
color: Color(0xff052C4B), width: 0.0)),
color: Color(0xff052C4B),
),
key: breadGlobalKey,
child: Image.asset(
"assets/image/brand_store_bg.png",
fit: BoxFit.fill,
width: double.infinity,
),
),
// Container(
// decoration: new BoxDecoration(
// border: Border(
// bottom: BorderSide(
// color: Color(0xff052C4B), width: 0.0)),
// color: Color(0xff052C4B),
// ),
// key: breadGlobalKey,
// child: Image.asset(
// "assets/image/brand_store_bg.png",
// fit: BoxFit.fill,
// width: double.infinity,
// ),
// ),
Container(
decoration: new BoxDecoration(
border: Border(

277
lib/login/login_page.dart
Unescape View File

@ -14,6 +14,7 @@ import 'package:huixiang/generated/l10n.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:dio/dio.dart';
import 'package:huixiang/view_widget/loading_view.dart';
import 'package:photo_view/photo_view.dart';
import 'package:shared_preferences/shared_preferences.dart';
class LoginPage extends StatefulWidget {
@ -23,7 +24,7 @@ class LoginPage extends StatefulWidget {
_MyLoginPageState createState() => _MyLoginPageState();
}
class _MyLoginPageState extends State<LoginPage> {
class _MyLoginPageState extends State<LoginPage> with TickerProviderStateMixin {
var checkStatus = false;
var mobileStatus = 0;
var verifyStatus = 0;
@ -42,6 +43,7 @@ class _MyLoginPageState extends State<LoginPage> {
final int initAlpha = 89;
int alpha = 89;
int changeAlpha = 0;
Animation<Alignment> animation;
@override
void initState() {
@ -50,9 +52,16 @@ class _MyLoginPageState extends State<LoginPage> {
client = ApiService(dio);
scrollController = ScrollController(keepScrollOffset: false);
alignmentBegin = Alignment.topCenter;
alignmentEnd = Alignment.bottomRight;
animationStart();
scrollController.addListener(() {
RenderBox renderBox = loginKey.currentContext.findRenderObject();
var screenHeight = MediaQuery.of(context).size.height;
var screenHeight = MediaQuery
.of(context)
.size
.height;
var scrollHeight = screenHeight * 1.47;
// var spaceHeight = screenHeight * 0.6244;
var height = scrollHeight - renderBox.size.height;
@ -83,25 +92,32 @@ class _MyLoginPageState extends State<LoginPage> {
_sendCode() async {
if (!checkStatus) {
Fluttertoast.showToast(msg: S.of(context).gouxuanxieyi);
Fluttertoast.showToast(msg: S
.of(context)
.gouxuanxieyi);
return;
}
var mobile = _controllerPhone.text;
if (mobile == "") {
mobileStatus = 2;
mobileErrorText = S.of(context).qingshurushoujihao;
mobileErrorText = S
.of(context)
.qingshurushoujihao;
setState(() {});
return;
}
if (_sendCodeStatus == 0) {
client
.sendVerify(mobile)
.then((value) => {
.then((value) =>
{
if (value.isSuccess)
{_sendCodeStatus = 1, countdown()}
else
{
btnText = S.of(context).send_code,
btnText = S
.of(context)
.send_code,
_sendCodeStatus = 0,
Fluttertoast.showToast(msg: "${value.msg}"),
refresh()
@ -121,7 +137,9 @@ class _MyLoginPageState extends State<LoginPage> {
_timer = Timer.periodic(Duration(seconds: 1), (timer) {
countdown--;
if (countdown == 0) {
btnText = S.of(context).send_code;
btnText = S
.of(context)
.send_code;
_sendCodeStatus = 0;
_timer.cancel();
} else {
@ -138,48 +156,60 @@ class _MyLoginPageState extends State<LoginPage> {
@override
void dispose() {
if (_timer != null) _timer.cancel();
if (animatedContainer != null) animatedContainer.dispose();
super.dispose();
}
_login() async {
// Navigator.of(context).popAndPushNamed('/router/main_page');
// return;
return;
if (alpha != 255) {
scrollToTop();
return;
}
if (!checkStatus) {
Fluttertoast.showToast(msg: S.of(context).gouxuanxieyi);
Fluttertoast.showToast(msg: S
.of(context)
.gouxuanxieyi);
return;
}
var mobile = _controllerPhone.text;
if (mobile == "") {
mobileStatus = 2;
mobileErrorText = S.of(context).qingshurushoujihao;
mobileErrorText = S
.of(context)
.qingshurushoujihao;
setState(() {});
return;
}
if (mobile.length != 11) {
mobileStatus = 2;
mobileErrorText = S.of(context).phone_error;
mobileErrorText = S
.of(context)
.phone_error;
setState(() {});
return;
}
var code = _controllerCode.text;
if (code == "") {
verifyStatus = 2;
codeErrorText = S.of(context).qingshuruyanzhengma;
codeErrorText = S
.of(context)
.qingshuruyanzhengma;
setState(() {});
return;
}
if (code.length != 6) {
verifyStatus = 2;
codeErrorText = S.of(context).code_error;
codeErrorText = S
.of(context)
.code_error;
setState(() {});
return;
}
var paramt = {
var param = {
"capcha": code,
"mobile": mobile,
};
@ -190,7 +220,7 @@ class _MyLoginPageState extends State<LoginPage> {
dialogContext = context;
return LoadingView();
});
BaseData value = await client.memberLogin(paramt).catchError((error) {
BaseData value = await client.memberLogin(param).catchError((error) {
print(error);
Fluttertoast.showToast(msg: "$error");
});
@ -209,7 +239,8 @@ class _MyLoginPageState extends State<LoginPage> {
saveUserJson(userJson) {
var userEntity = UserEntity.fromJson(userJson);
SharedPreferences.getInstance().then((value) => {
SharedPreferences.getInstance().then((value) =>
{
value.setString('userJson', jsonEncode(userJson)),
value.setString('token', userEntity.token),
value.setString('userId', userEntity.userId),
@ -218,6 +249,61 @@ class _MyLoginPageState extends State<LoginPage> {
});
}
AnimationController animatedContainer;
Alignment alignmentBegin;
Alignment alignmentEnd;
Alignment alignmentProgress;
Function listener() {
alignmentProgress = animation.value;
print("animation $animation");
setState(() {});
}
Function statusListener(status) {
if (status == AnimationStatus.completed) {
if (alignmentEnd == Alignment.bottomRight) {
alignmentBegin = Alignment.bottomRight;
alignmentEnd = Alignment.centerLeft;
} else if (alignmentEnd == Alignment.centerLeft) {
alignmentBegin = Alignment.centerLeft;
alignmentEnd = Alignment.topRight;
} else if (alignmentEnd == Alignment.topRight) {
alignmentBegin = Alignment.topRight;
alignmentEnd = Alignment.bottomLeft;
} else if (alignmentEnd == Alignment.bottomLeft) {
alignmentBegin = Alignment.bottomLeft;
alignmentEnd = Alignment.centerRight;
} else if (alignmentEnd == Alignment.centerRight) {
alignmentBegin = Alignment.centerRight;
alignmentEnd = Alignment.topLeft;
} else if (alignmentEnd == Alignment.topLeft) {
alignmentBegin = Alignment.topLeft;
alignmentEnd = Alignment.bottomRight;
}
animationStart();
}
}
animationStart() {
animatedContainer =
AnimationController(vsync: this, duration: Duration(seconds: 10));
animation =
AlignmentTween(begin: alignmentBegin, end: alignmentEnd).animate(
animatedContainer);
animation.removeListener(listener);
animation.addListener(listener);
animatedContainer.removeStatusListener(statusListener);
animatedContainer.addStatusListener(statusListener);
animatedContainer.forward();
}
@override
Widget build(BuildContext context) {
return Scaffold(
@ -230,29 +316,93 @@ class _MyLoginPageState extends State<LoginPage> {
child: Stack(
children: [
Container(
height: MediaQuery.of(context).size.height * 0.78,
height: MediaQuery
.of(context)
.size
.height * 0.78,
child: Stack(
alignment: Alignment.center,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Opacity(
opacity: (255 - changeAlpha) / 255,
child: Image.asset(
"assets/image/laoban.png",
width: MediaQuery.of(context).size.width,
fit: BoxFit.fitWidth,
),
),
],
// ShaderMask(
// shaderCallback: (bounds) {
// print("bounds: =============");
//
// // print("bounds: $value");
// // if(value != null) {
// // // var dx = value.x * 360.0;
// // // var dy = value.y * 608.0;
// //
// // var dx = (value.x > 123.0 ? value.x : 123.0);
// // var dy = (value.y > 123.0 ? value.y : 123.0);
// // if (value.x > 123.0 && value.y > 123.0) {
// // dx = (value.x < bounds.right ? value.x : bounds.right);
// // dy = (value.y < bounds.bottom ? value.y : bounds.bottom);
// // }
// // bounds = Rect.fromLTRB(dx - 123.0, dy - 123.0,
// // value.x + 123.0, value.y + 123.0);
// // }
// print("bounds: $bounds");
//
// return RadialGradient(
// radius: 0.5,
// focalRadius: 0.2,
// focal: Alignment.center,
// colors: <Color>[
// Color(0xFF6AC48F).withAlpha(0),
// Color(0xFF5AD48D).withAlpha(alpha),
// ],
// ).createShader(bounds);
// },
// blendMode: BlendMode.color,
// child: ,
// ),
PhotoView(
imageProvider: AssetImage("assets/image/laoban.png"),
initialScale: 1.02,
basePosition: alignmentProgress,
),
// ScaleTransition(
// scale: animation,
// alignment: alignment,
// child: Column(
// mainAxisAlignment: MainAxisAlignment.end,
// crossAxisAlignment: CrossAxisAlignment.center,
// children: [
// Opacity(
// opacity: (255 - changeAlpha) / 255,
// child: Image.asset(
// "assets/image/laoban.png",
// width: MediaQuery.of(context).size.width,
// fit: BoxFit.fitWidth,
// ),
// ),
// ],
// ),
// ),
// Container(
// decoration: BoxDecoration(
// // color: Color(0xFF6AC48F).withAlpha(changeAlpha),
// gradient: RadialGradient(
// radius: 0.5,
// focalRadius: 0.2,
// focal: Alignment.center,
// colors: <Color>[
// Color(0xFF6AC48F).withAlpha(0),
// Color(0xFF5AD48D).withAlpha(alpha),
// ],
// ),
// ),
// ),
Container(
decoration: BoxDecoration(
// color: Color(0xFF6AC48F).withAlpha(changeAlpha),
gradient: LinearGradient(
colors: [
Color(0xFF6AC48F).withAlpha(alpha),
Color(0xFF6AC48F).withAlpha(0),
if (alpha < 190) Colors.black.withAlpha(190 - alpha),
if (alpha >= 190) Color(0xFF5AD48D).withAlpha(alpha)
],
@ -262,7 +412,10 @@ class _MyLoginPageState extends State<LoginPage> {
),
),
Container(
height: MediaQuery.of(context).size.height * 0.78,
height: MediaQuery
.of(context)
.size
.height * 0.78,
margin: EdgeInsets.only(top: 56),
alignment: Alignment.topCenter,
child: AspectRatio(
@ -299,11 +452,17 @@ class _MyLoginPageState extends State<LoginPage> {
controller: scrollController,
physics: PageScrollPhysics().applyTo(ClampingScrollPhysics()),
child: SizedBox(
height: MediaQuery.of(context).size.height * 1.47,
height: MediaQuery
.of(context)
.size
.height * 1.47,
child: Column(
children: [
SizedBox(
height: MediaQuery.of(context).size.height * 0.6244,
height: MediaQuery
.of(context)
.size
.height * 0.6244,
),
Expanded(
child: Container(
@ -321,7 +480,10 @@ class _MyLoginPageState extends State<LoginPage> {
child: Container(
child: Image.asset(
"assets/image/icon_login_bg_webp.webp",
width: MediaQuery.of(context).size.width,
width: MediaQuery
.of(context)
.size
.width,
fit: BoxFit.cover,
),
),
@ -330,7 +492,10 @@ class _MyLoginPageState extends State<LoginPage> {
top: 0,
),
Positioned(
top: MediaQuery.of(context).size.height * 0.1039,
top: MediaQuery
.of(context)
.size
.height * 0.1039,
bottom: 0,
child: Container(
padding: EdgeInsets.symmetric(horizontal: 40),
@ -436,7 +601,9 @@ class _MyLoginPageState extends State<LoginPage> {
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
S.of(context).input_phone,
S
.of(context)
.input_phone,
style: TextStyle(
fontSize: 18.sp,
color: Colors.black,
@ -444,7 +611,10 @@ class _MyLoginPageState extends State<LoginPage> {
),
Container(
height: 50.h,
width: MediaQuery.of(context).size.width - 80,
width: MediaQuery
.of(context)
.size
.width - 80,
child: TextField(
style: TextStyle(),
onChanged: (value) {
@ -497,7 +667,9 @@ class _MyLoginPageState extends State<LoginPage> {
height: 35,
),
Text(
S.of(context).input_code,
S
.of(context)
.input_code,
style: TextStyle(
fontSize: 18.sp,
color: Colors.black,
@ -505,7 +677,10 @@ class _MyLoginPageState extends State<LoginPage> {
),
Container(
height: 50.h,
width: MediaQuery.of(context).size.width - 80,
width: MediaQuery
.of(context)
.size
.width - 80,
child: Stack(
children: [
TextField(
@ -579,7 +754,10 @@ class _MyLoginPageState extends State<LoginPage> {
Expanded(
flex: 1,
child: Container(
width: MediaQuery.of(context).size.width - 80,
width: MediaQuery
.of(context)
.size
.width - 80,
alignment: Alignment.bottomCenter,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
@ -598,19 +776,27 @@ class _MyLoginPageState extends State<LoginPage> {
Text.rich(
TextSpan(children: [
TextSpan(
text: S.of(context).privacy_policy1,
text: S
.of(context)
.privacy_policy1,
style: TextStyle(fontSize: 11, color: Colors.black)),
TextSpan(
text: S.of(context).privacy_policy2,
text: S
.of(context)
.privacy_policy2,
style: TextStyle(fontSize: 11, color: Colors.black)),
TextSpan(
text: "、\n",
style: TextStyle(fontSize: 11, color: Colors.black)),
TextSpan(
text: S.of(context).privacy_policy3,
text: S
.of(context)
.privacy_policy3,
style: TextStyle(fontSize: 11, color: Colors.black)),
TextSpan(
text: S.of(context).privacy_policy4,
text: S
.of(context)
.privacy_policy4,
style: TextStyle(fontSize: 11, color: Colors.black)),
]),
),
@ -628,7 +814,10 @@ class _MyLoginPageState extends State<LoginPage> {
scrollToTop() {
RenderBox renderBox = loginKey.currentContext.findRenderObject();
var screenHeight = MediaQuery.of(context).size.height;
var screenHeight = MediaQuery
.of(context)
.size
.height;
var scrollHeight = screenHeight * 1.47;
var height = scrollHeight - renderBox.size.height;
var chaHeight = screenHeight - renderBox.size.height;

1
pubspec.yaml
Unescape View File

@ -65,6 +65,7 @@ dependencies:
# azlistview: ^1.1.1
flutter_html: ^1.3.0 #2.1.0
photo_view: ^0.11.1
dev_dependencies:
flutter_test:

Write Preview
Loading…
Cancel
Save