Как добиться этого сложного макета с Flutter

Question

Я пытаюсь добиться следующего макета флаттера (как показано на рисунке).

Я хочу разместить два изображения рядомя знаю, что это легко сделать с помощью Row, но я хочу разделить два изображения по форме (как показано на рисунке). Кроме того, мне известно об использовании CustomClipper, но я не могу придумать, как этого добиться.

Я буду очень благодарен, если кто-нибудь сможет мне помочь. Заранее спасибо.

Answer 1

Вы можете использовать stack для части I с 3 детьми в следующем порядке: - контейнер для вашего цвета молнии (или любого другого понравившегося вам пути) - первое изображение для области I - второе изображение для области II

Оберните каждое изображение в ClipPath с определенным CustomClipper<Path>: цель состоит в том, чтобы обрезать изображение в той стороне, на которой оно должно быть отображено с помощью a "padding", с другой клипер. В середине у вас будет зона, где изображение не обрезается, поэтому будет отображаться первый виджет в стеке.

Вот полный исходный код:

import 'package:flutter/material.dart';

main() async {
  runApp(
    MaterialApp(
      home: Scaffold(body: ComplexLayoutApp()),
    ),
  );
}

class ComplexLayoutApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(children: [
      Expanded(child: Part1()),
      Expanded(child: Part2()),
    ]);
  }
}

class Part1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(fit: StackFit.expand, children: [
      Container(
        color: Colors.black87,
      ),
      ClipPath(
        clipper: Area1CustomClipper(),
          child: Image.network(
            'https://picsum.photos/seed/area1/400/100',
            fit: BoxFit.fill,
          )),
      ClipPath(
          clipper: Area2CustomClipper(),
          child: Image.network(
            'https://picsum.photos/400/300',
            fit: BoxFit.fill,
          ))
    ]);
  }
}

class Part2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Center(child: Text("Part II")),
      ],
    );
  }
}

const double offset = 0.34;

class Area1CustomClipper extends CustomClipper<Path> {

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

    path.moveTo(4*size.width/8, 0);
    path.lineTo((4-offset)*size.width/8, (4)*size.height/8);
    path.lineTo((4)*size.width/8, (4)*size.height/8);
    path.lineTo(size.width/2, size.height);

    path.lineTo(0, size.height);
    path.lineTo(0, 0);
    path.close();
    return path;
  }

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

class Area2CustomClipper extends CustomClipper<Path> {

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

    path.moveTo(4*size.width/8, 0);
    path.lineTo((4)*size.width/8, (4-offset)*size.height/8);
    path.lineTo((4+offset)*size.width/8, (4 - offset)*size.height/8);
    path.lineTo(size.width/2, size.height);

    path.lineTo(size.width, size.height);
    path.lineTo(size.width, 0);
    path.close();
    return path;
  }

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

И этосоздает следующий пользовательский интерфейс: