A user login page

input validation

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

void main() {
  debugPaintSizeEnabled = false;
  runApp(new LoginAlertDemoApp());
}

class LoginAlertDemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        theme: new ThemeData(
          primarySwatch: Colors.green,
        ),
        home: Scaffold(
          body: new LoginHomePage(),
        ));
  }
}

class LoginHomePage extends StatefulWidget {
  @override
  _LoginHomePageState createState() {
    // TODO: implement createState
    return new _LoginHomePageState();
  }
}

class _LoginHomePageState extends State<LoginHomePage> {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Column(
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              height: 120.0,
              alignment:Alignment.centerLeft,
              padding: EdgeInsets.only(left:30.0),
              color: Colors.white,
              child: Icon(Icons.access_alarm),
            ),
            Container(
              color: Colors.white,
              alignment: Alignment.center,
              padding: EdgeInsets.only(left:30.0,right: 30.0),
              child: new Container(
                child: buildForm(),
              ),
            ),

          ] , 
        ) ,

      ] , 
    ) ; 
  }

  TextEditingController unameController = new TextEditingController();
  TextEditingController pwdController = new TextEditingController();
  GlobalKey formKey = new GlobalKey<FormState>();


  Widget buildForm ( )  { 
    return  Form ( 
      //Set globalKey for later obtaining FormState 
      key : formKey , 
      //Enable automatic validation 
      autovalidate :  true , 
      child :  Column ( 
        children :  < Widget > [ 
          TextFormField ( 
              autofocus :  false , 
              keyboardType : TextInputType . number , 
              //The style of the keyboard enter key 
              textInputAction :TextInputAction . next , 
              controller : unameController , 
              decoration :  InputDecoration ( 
                  labelText :  "Username or Email" , 
                  hintText :  "Username or Email" , 
                  icon :  Icon ( Icons . person ) ) , 
              // Verify username 
              validator :  ( v )  { 
                return v . trim ( ) .length >  0  ? null :  "Username cannot be empty" ; 
              } ) , 
          TextFormField ( 
              autofocus :  false , 
              controller : pwdController , 
              decoration :  InputDecoration ( 
                  labelText :  "Password" , hintText :  "Your login password" , icon :  Icon ( Icons . lock ) ) , 
              obscureText : true , 
              // Verify password 
              validator :  ( v )  { 
                return v . trim ( ) . length >  5  ? null :  "Password cannot be less than 6 digits" ; 
              } ) , 
          // Login button 
          Padding ( 
            padding :  const EdgeInsets . only ( top :  28.0 ) , 
            child :  Row ( 
              children :  < Widget>[
                Expanded(
                  child: RaisedButton(
                    padding: EdgeInsets.all(15.0),
                    child: Text("登录"),
                    color: Theme.of(context).primaryColor,
                    textColor: Colors.white,
                    onPressed: () { 
                      //You can't get FormState in this way, the context is wrong //print(Form.of(context 
                      )); 
                      // After getting FormState through _formKey.currentState, 
                      // call the validate() method to verify whether the username and password are not It is legal, 
                      and the data is submitted after the verification // passes. 
                      if  ( ( formKey . currentState as FormState ) . validate ( ) )  { 
                        //Validate submitted data 
                      } 
                    } , 
                  ) , 
                ) , 
              ] , 
            ) , 
          ) 
        ] , 
      ) , 
    ) ; 
  }

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89
• 90
• 91
• 92
• 93
• 94
• 95
• 96
• 97
• 98
• 99
• 100
• 101
• 102
• 103
• 104
• 105
• 106
• 107
• 108
• 109
• 110
• 111
• 112
• 113
• 114
• 115
• 116
• 117
• 118
• 119
• 120
• 121
• 122
• 123
• 124
• 125
• 126
• 127
• 128
• 129
• 130
• 131