Flutter 入门（简单登录功能）

本篇博客记录Flutter实现简单登录功能，主要熟悉Flutter控件的使用，与路由的基本用法。

构建两个页面，分别是login、home页面

  • login页面主要吧包括一个图片下面两个输入框和一个登录按钮。
  • home页面只是包括一个按钮用来返回login页面

用到的控件

  • Image
  • ListView
  • Text
  • SizedBox
  • RaisedButton

实现

在pubspec.yaml导入一些需要用到的图标和字体库

cupertino_icons: ^0.1.2
  flutter_screenutil: ^0.7.0
  font_awesome_flutter: ^8.8.1
  english_words: ^3.1.5

在根目录新建images文件夹并且吧图片放进去如图

在pubspec.yaml中添加路径，解开注释assets，（Flutter用到的本地图片都需要在yaml文件中进行配置）如图

FlutterAppDelegate 注册ios通知 flutter登录注册功能_sed

主要知识点

  • TextEditingController 用来操作 TextField。获取到TextField的内容在点击登录的时候判断输入的是否正确，正确就进行调整，错误不跳转并弹出账号或密码错误提示框。
  • ListView 实现列表显示，Flutter中给我们提供了ListView,不过就目前的体验来看，性能跟原生的ListView或RecycleView比还是有一点差距的。滑动起来还是略卡。
  • SizedBox 能强制子控件具有特定宽度、高度或两者都有,使子控件设置的宽高失效
  • RaisedButton onPressed是返回单击回调
  • NavigatorNavigator是一个路由管理的组件，它提供了打开和退出路由页方法。Navigator通过一个栈来管理活动路由集合。通常当前屏幕显示的页面就是栈顶的路由。Navigator提供了一系列方法来管理路由栈，在此我们只介绍其最常用的两个方法：

Future push(BuildContext context, Route route)

将给定的路由入栈（即打开新的页面），返回值是一个Future对象，用以接收新路由出栈（即关闭）时的返回数据。

bool pop(BuildContext context, [ result ])

将栈顶路由出栈，result为页面关闭时返回给上一个页面的数据。

其余内容在代码中已有注释

入口文件main文件

import 'package:flutter/material.dart';
import 'Login/login.dart';

void main() => runApp(Login());

新建login页面

具体内容空源码中注释

import 'package:english_words/english_words.dart';
import 'package:flutter/services.dart';
import 'package:flutter/material.dart';
import 'home.dart';

TextEditingController _phone = TextEditingController();
TextEditingController _pass = TextEditingController();

class Login extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    final wordPair = new WordPair.random();
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
          appBar: AppBar(
            title: Text('Welcome to Flutter'),
          ),
          body: new ListView(children: <Widget>[
            new Image.asset('images/lake.jpg',
                width: 200.0, height: 200.0, fit: BoxFit.cover),
            textview(),
            endtitext(),
            password(),
            button()
          ])),
    );
  }
}

class textview extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Center(
      child: Text(
        'Hell Flutter',
        style: TextStyle(fontSize: 36.0),
      ),
    );
//    return ;
  }
}

class endtitext extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: SizedBox(
          width: 300.0,
          child: new TextField(
            inputFormatters:[WhitelistingTextInputFormatter.digitsOnly],//只允许输入数字
            maxLength: 11, //最大长度，设置此项会让TextField右下角有一个输入数量的统计字符串
            maxLines: 1, //最大行数
            decoration: InputDecoration(
              labelText: '请输入手机号',
              //设置输入框前面有一个电话的按钮 suffixIcon
              prefixIcon: Icon(Icons.phone),
              labelStyle: TextStyle(
                fontSize: 14,
                color: Colors.grey,
              ),
            ),
            //绑定控制器
            controller: _phone,
            //内容改变的回调
            onChanged: (value) {
              StepState() {
                _phone.text = value;
              }
            },
          )),
    );
  }
}

class password extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: SizedBox(
        width: 300.0,
        child: new TextField(
          maxLength: 6, //最大长度，设置此项会让TextField右下角有一个输入数量的统计字符串
          maxLines: 1, //最大行数
          obscureText: true, //是否是密码
          decoration: InputDecoration(
              labelText: '请输入密码',
              prefixIcon: Icon(Icons.lock_outline),
              labelStyle: TextStyle(
                fontSize: 14,
                color: Colors.grey,
              )),
          controller: _pass,
          onChanged: (value) {
            StepState() {
              _pass.text = value;
            }
          },
        ),
      ),
    );
  }
}

class button extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Column(
      children: <Widget>[
        RaisedButton(
          child: Text('登录'),
          onPressed: () {
            print(_phone.text);
            print(_pass.text);
            if (_phone.text == '12345678910' && _pass.text == '123') {
              Navigator.push(
                  context, MaterialPageRoute(builder: (context) => home()));
            } else {
              print('账号或密码错误');
            }
          },
        ),
      ],
    );
  }
}

新建home页面

import 'package:flutter/material.dart';
  
  class home extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      // TODO: implement build
      return MaterialApp(
        title: 'Welcome to Flutter',
        home: Scaffold(
          appBar: AppBar(
            title: Text('Home'),
          ),
          body: new Center(
            //onPressed  点击事件
            child: new RaisedButton(
                child: new Text("点我回登录页面"),
                onPressed: () {
                  //回到上一个页面 相当于finsh
                  Navigator.pop(context);
                }),
          ),
        ),
      );
    }
  }

结束

学习Flutter第一天，继续加油