我报名参加金石计划1期应战——分割10万奖池，这是我的第4篇文章，点击查看活动详情
本文，我将解析怎样前构建一个用户交互的登录页面。这里，我运用 TextField 挂件，这方便用户输入用户名和暗码。还运用 FlatButton 挂件，来处理一些动作。当然，我还运用了 Image 挂件来设定登录页面的 logo。
效果图如下：
第一步： main() 函数
import 'package:flutter/material.dart';void main() {
runApp(MyApp());
}class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: LoginDemo(),
);
}
}
这个 main() 函数也便是应用的进口。MyApp 类中添加了一个 LoginDemo 类作为 home 特点的参数。
第二步：class LoginDemo
- 设定脚手架的
appBar特点来作为应用的标题，如下：
appBar: AppBar(
title: Text('Login Page'),
),
- 在本次的 UI 布局中，一切的挂件都会放在
Column挂件中，然后寄存在脚手架的body中。Column中的第一个是寄存Container挂件，用来处理Image挂件。
Container(
height: 150.0,
width: 190.0,
padding: EdgeInsets.only(top: 40),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(200),
),
child: Center(
child: Image.asset('asset/images/flutter-logo.png'),
),
),
flutter-logo.png 文件寄存在 asset/images 文件夹中。咱们需要在 pubspec.yaml 文件中装备途径。
# To add assets to your application, add an assets section, like this:
assets:
- asset/images/
添加完资源之后，咱们能够运行应用了。
- 然后，运用
TextField挂件处理用户名和暗码。TextField挂件是一个输入挂件，协助咱们处理用户的输入信息。
Padding(
padding: EdgeInsets.all(10),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'User Name',
hintText: 'Enter valid mail id as abc@gmail.com'
),
),
),
Padding(
padding: EdgeInsets.all(10),
child: TextField(
obscureText: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Password',
hintText: 'Enter your secure password'
),
),
),
这里的 Padding 挂件能够协助你设定 TextField 挂件的内边距。
obscureText 特点值为
true的时候，协助咱们对TextField展示特别的字符，而不是真实的文本。
- 咱们运用
FlatButton挂件来处理忘记暗码
FlatButton(
onPressed: (){
//TODO FORGOT PASSWORD SCREEN GOES HERE
},
child: Text(
'Forgot Password',
style: TextStyle(color: Colors.blue, fontSize: 15),
),
),
onPressed() 这个函数中，咱们能够处理页面跳转或者其他的点击逻辑。
- 关于登录按钮，咱们运用
FlatButton挂件，但是咱们得装饰一下，这里咱们运用Container进行包裹。
Container(
height: 50,
width: 250,
decoration: BoxDecoration(
color: Colors.*blue*, borderRadius: BorderRadius.circular(20),
),
child: FlatButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (_) => HomePage()),
);
},
child: Text(
'Login',
style: TextStyle(color: Colors.*white*, fontSize: 25),
),
),
),
上面咱们设定了 Container 挂件的 height 和 width 特点，所以 flatbutton 也会获取到相同的高度和宽度。
decoration 特点允许咱们规划按钮，比方色彩 colorColors.blue 和 borderRadiusBorderRadius.circular(20) 特点。
- 最终指定
Text挂件以为新用户创立账号
这里咱们能够通过 GestureDetector 挂件的 onTap() 功能进行导航操作。或者创立相似忘记暗码按钮的 onPressed() 事情。
这里是整个项目的完整代码：
// lib/HomePage.dart
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home Page'),
),
body: Center(
child: Container(
height: 80,
width: 150,
decoration: BoxDecoration(
color: Colors.blue, borderRadius: BorderRadius.circular(10)),
child: FlatButton(
onPressed: () {
Navigator.pop(context);
},
child: Text(
'Welcome',
style: TextStyle(color: Colors.white, fontSize: 25),
),
),
),
),
);
}
}
// lib/main.dart
import 'package:flutter/material.dart';
import 'HomePage.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: LoginDemo(),
);
}
}
class LoginDemo extends StatefulWidget {
@override
_LoginDemoState createState() => _LoginDemoState();
}
class _LoginDemoState extends State<LoginDemo> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: Text("Login Page"),
),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 60.0),
child: Center(
child: Container(
width: 200,
height: 150,
/*decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(50.0)),*/
child: Image.asset('asset/images/flutter-logo.png')),
),
),
Padding(
//padding: const EdgeInsets.only(left:15.0,right: 15.0,top:0,bottom: 0),
padding: EdgeInsets.symmetric(horizontal: 15),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Email',
hintText: 'Enter valid email id as abc@gmail.com'),
),
),
Padding(
padding: const EdgeInsets.only(
left: 15.0, right: 15.0, top: 15, bottom: 0),
//padding: EdgeInsets.symmetric(horizontal: 15),
child: TextField(
obscureText: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Password',
hintText: 'Enter secure password'),
),
),
FlatButton(
onPressed: (){
//TODO FORGOT PASSWORD SCREEN GOES HERE
},
child: Text(
'Forgot Password',
style: TextStyle(color: Colors.blue, fontSize: 15),
),
),
Container(
height: 50,
width: 250,
decoration: BoxDecoration(
color: Colors.blue, borderRadius: BorderRadius.circular(20)),
child: FlatButton(
onPressed: () {
Navigator.push(
context, MaterialPageRoute(builder: (_) => HomePage()));
},
child: Text(
'Login',
style: TextStyle(color: Colors.white, fontSize: 25),
),
),
),
SizedBox(
height: 130,
),
Text('New User? Create Account')
],
),
),
);
}
}
本文选用意译的方式翻译。原文 levelup.gitconnected.com/login-page-…
