Flutter，如何像弧线一样裁剪容器答案

【问题标题】：Flutter, How to Clip a Container Like an ArcFlutter，如何像弧线一样裁剪容器
【发布时间】：2020-09-22 03:18:08
【问题描述】：

我有一个容器，我需要剪裁它的高度，它看起来像提供的图像。我也尝试过 customPaint 小部件，但无法让它工作。

      child: Container(
        decoration: BoxDecoration(
            boxShadow: [
              BoxShadow(
                color: Colors.grey.withOpacity(0.5),
                spreadRadius: 5,
                blurRadius: 12,
                offset: Offset(0, 3), // changes position of shadow
              ),
            ],
            color: ColorConstants.redColor,
            borderRadius: BorderRadius.all(Radius.circular(8))),
      ),
    ),

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

    path.lineTo(size.width, 0.0);
    return path;
  }

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

【问题讨论】：

标签： android flutter dart

【解决方案1】：

您可以使用CustomClipper轻松完成此操作

试试这个Dartpad

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipPath(
      clipper: ArcClipper(),
      child: Container(
        height: 60,
        width: 200,
        decoration: BoxDecoration(
          color: Colors.orange,
          borderRadius: BorderRadius.circular(10.0),
        ),
      ),
    );
  }
}

class ArcClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();

    path.lineTo(size.width, 0);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width * .03, size.height);
    path.quadraticBezierTo(size.width * .2, size.height * .5, size.width * .03, 0);

    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper old) => false;
}

【讨论】：

【解决方案2】：

我建议clippy_flutter，它默认提供不同类型的剪辑。

【讨论】：