Цвет фона флаттера со степенью

Я практикую флаттер-веб, копируя шаблоны. Я застрял в рисовании этого фона степени с разделением белого и зеленого.

Как я могу достичь этого?

Редактировать: Мой фрагмент кода и результат на данный момент

Widget body(context) {
return Container(
  decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: [
          Colors.white,
          Color(0xff00a78e),
          Color(0xff00a78e),
        ],
        stops: [0, 0.5, 0.5],
        begin: Alignment(0, -1),
        end: Alignment(1, 1),
      ),
      .....
      .....

Цвет фона флаттера со степенью

Пожалуйста, предоставьте фрагмент кода, чего вы достигли на данный момент.

— 19.03.2022 12:25

flutter dart

19.03.2022 12:24

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

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

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

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

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

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

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

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

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

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

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

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

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

Ответы 1

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

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

Stack(
      children: <Widget>[
        Container(
          color: Colors.red,
        ),
        ClipPath(
          clipper: CustomeShape(),
          child: Container(
            color: Colors.white,
            padding: EdgeInsets.all(8.0),
            width: MediaQuery.of(context).size.width * 0.5,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                ConstrainedBox(
                  constraints: BoxConstraints(
                      maxWidth: MediaQuery.of(context).size.width * 0.5),
                  child: Text(
                    'Testing clipping with soft wrap',
                    softWrap: true,
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    )


class CustomeShape extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.lineTo(size.width * 2 / 3, 0.0);
    path.lineTo(size.width, size.height);
    path.lineTo(0.0, size.height);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomeShape oldClipper) => false;
}

вывод будет выглядеть примерно так: