iOS-Flutter入门基础(三)-TextFiled登录页

热门标签

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

先看效果图

iOS-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配置for Mac -- VSCode
Flutter入门基础(一)-Label
Flutter入门基础(二)-Button
Flutter入门基础(三)-TextFile登录页
Flutter入门基础(四)-imageview
Flutter入门基础(五)-UITableView
Flutter入门基础(六)-UITableView(二)添加headerView
Flutter入门基础(七)-路由
Flutter入门基础(八)-push页面跳转
Flutter入门基础(九)- 搭建tabbar

Flutter入门基础(十)- 图解修改应用名称及图标

标签:

未经允许不得转载:作者:SheaYang, 转载或复制请以 超链接形式 并注明出处 技术Dog|博客
原文地址:《iOS-Flutter入门基础(三)-TextFiled登录页》 发布于2019-09-26

分享到:
赞(0) 打赏

评论 抢沙发

1 + 9 =


iOS-Flutter入门基础(三)-TextFiled登录页

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.0主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。

登录

忘记密码 ?