一直觉得自己写的不是技术,而是情怀,一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的,希望我的这条路能让你们少走弯路,希望我能帮你们抹去知识的蒙尘,希望我能帮你们理清知识的脉络,希望未来技术之巅上有你们也有我。
本章效果:
开发首页的时候可以设置main启动首页。
1.回到页面修改下面的代码
2.把自定义控件拖进来
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_app/services/screenAdaper.dart';
class JdText extends StatelessWidget {
final String text;
final bool password;
final Object onChanged;
JdText({Key key,this.text="输入内容",this.password=false,this.onChanged=null}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
child: TextField(
obscureText: this.password,
decoration: InputDecoration(
hintText: this.text,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide.none)),
onChanged: this.onChanged,
),
height: ScreenAdaper.height(68),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
width: 1,
color: Colors.black12
)
)
),
);
}
}
添加下面的代码进行首页跳转
child: InkWell(
onTap: () {
Navigator.pushNamed(context, '/login');
},
child: Text("登录/注册", style: TextStyle(color: Colors.white)),
),
3.JdButton文件添加下面的代码
class JdButton extends StatelessWidget {
final Color color;
final String text;
final Object cb;
//--------------------------------------------
final double height;
//--------------------------------------------
JdButton({Key key,this.color=Colors.black,this.text="按钮",this.cb=null,this.height=68}) : super(key: key);//-------------------------------
@override
Widget build(BuildContext context) {
ScreenAdapter.init(context);
return InkWell(
onTap: this.cb,
child: Container(
margin: EdgeInsets.all(5),
padding: EdgeInsets.all(5),
height: ScreenAdaper.height(this.height),//---------------------------------
width: double.infinity,
decoration: BoxDecoration(
4.把Login页面复制进来。
import 'package:flutter/material.dart';
import 'package:flutter_app/services/screenAdaper.dart';
import '../widget/JDText.dart';
import '../widget/JDButton.dart';
class LoginPage extends StatefulWidget {
LoginPage({Key key}) : super(key: key);
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.close),
onPressed: () {
Navigator.pop(context);
},
),
// title: Text("登录页面"),
actions: <Widget>[
FlatButton(
child: Text("客服"),
onPressed: () {},
)
],
),
body: Container(
padding: EdgeInsets.all(ScreenAdaper.width(20)),
child: ListView(
children: <Widget>[
Center(
child: Container(
margin: EdgeInsets.only(top: 30),
height: ScreenAdaper.width(160),
width: ScreenAdaper.width(160),
// child: Image.asset('images/login.png'),
child: Image.network(
'https://www.itying.com/images/flutter/list5.jpg',
fit: BoxFit.cover),
),
),
SizedBox(height: 30),
JdText(
text: "请输入用户名",
onChanged: (value) {
print(value);
},
),
SizedBox(height: 10),
JdText(
text: "请输入密码",
password: true,
onChanged: (value) {
print(value);
},
),
SizedBox(height: 10),
Container(
padding: EdgeInsets.all(ScreenAdaper.width(20)),
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Text('忘记密码'),
),
Align(
alignment: Alignment.centerRight,
child: InkWell(
onTap: (){
Navigator.pushNamed(context, '/registerFirst');
},
child: Text('新用户注册'),
),
)
],
),
),
SizedBox(height: 20),
JdButton(
text:"登录",
color: Colors.red,
height: 74,
cb: (){
},
)
],
),
),
);
}
}
5.配置登录页面的路由
import '../pages/Login.dart';
'/login': (context) => LoginPage(),
3.配置图片
6.导入3个注册页面
6.1RegisterFirst
import 'package:flutter/material.dart';
import '../widget/JDText.dart';
import '../widget/JDButton.dart';
import 'package:flutter_app/services/screenAdaper.dart';
class RegisterFirstPage extends StatefulWidget {
RegisterFirstPage({Key key}) : super(key: key);
_RegisterFirstPageState createState() => _RegisterFirstPageState();
}
class _RegisterFirstPageState extends State<RegisterFirstPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("用户注册-第一步"),
),
body: Container(
padding: EdgeInsets.all(ScreenAdaper.width(20)),
child: ListView(
children: <Widget>[
SizedBox(height: 50),
JdText(
text: "请输入手机号",
onChanged: (value) {
print(value);
},
),
SizedBox(height: 20),
JdButton(
text: "下一步",
color: Colors.red,
height: 74,
cb: () {
Navigator.pushNamed(context, '/registerSecond');
},
)
],
),
),
);
}
}
6.2RegisterSecond
import 'package:flutter/material.dart';
import '../widget/JDText.dart';
import '../widget/JDButton.dart';
import 'package:flutter_app/services/screenAdaper.dart';
class RegisterSecondPage extends StatefulWidget {
RegisterSecondPage({Key key}) : super(key: key);
_RegisterSecondPageState createState() => _RegisterSecondPageState();
}
class _RegisterSecondPageState extends State<RegisterSecondPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("用户注册-第二步"),
),
body: Container(
padding: EdgeInsets.all(ScreenAdaper.width(20)),
child: ListView(
children: <Widget>[
SizedBox(height: 50),
Container(
padding: EdgeInsets.only(left: 10),
child: Text("请输入xxx手机收到的验证码,请输入xxx手机收到的验证码"),
),
SizedBox(height:40),
Stack(
children: <Widget>[
JdText(
text: "请输入验证码",
onChanged: (value) {
print(value);
},
),
Positioned(
right: 0,
top: 0,
child: RaisedButton(
child: Text('重新发送'),
onPressed: (){
},
),
)
],
),
SizedBox(height: 20),
JdButton(
text: "下一步",
color: Colors.red,
height: 74,
cb: () {
Navigator.pushNamed(context, '/registerThird');
},
)
],
),
),
);
}
}
6.3RegisterThird
import 'package:flutter/material.dart';
import '../widget/JDText.dart';
import '../widget/JDButton.dart';
import 'package:flutter_app/services/screenAdaper.dart';
class RegisterThirdPage extends StatefulWidget {
RegisterThirdPage({Key key}) : super(key: key);
_RegisterThirdPageState createState() => _RegisterThirdPageState();
}
class _RegisterThirdPageState extends State<RegisterThirdPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("用户注册-第三步"),
),
body: Container(
padding: EdgeInsets.all(ScreenAdaper.width(20)),
child: ListView(
children: <Widget>[
SizedBox(height: 50),
JdText(
text: "请输入密码",
password: true,
onChanged: (value) {
print(value);
},
),
SizedBox(height: 10),
JdText(
text: "请输入确认密码",
password: true,
onChanged: (value) {
print(value);
},
),
SizedBox(height: 20),
JdButton(
text: "登录",
color: Colors.red,
height: 74,
cb: () {},
)
],
),
),
);
}
}
7.回到下面的页面
import '../pages/RegisterFirst.dart';
import '../pages/RegisterSecond.dart';
import '../pages/RegisterThird.dart';
'/registerFirst': (context) => RegisterFirstPage(),
'/registerSecond': (context) => RegisterSecondPage(),
'/registerThird': (context) => RegisterThirdPage(),