Flutter中的自定义容器形状

Question

我希望在Flutter中制作这样的屏幕：

有人能建议我如何在Flutter中制作这样的容器和设计吗？谢谢。

- Karan Mehta

---

我找到了一个类似于你的问题的已回答的问题。也许这会有所帮助 https://dev59.com/wLPma4cB1Zd3GeqPyOog - Jordan Kotiadis

Answer 1

您可以使用 ClipPath 类来为您的容器赋予自定义形状。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: ClipPath(
            child: Container(color: Colors.red),
            clipper: MyCustomClipper(),
          ),
        ),
      ));
  }
}

class MyCustomClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path()
        ..lineTo(size.width, 0)
        ..lineTo(size.width, size.height/2)
        ..lineTo(size.width/2, size.height)
        ..lineTo(0, size.height)
        ..close();
      
    return path;
  }

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

- nvoigt

---

ClipPath不是给Container提供自定义形状的最佳解决方案，为此使用ShapeDecoration - 这里有一些示例代码。 - pskink

@pskink，我是Flutter的新手，您能解释一下为什么在这种情况下ShapeDecoration更好吗？ - nvoigt

两种解决方案的实现方式相同：您需要构建形状的“Path” - 就这样，但是在使用“ShapeBorder”时，您不需要额外的“ClipPath”小部件。 - pskink

我完全无法理解你所做的事情。@pskink - Karan Mehta

@KeranMehta 这里有一个可用的代码：https://dev59.com/a7bna4cB1Zd3GeqPZFM1#57943257 - pskink