flutter remove TextField default

需求

TextField 使用时有默认的padding，需要移除。

默认效果图

Still JPG (338x668).jpg

移除之后效果图

Still JPG (338x668).jpg

实现

使用InputDecoration,修改属性contentPadding、isDense。

代码如下

class TextFieldRemovePaddingTest extends StatefulWidget {
  const TextFieldRemovePaddingTest({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _TextFieldRemovePaddingTestState();
  }
}

class _TextFieldRemovePaddingTestState
    extends State<TextFieldRemovePaddingTest> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: Container(
      width: 200,
      color: Colors.blue,
      child: const TextField(
        style: TextStyle(
            fontSize: 14,
            height: 1,
            color: Color(0xFF303133),
            backgroundColor: Colors.green),
        decoration: InputDecoration(
            hintText: "please fill",
            contentPadding: EdgeInsets.symmetric(horizontal: 0, vertical: 0),
            isDense: true,
            border: InputBorder.none,
            hintStyle: TextStyle(
              color: Colors.black,
              height: 1,
              fontSize: 14,
            )),
      ),
    )));
  }
}

参考

https://stackoverflow.com/questions/59512321/cannot-remove-underside-padding-from-textfield-and-textformfield-in-flutter