Skip to content

N
netrain_flutter_app
Commit 3d92996b authored by laishanqi's avatar laishanqi
Browse files
Options

完善登录页

parent e8236e54
Show whitespace changes
Inline Side-by-side
Showing with 196 additions and 101 deletions
netrain_flutter_app/lib/laishanqi/Stateful_page.dart
View file @ 3d92996b
import 'package:flutter/cupertino.dart'; import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'file:///E:/studioProject/netrain_flutter_app/netrain_flutter_app/lib/laishanqi/Cat.dart';
import 'Cat.dart';
import 'layout_page.dart'; import 'layout_page.dart';
/// 有状态组件 /// 有状态组件
...@@ -54,7 +54,7 @@ class _StatefulGroupState extends State<FulGroupPage> { ...@@ -54,7 +54,7 @@ class _StatefulGroupState extends State<FulGroupPage> {
Icons.home, Icons.home,
color: Colors.blue, color: Colors.blue,
), ),
title: Text("首页")), label: "首页"),
BottomNavigationBarItem( BottomNavigationBarItem(
icon: Icon( icon: Icon(
Icons.accessibility, Icons.accessibility,
...@@ -64,7 +64,7 @@ class _StatefulGroupState extends State<FulGroupPage> { ...@@ -64,7 +64,7 @@ class _StatefulGroupState extends State<FulGroupPage> {
Icons.accessibility, Icons.accessibility,
color: Colors.blue, color: Colors.blue,
), ),
title: Text("我的")), label: "我的"),
], ],
), ),
body: _currentIndex == 0 body: _currentIndex == 0
......
netrain_flutter_app/lib/laishanqi/layout_page.dart
View file @ 3d92996b
import 'package:flutter/cupertino.dart'; import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'file:///E:/studioProject/netrain_flutter_app/netrain_flutter_app/lib/laishanqi/Cat.dart';
import 'Stateful_page.dart';
class LayoutPage extends StatefulWidget { class LayoutPage extends StatefulWidget {
@override @override
......
netrain_flutter_app/lib/laishanqi/loginPage.dart
View file @ 3d92996b
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'file:///E:/studioProject/netrain_flutter_app/netrain_flutter_app/lib/laishanqi/Cat.dart'; import 'package:fluttertoast/fluttertoast.dart';
import 'layout_page.dart'; /// 登录页
/// 有状态组件
class LoginPage extends StatefulWidget { class LoginPage extends StatefulWidget {
@override @override
State<StatefulWidget> createState() => _LoginState(); State<StatefulWidget> createState() => _LoginState();
} }
class _LoginState extends State<LoginPage> { class _LoginState extends State<LoginPage> {
@override
Widget build(BuildContext context) {
var select = 1; var select = 1;
var checkText;
final phoneController = TextEditingController();
final codeController = TextEditingController();
@override
Widget build(BuildContext context) {
return MaterialApp( return MaterialApp(
title: '登陆页', title: '登陆页',
theme: ThemeData( theme: ThemeData(
...@@ -27,71 +27,56 @@ class _LoginState extends State<LoginPage> { ...@@ -27,71 +27,56 @@ class _LoginState extends State<LoginPage> {
padding: EdgeInsets.only(left: 16, right: 16), padding: EdgeInsets.only(left: 16, right: 16),
child: Column( child: Column(
children: [ children: [
// logo
Container( Container(
margin: EdgeInsets.only(top: 108), margin: EdgeInsets.only(top: 108),
child: Image.asset("assets/images/logo_01.png"), child: Image.asset("assets/images/logo_01.png"),
), ),
// 验证码登录按钮 和 账号密码登录按钮
Container( Container(
height: 40, height: 40,
margin: EdgeInsets.only(top: 91), margin: EdgeInsets.only(top: 91),
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [ children: tab(),
tab(1, select),
tab(2, select),
],
),
),
Container(
height: 47,
margin: EdgeInsets.only(left: 32, right: 32, top: 20),
child: TextField(
style: TextStyle(color: Colors.blue, fontSize: 16),
decoration: InputDecoration(
contentPadding: EdgeInsets.only(
left: 10, right: 10, top: 0, bottom: 0),
hintText: "请输入验证码",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(23),
borderSide: BorderSide(color: Color(0xFFf1f1f1)),
),
),
),
),
Container(
height: 47,
margin: EdgeInsets.only(left: 32, right: 32, top: 10),
child: TextField(
style: TextStyle(color: Colors.blue, fontSize: 16),
decoration: InputDecoration(
contentPadding: EdgeInsets.only(
left: 10, right: 10, top: 0, bottom: 0),
hintText: "请输入密码",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(23),
borderSide: BorderSide(color: Color(0xFFf1f1f1)),
),
), ),
), ),
// 手机号输入控件
Stack(
children: getPhoneView(),
), ),
// 密码和验证码输入控件
getCodeInputView(),
// 登录按钮
Container( Container(
height: 45, height: 45,
margin: EdgeInsets.only(top: 30,left: 34,right: 34), margin: EdgeInsets.only(top: 30, left: 34, right: 34),
decoration: BoxDecoration( decoration: BoxDecoration(
gradient: LinearGradient( gradient: LinearGradient(
colors: [Color(0xff36D7FF), Color(0xff247DFF)] colors: [Color(0xff36D7FF), Color(0xff247DFF)]),
), borderRadius: BorderRadius.circular(22)),
borderRadius: BorderRadius.circular(22)
),
child: MaterialButton( child: MaterialButton(
elevation: 0, elevation: 0,
highlightElevation: 0, highlightElevation: 0,
minWidth: double.infinity, minWidth: double.infinity,
color: Colors.transparent, color: Colors.transparent,
onPressed: () {}, onPressed: () {
// 登录点击事件
if (phoneController.text.isEmpty) {
Fluttertoast.showToast(msg: "手机号不能为空");
return;
}
if (codeController.text.isEmpty) {
Fluttertoast.showToast(msg: "验证码或密码不能为空");
return;
}
Fluttertoast.showToast(
msg:
"登录 手机号：${phoneController.text} 验证码或密码：${codeController.text}");
},
child: Container( child: Container(
child: Text( child: Text(
"登陆", "登录",
style: TextStyle(color: Colors.white, fontSize: 18), style: TextStyle(color: Colors.white, fontSize: 18),
), ),
), ),
...@@ -102,9 +87,12 @@ class _LoginState extends State<LoginPage> { ...@@ -102,9 +87,12 @@ class _LoginState extends State<LoginPage> {
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
Text("快速注册",style: TextStyle(color: Colors.blue),), Text(
Text(" | ",style: TextStyle(color: Colors.blue)), "快速注册",
Text("忘记密码",style: TextStyle(color: Colors.blue)) style: TextStyle(color: Colors.blue),
),
Text(" | ", style: TextStyle(color: Colors.blue)),
Text("忘记密码", style: TextStyle(color: Colors.blue))
], ],
), ),
), ),
...@@ -116,40 +104,145 @@ class _LoginState extends State<LoginPage> { ...@@ -116,40 +104,145 @@ class _LoginState extends State<LoginPage> {
); );
} }
tab(int index, int selected) { Container getCodeInputView() {
var view = Container(
height: 46,
margin: EdgeInsets.only(left: 32, right: 32, top: 10),
child: TextField(
obscureText: select == 2 ,
controller: codeController,
style: TextStyle(color: Colors.blue, fontSize: 16),
decoration: InputDecoration(
contentPadding: EdgeInsets.only(
left: 10, right: 10, top: 10, bottom: 10),
hintText: checkText,
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Color(0xFFf1f1f1), width: 1),
borderRadius: BorderRadius.circular(23),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blue, width: 1),
),
),
),
);
return view;
}
List<Widget> getPhoneView() {
List<Widget> view = [
Container(
height: 70,
margin: EdgeInsets.only(left: 32, right: 32, top: 20),
child: TextField(
maxLength: 11,
controller: phoneController,
keyboardType: TextInputType.numberWithOptions(),
style: TextStyle(color: Colors.blue, fontSize: 16),
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(vertical: 2, horizontal: 10),
hintText: "请输入手机号",
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Color(0xFFf1f1f1), width: 1),
borderRadius: BorderRadius.circular(23),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blue, width: 1),
),
),
),
),
];
var getCodeView = Positioned(
right: 50,
top: 33,
child: GestureDetector(
child: Text("获取验证码"),
onTap: () {},
));
if (select == 1) {
view.add(getCodeView);
}
return view;
}
tab() {
var style_01 = TextStyle( var style_01 = TextStyle(
fontWeight: FontWeight.bold, color: Color(0xff2893FF), fontSize: 16); fontWeight: FontWeight.bold, color: Color(0xff2893FF), fontSize: 16);
var style_02 = TextStyle( var style_02 = TextStyle(
fontWeight: FontWeight.bold, color: Color(0xff949494), fontSize: 16); fontWeight: FontWeight.bold, color: Color(0xff949494), fontSize: 16);
var currentStyle; var currentStyle01;
var text; var currentStyle02;
var image = Container( var image = Container(
margin: EdgeInsets.only(top: 5), margin: EdgeInsets.only(top: 5),
child: Image.asset("assets/images/ic_login_mode.png"), child: Image.asset("assets/images/ic_login_mode.png"),
); );
if (index == 1) { if (select == 1) {
text = "验证码登陆"; checkText = "请输入验证码";
currentStyle = style_01; currentStyle01 = style_01;
currentStyle02 = style_02;
} else { } else {
text = "账号密码登录"; checkText = "请输入密码";
currentStyle = style_02; currentStyle02 = style_01;
currentStyle01 = style_02;
} }
List<Widget> mChildren = [ // 验证码登录按钮
Container( var textCode = Container(
alignment: Alignment.topCenter, alignment: Alignment.topCenter,
child: GestureDetector(
child: Text( child: Text(
text, "验证码登陆",
style: currentStyle, style: currentStyle01,
), ),
) onTap: () {
setState(() {
select = 1;
});
},
));
// 密码登录按钮
var textPassword = Container(
alignment: Alignment.topCenter,
child: GestureDetector(
child: Text(
"账号密码登陆",
style: currentStyle02,
),
onTap: () {
setState(() {
select = 2;
});
},
));
List<Widget> mChildren01 = [textCode];
List<Widget> mChildren02 = [textPassword];
if (select == 1) {
mChildren01.add(image);
} else {
mChildren02.add(image);
}
List<Widget> mChildrenRoot = [
Column(children: mChildren01),
Column(children: mChildren02)
]; ];
if (index == selected) { return mChildrenRoot;
mChildren.add(image);
} }
return Column(children: mChildren); @override
void dispose() {
// TODO: implement dispose
super.dispose();
phoneController.dispose();
codeController.dispose();
} }
} }
netrain_flutter_app/lib/laishanqi/photo.dart
View file @ 3d92996b
import 'dart:io'; import 'dart:io';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'file:///E:/studioProject/netrain_flutter_app/netrain_flutter_app/lib/laishanqi/Cat.dart';
import 'file:///E:/studioProject/netrain_flutter_app/netrain_flutter_app/lib/laishanqi/layout_page.dart';
import 'package:image_picker/image_picker.dart'; import 'package:image_picker/image_picker.dart';
class PhotoApp extends StatelessWidget { class PhotoApp extends StatelessWidget {
......
netrain_flutter_app/lib/main.dart
View file @ 3d92996b
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'file:///E:/studioProject/netrain_flutter_app/netrain_flutter_app/lib/laishanqi/Cat.dart';
import 'file:///E:/studioProject/netrain_flutter_app/netrain_flutter_app/lib/laishanqi/layout_page.dart';
import 'laishanqi/Stateful_page.dart'; import 'laishanqi/Stateful_page.dart';
import 'laishanqi/Stateless_page.dart'; import 'laishanqi/Stateless_page.dart';
import 'laishanqi/layout_page.dart';
import 'laishanqi/loginPage.dart'; import 'laishanqi/loginPage.dart';
import 'laishanqi/photo.dart'; import 'laishanqi/photo.dart';
......
netrain_flutter_app/pubspec.lock
View file @ 3d92996b
...@@ -7,42 +7,42 @@ packages: ...@@ -7,42 +7,42 @@ packages:
name: async name: async
url: "https://pub.flutter-io.cn" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "2.4.2" version: "2.5.0-nullsafety.1"
boolean_selector: boolean_selector:
dependency: transitive dependency: transitive
description: description:
name: boolean_selector name: boolean_selector
url: "https://pub.flutter-io.cn" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "2.0.0" version: "2.1.0-nullsafety.1"
characters: characters:
dependency: transitive dependency: transitive
description: description:
name: characters name: characters
url: "https://pub.flutter-io.cn" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "1.0.0" version: "1.1.0-nullsafety.3"
charcode: charcode:
dependency: transitive dependency: transitive
description: description:
name: charcode name: charcode
url: "https://pub.flutter-io.cn" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "1.1.3" version: "1.2.0-nullsafety.1"
clock: clock:
dependency: transitive dependency: transitive
description: description:
name: clock name: clock
url: "https://pub.flutter-io.cn" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "1.0.1" version: "1.1.0-nullsafety.1"
collection: collection:
dependency: transitive dependency: transitive
description: description:
name: collection name: collection
url: "https://pub.flutter-io.cn" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "1.14.13" version: "1.15.0-nullsafety.3"
cupertino_icons: cupertino_icons:
dependency: "direct main" dependency: "direct main"
description: description:
...@@ -56,7 +56,7 @@ packages: ...@@ -56,7 +56,7 @@ packages:
name: fake_async name: fake_async
url: "https://pub.flutter-io.cn" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "1.1.0" version: "1.2.0-nullsafety.1"
flutter: flutter:
dependency: "direct main" dependency: "direct main"
description: flutter description: flutter
...@@ -74,6 +74,13 @@ packages: ...@@ -74,6 +74,13 @@ packages:
description: flutter description: flutter
source: sdk source: sdk
version: "0.0.0" version: "0.0.0"
fluttertoast:
dependency: "direct main"
description:
name: fluttertoast
url: "https://pub.flutter-io.cn"
source: hosted
version: "3.1.3"
http: http:
dependency: transitive dependency: transitive
description: description:
...@@ -108,21 +115,21 @@ packages: ...@@ -108,21 +115,21 @@ packages:
name: matcher name: matcher
url: "https://pub.flutter-io.cn" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "0.12.8" version: "0.12.10-nullsafety.1"
meta: meta:
dependency: transitive dependency: transitive
description: description:
name: meta name: meta
url: "https://pub.flutter-io.cn" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "1.1.8" version: "1.3.0-nullsafety.3"
path: path:
dependency: transitive dependency: transitive
description: description:
name: path name: path
url: "https://pub.flutter-io.cn" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "1.7.0" version: "1.8.0-nullsafety.1"
pedantic: pedantic:
dependency: transitive dependency: transitive
description: description:
...@@ -136,7 +143,7 @@ packages: ...@@ -136,7 +143,7 @@ packages:
name: plugin_platform_interface name: plugin_platform_interface
url: "https://pub.flutter-io.cn" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "1.0.2" version: "1.0.3"
sky_engine: sky_engine:
dependency: transitive dependency: transitive
description: flutter description: flutter
...@@ -148,56 +155,56 @@ packages: ...@@ -148,56 +155,56 @@ packages:
name: source_span name: source_span
url: "https://pub.flutter-io.cn" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "1.7.0" version: "1.8.0-nullsafety.2"
stack_trace: stack_trace:
dependency: transitive dependency: transitive
description: description:
name: stack_trace name: stack_trace
url: "https://pub.flutter-io.cn" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "1.9.5" version: "1.10.0-nullsafety.1"
stream_channel: stream_channel:
dependency: transitive dependency: transitive
description: description:
name: stream_channel name: stream_channel
url: "https://pub.flutter-io.cn" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "2.0.0" version: "2.1.0-nullsafety.1"
string_scanner: string_scanner:
dependency: transitive dependency: transitive
description: description:
name: string_scanner name: string_scanner
url: "https://pub.flutter-io.cn" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "1.0.5" version: "1.1.0-nullsafety.1"
term_glyph: term_glyph:
dependency: transitive dependency: transitive
description: description:
name: term_glyph name: term_glyph
url: "https://pub.flutter-io.cn" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "1.1.0" version: "1.2.0-nullsafety.1"
test_api: test_api:
dependency: transitive dependency: transitive
description: description:
name: test_api name: test_api
url: "https://pub.flutter-io.cn" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "0.2.17" version: "0.2.19-nullsafety.2"
typed_data: typed_data:
dependency: transitive dependency: transitive
description: description:
name: typed_data name: typed_data
url: "https://pub.flutter-io.cn" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "1.2.0" version: "1.3.0-nullsafety.3"
vector_math: vector_math:
dependency: transitive dependency: transitive
description: description:
name: vector_math name: vector_math
url: "https://pub.flutter-io.cn" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "2.0.8" version: "2.1.0-nullsafety.3"
sdks: sdks:
dart: ">=2.9.0-14.0.dev <3.0.0" dart: ">=2.10.0-110 <2.11.0"
flutter: ">=1.12.13 <2.0.0" flutter: ">=1.12.13 <2.0.0"
netrain_flutter_app/pubspec.yaml
View file @ 3d92996b
...@@ -29,6 +29,7 @@ dependencies: ...@@ -29,6 +29,7 @@ dependencies:
# Use with the CupertinoIcons class for iOS style icons. # Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.3 cupertino_icons: ^0.1.3
image_picker: ^0.6.7+11 image_picker: ^0.6.7+11
fluttertoast: ^3.1.3
dev_dependencies: dev_dependencies:
flutter_test: flutter_test:
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment