Как я могу выровнять hintText по вертикали TextField во Flutter? - PullRequest
Новая
       1

Как я могу выровнять hintText по вертикали TextField во Flutter?

0 голосов
/ 29 мая 2020

enter image description here

Что-то странное происходит, по какой-то причине я не могу поставить hintText вертикально внутри TextField, самая странная вещь происходит, когда текстовое поле имеет фокус (см. гифку). borderRadius утерян и, по-видимому, в этот момент он исправлен. Когда фокус текстового поля теряется, он снова становится беспорядочным. Как исправить?

это мой код: 

Widget _searchBar() {
 return Container(
  height: 40,
  child: TextField(
    textAlignVertical: TextAlignVertical.center,
    style: TextStyle(
      color: _styles["gris_oscuro1"]["color"],
    ),
    onChanged: (value) {},
    decoration: InputDecoration(
      filled: true,
      fillColor: _styles["gris_claro"]["color"],
      alignLabelWithHint: true,
      hintText: "Buscar por código",
      hintStyle: TextStyle(color: _styles["gris_oscuro2"]["color"]),
      prefixIcon:
          Icon(Icons.search, color: _styles["gris_oscuro2"]["color"]),
      enabledBorder: OutlineInputBorder(
        borderRadius: BorderRadius.all(Radius.circular(40)),
        borderSide:
            BorderSide(color: _styles["gris_claro"]["color"], width: 1.0),
      ),
    ),
  ),
);


  Scaffold(
    key: _scaffoldKey,
    backgroundColor: _styles["fondo"]["bg"],
    drawer: MenuWidget(),
    body: SafeArea(
      child: _searchBar(),
    )

enter image description here

1 Ответ

1 голос
/ 29 мая 2020

Это происходит из-за высоты, которую вы даете родительскому контейнеру. Может быть два способа выровнять текст подсказки по вертикали (они не зависят друг от друга, выберите один) 

child: Container(
  // height: 48, //ONE - Remove the static height
  child: TextField(
    textAlignVertical: TextAlignVertical.center,
    style: TextStyle(
      textBaseline: TextBaseline.alphabetic,
      color: Colors.red,
    ),
    onChanged: (value) {},
    decoration: InputDecoration(
      // contentPadding: EdgeInsets.all(8.0), //TWO - Specify the padding if you want your custom height.
      filled: true,
      alignLabelWithHint: true,
      hintText: "Buscar por código",
      hintStyle: TextStyle(color: Colors.red),
      prefixIcon: Icon(Icons.search, color: Colors.red),
      enabledBorder: OutlineInputBorder(
        borderRadius: BorderRadius.all(Radius.circular(40)),
        borderSide: BorderSide(color: Colors.red, width: 1.0),
      ),
    ),
  ),
),
  1. Удалить высоту контейнера
  2. Если вы хотите размер родительского контейнера по вашему желанию, вы должны указать некоторые внутренние отступы для содержимого.

Изменить: вы потеряете границу, когда нажмете на TextField, поскольку вы ничего не передаете свойство focusedBorder для TextField. Следуйте приведенному ниже коду: 

decoration: InputDecoration(
  filled: true,
  alignLabelWithHint: true,
  hintText: "Buscar por código",
  hintStyle: TextStyle(color: Colors.red),
  prefixIcon: Icon(Icons.search, color: Colors.red),
  enabledBorder: OutlineInputBorder(
    borderRadius: BorderRadius.all(Radius.circular(40)),
    borderSide: BorderSide(color: Colors.red, width: 1.0),
  ),
  focusedBorder: OutlineInputBorder( //Add this to your code...
    borderRadius: BorderRadius.all(Radius.circular(40)),
    borderSide: BorderSide(color: Colors.red, width: 1.0),
  ),
),
...