Как создать изогнутый виджет без использования радиуса границы во флаттере

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

Заранее спасибо.

Как создать изогнутый виджет без использования радиуса границы во флаттере

Вы также должны опубликовать, что вы пробовали до сих пор и как вы пытаетесь это сделать.

ishaan 25.07.2019 10:18

Возможно, вы захотите рассмотреть Как уменьшить размер изображения в Stack Overflow

Onik 26.07.2019 00:05
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
6
2
5 681
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

У вас могут быть круглые контейнеры, вы можете поэкспериментировать, как расположить их на экране.

Container(
  width: double.infinity,
  height: 500,
  decoration: new BoxDecoration(
    color: Colors.green,
    shape: BoxShape.circle,
  ),
  child: Text('Curved View'),
  alignment: Alignment.center,
)

правда, по привычке кодировал на нескольких языках ООП. // ИЗМЕНИТЬ комментарий, оставленный в ответ пользователю, который удалил свой комментарий о том, что нет необходимости использовать «новый»..

F-1 25.07.2019 11:52
Ответ принят как подходящий

Вот пример того, как вы можете добиться этого, используя CustomClipper

class ClippingApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: ClipPath(
        clipper: CurvedBottomClipper(),
        child: Container(
          color: Colors.lightGreen,
          height: 250.0,
          child: Center(
              child: Padding(
            padding: EdgeInsets.only(bottom: 50),
            child: Text(
              "Curved View",
              style: TextStyle(
                fontSize: 25,
                color: Colors.white,
              ),
            ),
          )),
        ),
      ),
    );
  }
}

class CurvedBottomClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    // I've taken approximate height of curved part of view
    // Change it if you have exact spec for it
    final roundingHeight = size.height * 3 / 5;

    // this is top part of path, rectangle without any rounding
    final filledRectangle =
        Rect.fromLTRB(0, 0, size.width, size.height - roundingHeight);

    // this is rectangle that will be used to draw arc
    // arc is drawn from center of this rectangle, so it's height has to be twice roundingHeight
    // also I made it to go 5 units out of screen on left and right, so curve will have some incline there
    final roundingRectangle = Rect.fromLTRB(
        -5, size.height - roundingHeight * 2, size.width + 5, size.height);

    final path = Path();
    path.addRect(filledRectangle);

    // so as I wrote before: arc is drawn from center of roundingRectangle
    // 2nd and 3rd arguments are angles from center to arc start and end points
    // 4th argument is set to true to move path to rectangle center, so we don't have to move it manually
    path.arcTo(roundingRectangle, pi, -pi, true);
    path.close();

    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    // returning fixed 'true' value here for simplicity, it's not the part of actual question, please read docs if you want to dig into it
    // basically that means that clipping will be redrawn on any changes
    return true;
  }
}

И вот что вы получите с этим кодом: Curved rectangle screenshot

Возможно, вы захотите рассмотреть Как уменьшить размер изображения в Stack Overflow

Onik 26.07.2019 00:05

Другие вопросы по теме