Flutter入门基础（三）-TextFiled登录页

先看效果图

Textfiled-登录页面

实现代码

mport 'package:flutter/material.dart';

import 'welcome_page/index.dart';
import 'test/page.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'title',
      home: RouteProSample(),
    );
  }
}

class RouteProSample extends StatefulWidget {
  @override
  createState() => _RouteProSampleState();
}

class _RouteProSampleState extends State<RouteProSample> {
  final TextEditingController _userPhoneController =
      new TextEditingController();
  final TextEditingController _userPasswordController =
      new TextEditingController();

  void onTextClear() {
    setState(() {
      _userPhoneController.text = "";
      _userPasswordController.text = "";
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('导航栏标题-登录'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.playlist_play),
            onPressed: () {
              Navigator.of(context).pushNamed('/c');
              print('点击条状');
            },
          ),
        ],
      ),

      body: new Center(
        child: new Column(
          children: <Widget>[
            new Text(
              "文本数据框",
              style: new TextStyle(
                fontSize: 20.0,
              ),
            ),
            new TextField(
              controller: _userPhoneController,
              keyboardType: TextInputType.text,
              decoration: new InputDecoration(
                contentPadding: const EdgeInsets.all(10.0),
                icon: new Icon(Icons.phone),
                labelText: "输入手机号",
                helperText: "注册时填写的手机号",
                // suffixIcon: new Icon(Icons.picture_in_picture),
                // border: new OutlineInputBorder(
                //   gapPadding: 10.0,
                //   borderRadius: BorderRadius.circular(20),
                // ),
              ),
              onChanged: (String value) {
                print("手机号-----》$value]");
              },
            ),
            new TextField(
              controller: _userPasswordController,
              keyboardType: TextInputType.text,
              decoration: new InputDecoration(
                contentPadding: const EdgeInsets.all(10.0),
                icon: new Icon(Icons.nature_people),
                labelText: "输入姓名",
                helperText: "注册时填写的姓名",
                // suffixIcon: new Icon(Icons.picture_in_picture),
                // border: new OutlineInputBorder(
                //   gapPadding: 10.0,
                //   borderRadius: BorderRadius.circular(20),
                // ),
              ),
              onSubmitted: (value) {
                print("------文字提交------");
              },
              onEditingComplete: () {
                print("------编辑完成------");
              },
              onChanged: (value) {
                print("------输入框中的内容：$value >------");
              },
              style: new TextStyle(
                fontSize: 30.0,
                color: Colors.red,
              ),
              
            ),
            new Builder(builder: (BuildContext context) {
              return new RaisedButton(
              
                child: Text(
                  "debug",
                  style: new TextStyle(
                    color: Colors.red,
                    fontSize: 20.0,
                  ),
                ),
                highlightColor: Colors.deepPurple,
                disabledColor: Colors.cyan,
                
                onPressed: () {
                  print("onpredds");
                  if (_userPhoneController.text.toString() == "10086" &&
                      _userPasswordController.text.toString() == "10086") {
                    Scaffold.of(context)
                        .showSnackBar(new SnackBar(content: new Text("校验通过")));
                  } else {
                    Scaffold.of(context)
                        .showSnackBar(new SnackBar(content: new Text("校验有问题")));
                    onTextClear();
                  }
                },
              );
            }),
          ],
        ),
      ),
    );
  }
}

// 配置main函数
void main() async {
  runApp(new MyApp());
}

Flutter入门基础（一）-Label
Flutter入门基础（二）-Button
Flutter入门基础（三）-TextFile登录页
Flutter入门基础（四）-imageview