Настройка виджета AppBar во Flutter: удаление эффекта тени

Метод 1. Использование свойства возвышения

Виджет AppBar во Flutter имеет свойство возвышения, которое управляет эффектом тени. Чтобы удалить тень, просто установите высоту на 0. Вот пример:

AppBar(
  elevation: 0,
  title: Text('My App'),
),

Метод 2. Применение собственной темы AppBar

Flutter позволяет вам определить собственную тему для вашего приложения, включая AppBar. Применяя пользовательскую тему, вы можете переопределить эффект тени по умолчанию. Вот пример:

MaterialApp(
  theme: ThemeData(
    appBarTheme: AppBarTheme(
      elevation: 0,
    ),
  ),
  home: Scaffold(
    appBar: AppBar(
      title: Text('My App'),
    ),
    body: Container(),
  ),
),

Метод 3. Обертывание AppBar виджетом PreferredSize

Другой подход к настройке AppBar — обернуть его виджетом PreferredSize и указать собственный предпочтительный размер. Этот метод позволяет вам лучше контролировать внешний вид AppBar. Вот пример:

PreferredSize(
  preferredSize: Size.fromHeight(56), // Adjust the height as needed
  child: AppBar(
    elevation: 0,
    title: Text('My App'),
  ),
),

Метод 4. Создание собственного виджета AppBar

Если ни один из вышеперечисленных методов не соответствует вашим требованиям, вы можете создать собственный виджет AppBar с нуля. Такой подход дает вам полный контроль над дизайном и поведением AppBar. Вот пример:

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  @override
  Size get preferredSize => Size.fromHeight(56);
  @override
  Widget build(BuildContext context) {
    return Container(
      height: preferredSize.height,
      decoration: BoxDecoration(
        color: Colors.blue,
        boxShadow: [], // Remove the shadow effect
      ),
      child: Row(
        children: [
          IconButton(
            icon: Icon(Icons.menu),
            onPressed: () {},
          ),
          Text('My App'),
        ],
      ),
    );
  }
}
// Usage:
Scaffold(
  appBar: CustomAppBar(),
  body: Container(),
),

Настройка виджета AppBar во Flutter для удаления эффекта тени — простой процесс. В этой статье мы рассмотрели несколько методов, включая настройку свойства возвышения, применение пользовательской темы AppBar, обертывание AppBar виджетом PreferredSize и создание пользовательского виджета AppBar с нуля. Выберите метод, который соответствует вашим конкретным потребностям, и добейтесь желаемого визуального стиля для панели приложений вашего приложения Flutter.