flutter TextField开发示例

先了解一下TextField的属性

 const TextField({
Key key,
this.controller,  //控制器
this.focusNode,
this.decoration = const InputDecoration(), //外框样式装饰
TextInputType keyboardType,    //输入类型
this.textInputAction,
this.textCapitalization = TextCapitalization.none,
this.style,
this.strutStyle,
this.textAlign = TextAlign.start,   //文字对其方式
this.textDirection,    //文字方向
this.autofocus = false,  //自动聚焦
this.obscureText = false, // 是否是隐藏文本（密码形式
this.autocorrect = true,  //是否启用自动更正
this.maxLines = 1,
this.maxLength,
this.maxLengthEnforced = true,
this.onChanged,
this.onEditingComplete,
this.onSubmitted,
this.inputFormatters, //输入内容过滤
this.enabled,
this.cursorWidth = 2.0,
this.cursorRadius, //光标圆角
this.cursorColor,  //光标颜色
this.keyboardAppearance,
this.scrollPadding = const EdgeInsets.all(20.0),
this.dragStartBehavior = DragStartBehavior.start,
this.enableInteractiveSelection,
this.onTap,
this.buildCounter,
})

了解属性之后，接下来就可以好好写代码了

class FeedBack extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new _FeedBackState();
  }
}

class _FeedBackState extends State<FeedBack> {
  var value = "";

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        centerTitle: true,
        backgroundColor: Colors.black,
        title: Text("Feedback"),
        actions: <Widget>[
          new Center(
            child: new Padding(
              padding: const EdgeInsets.all(10.0),
              child: new Text("submit"),
            ),
          )
        ],
      ), //f5f5f5
      backgroundColor: const Color(0xfff5f5f5),
      body: new Column(
//        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          new Container(
//            decoration: new BoxDecoration(
////              border: Border.all(color: Color(0xffffffff), width: 1.0), //灰色的一层边框
////              color: Color(0xffffffff),
////              borderRadius: new BorderRadius.all(new Radius.circular(0.0)),
//            ),
//            alignment: Alignment.center,
//            height: 174,
//          color: Colors.white,
//            color: Colors.blue,
          color: Color(0xffffffff),
            padding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 20.0),
            child: new TextField(
              cursorColor: Colors.black, //设置光标
//              cursorRadius: Radius.circular(25.0),
              maxLines: 10,
              maxLength: 500,
              scrollPadding: const EdgeInsets.all(50.0),
              decoration: InputDecoration(
                  //输入框decoration属性
//            contentPadding: const EdgeInsets.symmetric(vertical: 4.0,), //调整文字跟外面边框的留白，垂直上下方向
//            contentPadding: const EdgeInsets.symmetric(horizontal: 4.0,), //调整文字跟外面边框的留白，水平左右方向
                  contentPadding: new EdgeInsets.only(left: 10.0,top: 10.0,right: 5.0,bottom: 10.0), //特定方向留白
                  fillColor: Color(0xffffffff),
//                  fillColor: Colors.blue,
                  filled: true,
                  border: InputBorder.none,  //下边框
                  hintText: "we are glad to hear from you",
                  hintStyle:
                      new TextStyle(fontSize: 14, color: Color(0xff777777))),
              style: new TextStyle(fontSize: 15.4, color: Color(0xff777777)),
            ),
          ),
          new Padding(padding: EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0)),
          new Container(
            decoration: new BoxDecoration(
//              border: Border.all(color: Colors.grey, width: 1.0), //灰色的一层边框
              color: Color(0xffffffff),
              borderRadius: new BorderRadius.all(new Radius.circular(0.0)),
            ),
            alignment: Alignment.center,
            height: 36,
//            padding: EdgeInsets.fromLTRB(10.0, 0.0, 0.0, 0.0),
            child: new TextField(
              cursorColor: Colors.black, //设置光标
              decoration: InputDecoration(
                  //输入框decoration属性
//            contentPadding: const EdgeInsets.symmetric(vertical: 1.0,horizontal: 1.0),
                  contentPadding: new EdgeInsets.only(left: 10.0,right: 10.0),
//            fillColor: Colors.white,
                  border: InputBorder.none,
                  hintText: "Please leave your email (optional)",
                  hintStyle:
                  new TextStyle(fontSize: 14, color: Color(0xff777777))),
              style: new TextStyle(fontSize: 15.4, color: Color(0xff777777)),
            ),
          ),
        ],
      ),
    );
  }
}

实际效果如下