TextField component is frequently used in the development. Since there are few documents when using TextField component, we hereby record the problems we usually encounter

[TOC]

Hide input box borders or underscores

Sometimes the default border of the input field does not meet the requirements of the design. We need a cleaner input field, which can be solved by setting the TextField decoration

TextField(
  decoration: InputDecoration(
    hintText: "Please enter your account number",
    border: InputBorder.none,// Input border is set to null
    suffix: Image.asset("images/login_del.png", width: 20),),)Copy the code

The soft keyboard blocks the input box

This problem is relatively frequent. When our TextField is lower on the page, the pop-up soft keyboard will block the input box, and there are few solutions online. Later in use, I found that as long as the outer layer of any scrollable widgets on the line, hereby record

SingleChildScrollView(
  child: Column(
    children: <Widget>[
      / /.. Content section, which contains the TextField control],),)Copy the code