flutter 学习TextEditingController控件

关键词：TextEditingController FutureBuilder GestureDetector Container

TextEditingController就是在OC中UITextFeild 控件 [TextEditingController.addListener].监听输入框输入字符 类似于UITextFeild的textvalueDidChange代理

FutureBuilder ：Creates a widget that builds itself based on the latest snapshot of 基于最后一个快照来创建一个控件

GestureDetector：Creates a widget that detects gestures. 创建一个具有手势的组件 

点击不触发

onTap: () {

FocusScope.of(context).requestFocus(FocusNode());

},

Container这是一个容器 分为两个部分：容器布局和容器里的小组件 

return Container(
      margin: EdgeInsets.only(left: 20, top: 100),
      height: 150.0,
      width: 150.0,
      color: Colors.tealAccent,
      alignment: Alignment.center,
      //--上面是布局
      //--下面是控件里的小组件
      child: Image.network(
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201612%2F15%2F20161215221311_2PZF5.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611842988&t=eec792699666f6f0d8aec13940d71f7e',
        width: 150,
        height: 150,
        fit: BoxFit.cover,
      ),
    );

效果展示：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:fluttertoast/fluttertoast.dart';

final TextStyle _availableStyle = TextStyle(
  fontSize: 16.0,
  color: Colors.pinkAccent,
);

final TextStyle _unAvailabStyle = TextStyle(
  fontSize: 16.0,
  color: const Color(0xFFCCCCCC),
);

class LoginPage extends StatefulWidget {
  //

  final int countdown;

  final Function onTapCallBack;

  final bool available;

  LoginPage({
    this.countdown: 60,
    this.onTapCallBack,
    this.available: true,
  });
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  String phone;
  String code;
  // Timer _timer;
  int _seconds;

  TextStyle inkWellStyle = _availableStyle;
  var _futureBuilderFuture;
  var _phoneController = new TextEditingController();
  var _codeContrller = new TextEditingController();

  @override
  void initState() {
    var context = this.context;
    _seconds = widget.countdown;
    _futureBuilderFuture = _loginReAction(context, true);
    _phoneController.addListener(() {
      phone = _phoneController.text;
      print(phone);
    });
    _codeContrller.addListener(() {
      code = _codeContrller.text;
      print(code);
    });

    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    _codeContrller = null;
    _phoneController = null;
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);

    return FutureBuilder(
      future: _futureBuilderFuture,
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          if (snapshot.hasError || !snapshot.hasError) {
            return _loginPage(context);
          }
        }
      },
    );
  }

  Widget _loginPage(BuildContext context) {
  return Container(
    child: Scaffold(
      body: GestureDetector(
        onTap: () {
          FocusScope.of(context).requestFocus(FocusNode());
        },
        child: Container(
          height: MediaQuery.of(context).size.height,
          decoration: BoxDecoration(
              gradient: LinearGradient(
                  begin: Alignment.centerLeft,
                  end: Alignment.topRight,
                  colors: [
                Theme.of(context).primaryColorLight.withAlpha(200),
                Theme.of(context).accentColor.withAlpha(0),
                Theme.of(context).accentColor.withAlpha(0),
                Theme.of(context).primaryColor.withAlpha(200),
              ])),
          child: SingleChildScrollView(
            child: Column(
              children: <Widget>[
                _loginImge(),
                _buildPhoneTF(),
                _buildCodeTF(),
                _loginButton()
              ],
            ),
          ),
        ),
      ),
    ),
  );
}

  Widget _loginImge() {
    return Container(
      margin: EdgeInsets.only(left: 20, top: 100),
      height: 150.0,
      width: 150.0,
      color: Colors.tealAccent,
      alignment: Alignment.center,
      child: Image.network(
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201612%2F15%2F20161215221311_2PZF5.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611842988&t=eec792699666f6f0d8aec13940d71f7e',
        width: 150,
        height: 150,
        fit: BoxFit.cover,
      ),
    );
  }

  Widget _buildPhoneTF() {
    return Container(
      padding: EdgeInsets.fromLTRB(30, 20, 30, 20),
      child: TextField(
        controller: _phoneController,
        cursorColor: Theme.of(context).primaryColor,
        keyboardType: TextInputType.number,
        decoration: InputDecoration(
            icon: Icon(CupertinoIcons.phone),
            hintText: 'phoneNum',
            counterText: ''),
        maxLength: 11,
        maxLines: 1,
        inputFormatters: [WhitelistingTextInputFormatter(RegExp("[0-9]"))],
      ),
    );
  }

  Widget _buildCodeTF() {
    return Container(
      padding: EdgeInsets.fromLTRB(30, 20, 30, 20),
      child: TextField(
        controller: _codeContrller,
        cursorColor: Theme.of(context).primaryColor,
        keyboardType: TextInputType.number,
        decoration: InputDecoration(
          icon: Icon(CupertinoIcons.brightness),
          hintText: 'Code',
          counterText: '',
          suffixIcon: Container(
            child: FlatButton(
              onPressed: () {
                _showToast('OK Click Code');
              },
              child: Text('click'),
            ),
          ),
        ),
      ),
    );
  }

  Widget _loginButton(){

    return Container(
      height: ScreenUtil().setHeight(70),
      margin: EdgeInsets.only(top: ScreenUtil().setHeight(40)),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end:  Alignment.topRight,
          colors: [
            Theme.of(context).primaryColor,
            Theme.of(context).accentColor,
          ]
        ),
        borderRadius: BorderRadius.circular(35),
      ),
      child: MaterialButton(
        minWidth: ScreenUtil().setWidth(600),
        height: ScreenUtil().setHeight(100),
        child: Text('Sign In',style: TextStyle(color: Colors.white),),
        onPressed: () async{
          await _loginReAction(context, false).then((result) {
            _showToast('Ok loginReAction');
          });
        },
      ),
    );
  }  

  void _showToast(String msg) {
    Fluttertoast.showToast(
      msg: msg,
      toastLength: Toast.LENGTH_SHORT,
      gravity: ToastGravity.CENTER,
      timeInSecForIos: 1,
      backgroundColor: Colors.black87,
      textColor: Color(0xFFffffff),
    );
  }
}



Future _loginReAction(BuildContext context, bool aotoLogin) async {}