0
点赞
收藏
分享

微信扫一扫

Flutter 实现登录 UI

本文,我将解析怎么前构建一个用户交互的登录页面。这里,我使用 ​​TextField​​​ 挂件,这方便用户输入用户名和密码。还使用 ​​FlatButton​​​ 挂件,来处理一些动作。当然,我还使用了 ​​Image​​​ 挂件来设定登录页面的 ​​logo​​。

效果图如下:

Flutter 实现登录 UI_iOS

第一步: 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

  1. 设定脚手架的​​appBar​​ 属性来作为应用的标题,如下:

appBar: AppBar(
title: Text('Login Page'),
),

  1. 在本次的 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/

Flutter 实现登录 UI_sed_02

添加完资源之后,我们可以运行应用了。

  1. 然后,使用​​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​​ 展示特殊的字符,而不是真正的文本。

  1. 我们使用​​FlatButton​​ 挂件来处理忘记密码

FlatButton(
onPressed: (){
//TODO FORGOT PASSWORD SCREEN GOES HERE
},
child: Text(
'Forgot Password',
style: TextStyle(color: Colors.blue, fontSize: 15),
),
),

​onPressed()​​ 这个函数中,我们可以处理页面跳转或者其他的点击逻辑。

  1. 对于登录按钮,我们使用​​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​​ 属性允许我们设计按钮,比如颜色 color​Colors.blue​​ 和 borderRadius​BorderRadius.circular(20)​​ 属性。

  1. 最后指定​​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-…


举报

相关推荐

0 条评论