如何在 Flutter 中制作这种 Zig-Zag 设计？

Question

这是我的图像/图案我想画一个设计草图，我在Figma中有一个设计，我想在Flutter中绘制。这种设计是一种锯齿形图案，是一种持续前进并到达终点的类型。步骤完成后，自定义检查将显示在其上并标记为已完成。 这是模式：

我尝试了 Flutter 中的 Paint 类，但它没有给我最好的结果。

Answer 1

我并没有真正投入太多工作，它还远未完美，但我希望这会有所帮助。警告，这段代码还不是“干净”和“高效”：

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MyApp(),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: "Wavy UI",
      debugShowCheckedModeBanner: false,
      home: WavyUI(),
    );
  }
}

class WavyUI extends StatelessWidget {
  const WavyUI({super.key});

  @override
  Widget build(BuildContext context) {
    final double rangePerItem = 90;

    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Stack(
        children: [
          Container(
            margin: EdgeInsets.only(top: rangePerItem * 0),
            child: WavyItem(
              text: "Wavy 01",
              wavyDirection: AxisDirection.right,
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: rangePerItem * 1),
            child: WavyItem(
              text: "Wavy 02",
              wavyDirection: AxisDirection.left,
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: rangePerItem * 2),
            child: WavyItem(
              text: "Wavy 03",
              wavyDirection: AxisDirection.right,
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: rangePerItem * 3),
            child: WavyItem(
              text: "Wavy 04",
              wavyDirection: AxisDirection.left,
            ),
          ),
        ],
      ),
    );
  }
}

class WavyItem extends StatelessWidget {
  const WavyItem({
    super.key,
    required this.text,
    required this.wavyDirection,
  });

  final String text;
  final AxisDirection wavyDirection;

  BorderRadius _getBorderRadius(double circularRadius) {
    if (wavyDirection == AxisDirection.left) {
      return BorderRadius.only(
        topLeft: Radius.circular(circularRadius),
        bottomLeft: Radius.circular(circularRadius),
      );
      //
    } else {
      return BorderRadius.only(
        topRight: Radius.circular(circularRadius),
        bottomRight: Radius.circular(circularRadius),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    final Widget textWidget = Container(
      width: 100,
      height: 100,
      alignment: Alignment.center,
      child: Text(
        text,
        style: const TextStyle(fontSize: 15),
      ),
    );

    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        (wavyDirection == AxisDirection.right) ? textWidget : const SizedBox.shrink(),
        Container(
          width: 100,
          height: 100,
          alignment: Alignment.center,
          decoration: BoxDecoration(
            color: const Color.fromARGB(255, 110, 150, 220),
            borderRadius: _getBorderRadius(60),
          ),
          child: Container(
            width: 100,
            height: 80,
            margin: EdgeInsets.only(
              right: (wavyDirection == AxisDirection.right) ? 10 : 0,
              left: (wavyDirection == AxisDirection.right) ? 0 : 10,
            ),
            decoration: BoxDecoration(
              color: Colors.black,
              borderRadius: _getBorderRadius(60),
            ),
            child: const Icon(Icons.balance_outlined, color: Colors.white),
          ),
        ),
        (wavyDirection == AxisDirection.left) ? textWidget : const SizedBox.shrink(),
      ],
    );
  }
}

因此，结果：

稍微调整一下，您就会实现所需的 UI。干杯。