flutter - 登陸介面&表單校驗

謝秀嶽lonelyBoy發表於2019-10-05

Flutter

flutter 登陸介面和表單校驗

先上Gif效果圖

可能在掘金是Gif不會動，大家請右擊，在新標籤開啟，或者點選下面的【點選開啟gif】

點選開啟gif

先畫UI，然後寫校驗，現在我們UI畫好了，之前的佈局說過了，如果不會可以看前面的文章。

登陸的時候，使用者要輸入手機號之類的，這時候我們要反饋提示給使用者，這裡flutter自帶的Form表單就已經做到了

首先使用 Form元件函式（準確說叫widget），然後寫一個key，因為我們等下要操作它，然後寫child，裡面就是TextFormField元件。

TextFormField有 validator校驗函式，接收一個入參就是value，然後return null的時候就是正常的，錯誤的時候return String就可以了。

看下完整程式碼

大家, 看的時候點個贊，如果對你有幫助的話。點贊對我也沒啥好處，不過希望感受大家暖暖的愛意～～

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

class LoginPage extends StatefulWidget {
  static String tag = 'login-page';
  @override
  _LoginPageState createState() => new _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  GlobalKey<FormState> _formKey = new GlobalKey<FormState>();
  String _phone = '';
  String _pw = '';

  void _onSubmit() {
    final form = _formKey.currentState;
    if(form.validate()) {
      form.save();
      showDialog(context: context, builder: (ctx)=> new AlertDialog(
        content:  new Text('phone: $_phone , pw: $_pw '),
      ));
    }
  }
  @override
  Widget build(BuildContext context) {
    SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,statusBarIconBrightness:Brightness.dark,
    );
    SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
    final logo = new Hero(
      tag: 'hero',
      child: new CircleAvatar(
        backgroundColor: Colors.transparent,
        radius: 48.0,
        child: new ClipRRect(
          child: new SizedBox(
            // width: 120,
            // height: 120,
            child: new Image.asset('images/cjyy_320.jpg', fit: BoxFit.cover),
          ),
          borderRadius: BorderRadius.all(Radius.circular(15))
        ),
      ),
    );

    final email = new TextFormField(
      keyboardType: TextInputType.emailAddress,
      autofocus: false,
      initialValue: '',
      onSaved: (val)=> this._phone = val,
      validator: (value){
        if(value.length != 11){
          return '手機號不是11位數哦～';
        }else{
           return null;
        }
      },
      decoration: new InputDecoration(
        hintText: '手機號',
        contentPadding: new EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
        border: new OutlineInputBorder(
          borderRadius: BorderRadius.circular(32.0)
        )
      )
    );

    final password = new TextFormField(
      autofocus: false,
      initialValue: '',
      obscureText: true,
      onSaved: (val)=> this._pw = val,
      validator: (value){
        if(value.length < 6 || value.length > 16){
          return '密碼在6-16位數之間哦';
        }else{
           return null;
        }
      },
      decoration:  new InputDecoration(
        hintText: '密碼',
        contentPadding: new EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
        border: new OutlineInputBorder(
          borderRadius: BorderRadius.circular(32.0)
        )
      ),
    );

    final loginButton = new Padding(
      padding: new EdgeInsets.symmetric(vertical: 16.0),
      child: new Material(
        borderRadius: BorderRadius.circular(32.0),
        shadowColor: Colors.lightBlueAccent.shade100,
        elevation: 5.0,
        child: new MaterialButton(
          minWidth: 200.0,
          height: 42.0,
          onPressed: _onSubmit,
          color: Colors.lightBlueAccent,
          child: new Text('Log In',style: new TextStyle(color: Colors.white),),
        ),
      ),
    );

    final forgetLabel = new FlatButton(
      onPressed: (){
        print('等死吧');
      },
      child: new Text('忘記密碼? ',style: new TextStyle(color: Colors.black54),),
    );
    return new Scaffold(
      backgroundColor: Colors.white,
      body: new Center(
        child: new Center(
          child: new ListView(
            shrinkWrap: true,
            padding: new EdgeInsets.only(left: 24.0,right: 24.0),
            children: <Widget>[
              new Form(
                key: _formKey,
                child: new Column(
                  children: <Widget>[
                    logo,
                    SizedBox(height: 48.0),
                    email,
                    SizedBox(height: 8.0,),
                    password,
                    SizedBox(height: 24.0,),
                    loginButton,
                    forgetLabel
                  ],
                ),
              )              
            ],
          ),
        ),
      ),
    );
  }
}
複製程式碼

flutter - 登陸介面&表單校驗

相關說明：

相關文章