Как добавить тень к TextField при наличии свойства maxLength или minLength? - PullRequest
Новая
       35

Как добавить тень к TextField при наличии свойства maxLength или minLength?

0 голосов
/ 21 июня 2020

У меня есть нормальный TextField, и я хочу, чтобы на нем была тень , но я не нашел решения этой проблемы. Мой TextField имеет свойство maxLength, поэтому у меня есть небольшое количество символов под ним, которое я хочу сохранить.

Каждый раз, когда я помещаю этот TextField в виджет Material или Container и использую свойства тени, тень применяется ко всей области TextField, и в результате получается катастрофа, как вы видите:

введите описание изображения здесь

Как добавить тень только на панель ввода, например панель поиска Google ?

Я удалил многие свойства, чтобы сделать пример более понятным: 

TextField(
              maxLength: 40,
              decoration: InputDecoration(
                filled: true,
                fillColor: kSomeColor,
                border: OutlineInputBorder(borderRadius: BorderRadius.all(
                    Radius.circular(80),
                  ),
                ),
              ),
            ),

РЕДАКТИРОВАТЬ: Если вы добавите текст errorText или labelText, у вас будет такая же проблема

1 Ответ

1 голос
/ 21 июня 2020

Я добился того же эффекта, используя стек и добавляя тень к другому контейнеру.

введите описание изображения здесь 

          Stack(
            children: [
              Container(
                height: 60,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(
                    Radius.circular(80),
                  ),
                  boxShadow: [
                    BoxShadow(
                        color: Colors.grey, blurRadius: 5, spreadRadius: 5),
                  ],
                ),
              ),
              Container(
                height: 80,
                child: TextFormField(
                  maxLength: 40,
                  decoration: InputDecoration(
                    filled: true,
                    fillColor: Colors.lightBlue[900],
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.all(
                        Radius.circular(80),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
...