Flutter TextField示例

带边框效果

TextField(
  controller: _passWordController,
  autofocus: true,
  obscureText: true,
  maxLength: 20,
  decoration: InputDecoration(
    contentPadding: const EdgeInsets.all( 10),
    label: const Text(Strings.password),
    hintText: Strings.inputPassword,
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(5),//圆角
      borderSide: BorderSide.merge( //边框宽度
        const BorderSide(width: 1, color: Colors.grey),
        const BorderSide(width: 1, color: Colors.grey),
      ),
    ),
  ),
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

不带边框效果

TextField(
  controller: _userNameController,
  autofocus: true,
  decoration: InputDecoration(
    prefixIcon: const Icon(Icons.account_circle_outlined
1
2
3
4