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

Метод 1: использование BoxDecoration
Один из способов настройки границы панели приложений — использование класса BoxDecoration. Вы можете обернуть виджет AppBar контейнером и применить к нему BoxDecoration. Например:

AppBar(
  title: Text('My App'),
  backgroundColor: Colors.blue,
  bottom: PreferredSize(
    preferredSize: Size.fromHeight(4.0),
    child: Container(
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(
            color: Colors.red,
            width: 2.0,
          ),
        ),
      ),
    ),
  ),
),

Метод 2: использование AppBarTheme
Другой способ настроить границу панели приложений — использовать AppBarTheme. Вы можете определить собственную AppBarTheme и установить цвет и ширину границы. Вот пример:

AppBar(
  title: Text('My App'),
  backgroundColor: Colors.blue,
  theme: ThemeData(
    appBarTheme: AppBarTheme(
      color: Colors.blue,
      elevation: 0,
      border: Border(
        bottom: BorderSide(
          color: Colors.red,
          width: 2.0,
        ),
      ),
    ),
  ),
),

Метод 3: использование PreferredSizeWidget
Вы также можете создать собственный виджет, расширив класс PreferredSizeWidget. Это позволяет вам полностью контролировать макет и границу панели приложений. Вот пример:

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text('My App'),
      backgroundColor: Colors.blue,
      bottom: PreferredSize(
        preferredSize: Size.fromHeight(4.0),
        child: Container(
          decoration: BoxDecoration(
            border: Border(
              bottom: BorderSide(
                color: Colors.red,
                width: 2.0,
              ),
            ),
          ),
        ),
      ),
    );
  }
  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight);
}

Метод 4: использование пользовательского виджета панели приложений
Если вы предпочитаете иметь многоразовый пользовательский виджет панели приложений, вы можете создать отдельный виджет и передать свойства границы в качестве параметров. Вот пример:

class CustomAppBar extends StatelessWidget {
  final Color backgroundColor;
  final Color borderColor;
  final double borderWidth;
  CustomAppBar({
    required this.backgroundColor,
    required this.borderColor,
    required this.borderWidth,
  });
  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text('My App'),
      backgroundColor: backgroundColor,
      bottom: PreferredSize(
        preferredSize: Size.fromHeight(borderWidth),
        child: Container(
          decoration: BoxDecoration(
            border: Border(
              bottom: BorderSide(
                color: borderColor,
                width: borderWidth,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Метод 5: использование пользовательского виджета панели приложения с шаблоном Builder
Чтобы обеспечить большую гибкость, вы можете использовать шаблон Builder для создания пользовательского виджета панели приложения. Это позволяет вам объединить несколько методов настройки. Вот пример:

class CustomAppBar extends StatelessWidget {
  final Widget title;
  final Color backgroundColor;
  final BorderSide borderSide;
  CustomAppBar({
    required this.title,
    required this.backgroundColor,
    required this.borderSide,
  });
  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: title,
      backgroundColor: backgroundColor,
      bottom: PreferredSize(
        preferredSize: borderSide.width,
        child: Container(
          decoration: BoxDecoration(
            border: Border(
              bottom: borderSide,
            ),
          ),
        ),
      ),
    );
  }
  CustomAppBar withBorder(Color color, double width) {
    return CustomAppBar(
      title: title,
      backgroundColor: backgroundColor,
      borderSide: BorderSide(
        color: color,
        width: width,
      ),
    );
  }
}
// Usage example:
CustomAppBar myAppBar = CustomAppBar(
  title: Text('My App'),
  backgroundColor: Colors.blue,
  borderSide: BorderSide(
    color: Colors.red,
    width: 2.0,
  ),
).withBorder(Colors.green, 4.0);

В этой статье мы рассмотрели пять различных способов настройки границы панели приложений во Flutter. Независимо от того, предпочитаете ли вы использовать BoxDecoration, AppBarTheme, PreferredSizeWidget, собственный виджет или подход с использованием шаблона компоновщика, вы можете добиться желаемого вида панели приложений. Поэкспериментируйте с этими методами и выберите тот, который лучше всего подходит для вашего проекта.