【Flutter】表单 - Password

参照
【Flutter】表单 - Input

首先创建一个密码框

TextField(
  controller: _passwordControl,
  obscureText: true,
  decoration: InputDecoration(
    contentPadding: const EdgeInsets.all(15.0),
    hintText: '请输入密码',
    border: OutlineInputBorder(
      borderRadius: BorderRadius.all(
        Radius.circular(28), //边角为30
      ),
      borderSide: BorderSide(
        color: Colors.amber, //边线颜色为黄色
        width: 2, //边线宽度为2
      ),
    ),
  )
)

设置右侧的小眼睛图标并绑定事件

return TextField(
    controller: _passwordControl,
    obscureText: _isShow,
    decoration: InputDecoration(
      contentPadding: const EdgeInsets.all(15.0),
      hintText: '请输入密码',
      suffix: GestureDetector(
        onTap: _showPassword,
        child: Icon(
          Icons.remove_red_eye,
          color: !_isShow ? Colors.red : Colors.grey,
        )
      ),
      border: OutlineInputBorder(
        borderRadius: BorderRadius.all(
          Radius.circular(28), //边角为30
        ),
        borderSide: BorderSide(
          color: Colors.amber, //边线颜色为黄色
          width: 2, //边线宽度为2
        ),
      ),
    )
);