Как я могу создать панель приложений, которая выглядит так:

Как я мог добиться такого AppBar, сам AppBar не обязательно должен быть настоящим AppBar виджетом.

если это можно сделать с помощью обычного Container, Painter или ClipPath, я все равно буду признателен.

SliverAppBar также не требуется, никакие эффекты прокрутки не являются обязательными.

ни Painter, ни ClipPath — как и в случае любой другой пользовательской формы флаттера (CircleBorder / StadiumBorder и т. д.), используйте пользовательскую ShapeBuilder

— 25.08.2024 08:50

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

— 25.08.2024 08:51

flutter flutter-appbar flutter-custompainter flutter-ui

25.08.2024 08:45

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вот виджет:

Padding(
      padding: EdgeInsets.symmetric(horizontal: 20 , vertical: MediaQuery.of(context).padding.top),
      child: ClipPath(
        clipper: SimCustomClipper(),
        child: Container(
          color: Colors.blue.shade600,
          width: double.infinity,
          height: MediaQuery.of(context).size.height/3,
          child:  Padding(
            padding: EdgeInsets.symmetric(horizontal: 20, vertical: 50),
            child: Align(
              alignment: Alignment.centerLeft,
              child: Column(
                children: [
                  Text(
                      'Manage',
                    style: Theme.of(context).textTheme.titleMedium?.copyWith(
                      fontWeight: FontWeight.w500,
                      fontFamily: 'TimesNewRoman',
                      color: Colors.white,
                    ),
                  ),

                  Text(
                    'My SIM Plan',
                    style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                        fontWeight: FontWeight.w300,
                        fontFamily: 'TimesNewRoman',
                      color: Colors.white,
                    ),
                  ),
                ],
              ),
            ),
          )
        ),
      ),
    );

Вот клипер:

class SimCustomClipper extends CustomClipper<Path>{

  @override
  Path getClip(Size size) {
    Path path = Path();

    path.moveTo(0, 0.6*size.width);
    path.lineTo(0.33*size.width - 20, size.height -15);
    path.quadraticBezierTo(0.33*size.width+5, size.height, 0.33*size.width +30, size.height - 20);
    path.lineTo(size.width, size.height /3);
    path.lineTo(size.width,0);
    path.lineTo(0, 0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) =>false;

}

Кстати, согласно этому клипперу, вы должны сделать эти фиксированные значения, например: 15, 30 и т. д., гибкими, чтобы они могли реагировать.

25.08.2024 10:17