Flutter表单组件

demo涵盖内容如下图

two.gif

three.gif

TextField(
              obscureText: this.isShowEye,
              onChanged: (value) {
                setState(() {
                  this.inputValue = value;
                });
              },
              inputFormatters: [
                // 白名单
                FilteringTextInputFormatter.allow(RegExp('^[0-9]*\$')),
                // 黑名单
                FilteringTextInputFormatter.deny(RegExp("[a-z]")),
              ],
              decoration: InputDecoration(
                // 垂直居中
                contentPadding: EdgeInsets.symmetric(vertical: 0),
                prefixIcon: Icon(Icons.search), //左边图标
                suffixIcon: IconButton( // 右边图标
                  onPressed: () {
                    setState(() {
                      this.isShowEye = !this.isShowEye;
                    });
                  },
                  icon:
                  Icon(this.isShowEye ? Icons.remove_red_eye : Icons.close),
                ),
                hintText: "请输入",
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(20),
                  borderSide: BorderSide(
                    width: 0.5,
                    color: Colors.amber,
                  ),
                ),
              ),
            ),

Demo地址