Как добавить тень к панели поиска во Flutter: несколько методов с примером кода

Чтобы добавить эффект тени к панели поиска во Flutter, вы можете использовать один из следующих методов:

Метод 1: использование Container и BoxDecoration

Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 2,
        blurRadius: 5,
        offset: Offset(0, 3), // changes position of shadow
      ),
    ],
  ),
  child: TextField(
    decoration: InputDecoration(
      hintText: 'Search',
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(10),
      ),
    ),
  ),
)

Метод 2: использование материала и высоты

Material(
  elevation: 5, // adjust the value to change the shadow intensity
  borderRadius: BorderRadius.circular(10),
  child: TextField(
    decoration: InputDecoration(
      hintText: 'Search',
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(10),
      ),
    ),
  ),
)

Метод 3. Использование виджета «Карточка»

Card(
  elevation: 5, // adjust the value to change the shadow intensity
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10),
  ),
  child: TextField(
    decoration: InputDecoration(
      hintText: 'Search',
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(10),
      ),
    ),
  ),
)

В этих примерах мы используем виджеты BoxDecoration, Materialи Card, чтобы добавить эффект тени к панели поиска. Вы можете настроить интенсивность тени, изменив значения elevation, spreadRadius, blurRadiusи offsetв соответствии с вашими предпочтениями. предпочтение.