flutter 文本框使用

const TextField({
    Key key,
    // 編輯框的控制器，跟文本框的交互一般都通過該屬性完成，如果不創建的話默認會自動創建
    this.controller,
    // 用於控制`TextField`是否佔有當前鍵盤的輸入焦點, 使我們和鍵盤交互的`handle`
    this.focusNode,
    
    // 用於控制`TextField`的外觀顯示，如提示文本、背景顏色、邊框等
    this.decoration = const InputDecoration(),
    // 鍵盤類型
    TextInputType keyboardType,
    // 決定鍵盤右下角按鈕顯示的內容
    this.textInputAction,
    // 設置什麼情況下使用大寫字母, 默認不使用大寫字母
    this.textCapitalization = TextCapitalization.none,
    
    // 正在編輯的文本樣式, `TextStyle`
    this.style,
    // 輸入框文本的對其方式
    this.textAlign = TextAlign.start,
    // 輸入框文本的其實位置
    this.textDirection,
    
    // 是否自動獲取焦點, 默認`false`
    this.autofocus = false,
    // 是否隱藏正在編輯的文本，如用於輸入密碼的場景等，文本內容會用“•”替換, 默認`false`
    this.obscureText = false,
    // 是否自動校驗, 默認`false`
    this.autocorrect = true,
    
    // 輸入框能輸入的最大行數
    this.maxLines = 1,
    // 輸入框能輸入的最多字符個數
    this.maxLength,
    // 達到最大長度(`maxLength`)時是否阻止輸入, 默認`true`: 不能繼續輸入, `false`可以繼續輸入
    this.maxLengthEnforced = true,
    
    // 輸入文本發生變化時的回調
    this.onChanged,
    // 點擊鍵盤完成按鈕時觸發的回調，該回調沒有參數，(){}
    this.onEditingComplete,
    // 點擊鍵盤完成按鈕時觸發的回調，該回調有參數，參數即爲當前輸入框中的值。(String){}
    this.onSubmitted,
    
    // 對輸入文本的校驗
    this.inputFormatters,
    // 輸入框是否可用, `false`則輸入框會被禁用
    this.enabled,
    
    // 光標的寬度
    this.cursorWidth = 2.0,
    // 光標的圓角
    this.cursorRadius,
    // 光標的顏色
    this.cursorColor,
    
    // 鍵盤的外觀, Brightness.light和dark
    this.keyboardAppearance,
    // 當TextField滾動時, 設置文本字段在滾動後的位置與可滾動項的邊緣的距離
    this.scrollPadding = const EdgeInsets.all(20.0),
    // 長按輸入的文本, 設置是否顯示剪切，複製，粘貼按鈕, 默認是顯示的
    this.enableInteractiveSelection = true,
    // 點擊輸入框時的回調(){}
    this.onTap,
})

 示例代碼

用到了吐司插件 在pubspec.yaml 導入

oktoast: ^2.2.0

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

void main() => runApp(TextFiedDemo());

class TextFiedDemo extends StatefulWidget {
  @override
  _TextFiled createState() => _TextFiled();
}

class _TextFiled extends State<TextFiedDemo> {
  TextEditingController userController = TextEditingController();
  TextEditingController passController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return OKToast(
      child: MaterialApp(
          home: Scaffold(
              body: new ListView(
        children: <Widget>[
          TextField(
            decoration: new InputDecoration(
                hintText: "This is a hint", helperText: "官方表單Demo"),
          ),
          TextField(
            keyboardType: TextInputType.number,
            decoration: new InputDecoration(labelText: "數字優先的文本框"),
          ),
          TextField(
            decoration: new InputDecoration(
//                添加一個圖標
              icon: Icon(Icons.phone),
              labelText: "請輸入你的用戶名",
              helperText: "帶圖標和label的文本輸入框",
            ),
          ),
          TextField(
            decoration: new InputDecoration(
              labelText: "請輸入密碼",
              icon: Icon(Icons.lock),
              helperText: "帶圖標和label的密碼輸入框",
            ),
//              是否隱藏輸入
            obscureText: true,
          ),
          Text(
            '模擬登陸',
            style:
                TextStyle(fontSize: 20, height: 3, fontWeight: FontWeight.bold),
            textAlign: TextAlign.center,
          ),
          TextField(
            controller: userController,
            //控制器，控制TextField文字   同 Android View id
            decoration: new InputDecoration(
              icon: Icon(Icons.phone), //添加一個圖標
              hintText: '請輸入你的用戶名',
            ),
            autofocus: false,
          ),
          TextField(
            controller: passController,

            decoration: new InputDecoration(
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(5),
              ),
              icon: Icon(Icons.lock), //添加一個圖標
              hintText: '請輸入密碼',
            ),
            obscureText: true, //
          ),
          new Container(
              width: 340.0,
              padding: new EdgeInsets.all(20),
              child: new Card(
                  color: Colors.blue,
                  elevation: 16.0,
                  child: new FlatButton(
                      child: new Padding(
                        padding: new EdgeInsets.all(10.0),
                        child: new Text(
                          '登錄',
                          style: new TextStyle(
                              color: Colors.white, fontSize: 16.0),
                        ),
                      ),
                      onPressed: _login))),
        ],
      ))),
    );
  }

  //登陸校驗
  void _login() {
    print({'用戶名': userController.text, '密碼': passController.text});
    if (userController.text.isEmpty) {
      showToast('請輸入用戶名！', position: ToastPosition.bottom);
    } else if (passController.text.isEmpty) {
      showToast('請輸入密碼！', position: ToastPosition.bottom);
    } else if (userController.text == 'lx' && passController.text == '123') {
      showToast('登陸成功！', position: ToastPosition.bottom);
      userController.clear();
      passController.clear();
    } else {
      showToast('用戶密碼錯誤！', position: ToastPosition.bottom);
    }
  }

  void onTextClear() {
    setState(() {
      userController.clear();
      passController.clear();
    });
  }
}