Вы устали от одной и той же старой прямоугольной панели приложений в своем приложении Flutter? Хотите добавить уникальности и стиля панели приложений вашего приложения? Ну, не ищите дальше! В этой статье мы рассмотрим различные методы применения радиуса границы к панели приложений Flutter, придавая ей свежий и привлекательный вид. Итак, приступим!

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

Один из самых простых способов добавить радиус границы к панели приложений — использовать класс BoxDecoration. Вот пример того, как этого можно добиться:

AppBar(
  backgroundColor: Colors.blue,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.vertical(
      bottom: Radius.circular(20.0),
    ),
  ),
  // Rest of your AppBar configuration
)

В приведенном выше фрагменте кода мы определяем RoundedRectangleBorderс BorderRadiusшириной 20,0 пикселей по нижнему краю, что придает AppBar изогнутый вид.

Метод 2. Пользовательский виджет панели приложений

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

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  final double borderRadius;
  CustomAppBar({Key? key, required this.borderRadius})
      : preferredSize = Size.fromHeight(kToolbarHeight),
        super(key: key);
  @override
  final Size preferredSize;
  @override
  Widget build(BuildContext context) {
    return AppBar(
      backgroundColor: Colors.blue,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(
          bottom: Radius.circular(borderRadius),
        ),
      ),
      // Rest of your AppBar configuration
    );
  }
}

При таком подходе вы можете легко указать радиус границы при использовании виджета CustomAppBar, обеспечивая гибкость и возможность повторного использования.

Метод 3: ClipRRect

Другой способ получить закругленную панель приложений — использовать виджет ClipRRect. Вот пример:

AppBar(
  backgroundColor: Colors.blue,
  flexibleSpace: ClipRRect(
    borderRadius: BorderRadius.vertical(
      bottom: Radius.circular(20.0),
    ),
    child: Container(
      // Additional customization within the AppBar
    ),
  ),
  // Rest of your AppBar configuration
)

Обернув Containerвнутри ClipRRectи указав желаемый радиус границы, вы можете добиться аналогичного эффекта.

Метод 4. Пользовательская раскраска

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

class CustomShape extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // Custom painting code goes here
  }
  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}
AppBar(
  backgroundColor: Colors.blue,
  flexibleSpace: CustomPaint(
    painter: CustomShape(),
    child: Container(
      // Additional customization within the AppBar
    ),
  ),
  // Rest of your AppBar configuration
)

Реализовав класс CustomPainterи переопределив метод paint, вы можете создать любую форму по вашему желанию, включая закругленную панель приложений.

Заключение

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