Блог

Привет, ребята, я хотел бы спросить, возможно ли достичь такого дизайна с помощью кода? Я действительно застрял, вот дизайн, которого я хотел бы достичь

но настоящая проблема в том, что я достигаю только этого

это мой пример кода:

в моем основном:

 return Scaffold(
      backgroundColor: Color(0xff012a60),
      body: Stack(children: <Widget>[
        /*_AnimatedCircle(
          outerController: outerController,
          innerController: innerController,
        ),*/
        _OuterCircle(circleColor: Colors.blueGrey[900].withOpacity(.8)),
        Column(children: <Widget>[
          const Spacer(flex: 50),
          Expanded(flex: 30, child: Container(color: Colors.white)),
          const Spacer(flex: 20),
        ]),
        Row(children: <Widget>[
          const Spacer(flex: 80),
          Transform.scale(
            scale: 2.5,
            child: Container(
                width: MediaQuery.of(context).size.width * 0.2,
                decoration: const BoxDecoration(
                    color: Colors.red, shape: BoxShape.circle)),
          ),
        ]),
        // _OuterCircle(circleColor: Colors.blueAccent.withOpacity(.25)),
        Row(children: <Widget>[
          const Spacer(flex: 80),
          Column(children: [
            Spacer(flex: 60),
            Transform.scale(
              scale: 2.5,
              child: Container(
                  width: MediaQuery.of(context).size.width * 0.2,
                  height: MediaQuery.of(context).size.width * 0.05,
                  decoration: const BoxDecoration(color: Colors.green)),
            ),
            Spacer(flex: 24),
          ]),
        ]),
      ]),
    );
 

и это мой другой класс

 class _OuterCircle extends StatelessWidget {
  const _OuterCircle({Key key, this.circleColor}) : super(key: key);

  final Color circleColor;

  @override
  Widget build(BuildContext context) {
    return Transform.scale(
        scale: 2,
        child: Container(
          width: MediaQuery.of(context).size.width * 0.47,
          decoration: BoxDecoration(shape: BoxShape.circle, color: circleColor),
        ));
  }
}
 

Пожалуйста, помогите, я действительно застрял, как добиться такого дизайна в коде dart

Я думаю, что проще разбить проблему геометрии с самой большой области на небольшую область.

Ключевым моментом для достижения этого является использование Clip (ClipOval, clipRect …)

1. Верхнюю часть можно нарисовать, используя правый круг для обрезки левого круга
2. Нижнюю часть можно нарисовать, используя правый круг для обрезки внутреннего прямоугольника

1. Масштабирование области стека
2. Нарисуйте большой левый круг (область 1)
3. Нарисуйте средний белый прямоугольник (область 2)
4. Нарисуйте правильный круг с прямоугольником внутри (область 3)
5. Нарисуйте среднюю часть пересечения (область 4)

Используемые виджеты: ClipOval , FractionallySizedBox , AspectRatio ,

Левый большой круг

 class BigCircle extends StatelessWidget {
  const BigCircle({this.color,Key key}):super(key: key);

  final Color color;

  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: 1,
      child: Container(
        decoration: BoxDecoration(
          color: color,
          shape: BoxShape.circle,
        ),
      ),
    );
  }
}
 

Пользовательский овальный клипер (обрезать правую область белого круга)

 class CustomClipOval extends CustomClipper<Rect> {
  @override
  Rect getClip(Size size) {
    final width = size.width * 0.42;
    return Rect.fromLTRB(
      size.width - width,
      (size.height - width) * 0.5,
      size.width,
      (size.height   width) * 0.5,
    );
  }

  @override
  bool shouldReclip(covariant CustomClipper<Rect> oldClipper) {
    return false;
  }
}
 

Наконец, стек

 return Scaffold(
  backgroundColor: const Color(0xff004471),
  body: Transform.scale(
    scale: 1.19,
    child: Stack(children: <Widget>[
      // Area 1
      const Align(
        alignment: Alignment.centerLeft,
        child: BigCircle(
          color: Color(0xff022c66),
        ),
      ),

      // Area 2
      Align(
        alignment: const Alignment(0, 0.4),
        child: FractionallySizedBox(
          heightFactor: 0.23,
          child: Container(
            color: Colors.white,
          ),
        ),
      ),

      // Area 3
      ClipOval(
        clipper: CustomClipOval(),
        child: Container(
          alignment: const Alignment(0, 0.46),
          color: Colors.white,
          child: FractionallySizedBox(
            heightFactor: 0.14,
            child: Container(
              color: const Color(0xff335f86),
            ),
          ),
        ),
      ),

      // Area 4
      ClipOval(
        clipper: CustomClipOval(),
        child: const Align(
          alignment: Alignment.centerLeft,
          child: BigCircle(color: Color(0xff647294),),
        ),
      ),
    ]),
  ),
);