Flutter 绘制容器，中间有一条曲线

Question

我想用颤动画出黑色容器的形状。

Answer 1

将透明的 png 放置在容器顶部。

    child: Container(
      width: 200,
      height: 300,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(30),
        color: Colors.black,
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.5),
            spreadRadius: 5,
            blurRadius: 7,
            offset: Offset(0, 3),
          ),
        ],
      ),
      child: Container(
        child: Image.asset('assets/images/half-circle.png', fit: BoxFit.contain, alignment: new Alignment(-1.0, -1.0)),
        margin: EdgeInsets.only(left: 50.0, right: 50.0),
      ),
    ),

图片：

Live example

Answer 2

您可以使用 Stack，它可以像这样在容器顶部写上画圈：

class BlackContainer extends StatelessWidget {
  const BlackContainer({
    Key? key,
    required this.child,
  }) : super(key: key);

  final Widget child;

  @override
  Widget build(BuildContext context) {
    return Stack(
      clipBehavior: Clip.none,
      alignment: Alignment.center,
      children: [
        Container(
          child: child,
          padding: const EdgeInsets.all(24),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            color: Colors.black,
            boxShadow: const [
              BoxShadow(
                color: Colors.grey,
                spreadRadius: 5,
                blurRadius: 10,
              ),
            ],
          ),
        ),
        Positioned(
          top: -25,
          child: Container(
            decoration: const BoxDecoration(
              color: Colors.white,
              shape: BoxShape.circle,
            ),
            width: 40,
            height: 40,
          ),
        ),
      ],
    );
  }
}

然后像那样使用它：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: BlackContainer(
          child: Text(
            'Content here',
            style: Theme.of(context)
                .textTheme
                .bodyText2!
                .copyWith(color: Colors.white),
          ),
        ),
      ),
    );
  }
}

Answer 3

有很多方法可以做到这一点，我第一次以为它是一个剪切，我在一个 ClipPath 小部件中思考，但现在我看到你的黑色顶部有一个圆形小部件Container.

这是一个例子：

class FunnyContainer extends StatelessWidget {
  const FunnyContainer({Key? key}) : super(key: key);

  Widget _childContainer() {
    return Padding(
      padding: const EdgeInsets.all(20.0),
      child: DecoratedBox(
        decoration: BoxDecoration(
          color: Colors.white,
          border: Border.all(
            color: Colors.yellow,
            width: 4,
          ),
          borderRadius: const BorderRadius.all(Radius.circular(20)),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20.0, vertical: 40),
        child: Container(
          height: 400,
          decoration: const BoxDecoration(
            color: Colors.black,
            borderRadius: BorderRadius.all(Radius.circular(20)),
          ),
          child: Stack(
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  const SizedBox(height: 40),
                  Expanded(child: _childContainer()),
                  Expanded(child: _childContainer()),
                  Expanded(child: _childContainer()),
                ],
              ),
              const Positioned(
                left: 0,
                right: 0,
                top: -50,
                child: CircleAvatar(
                  backgroundColor: Colors.white,
                  radius: 40,
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

结果：

更新（使用您的更新设计）

现在你更新了你的 post，这可以使用 Clippers 来完成，问题是 clip 需要 Shadow，所以我采用了这个代码：https://gist.github.com/coman3/e631fd55cd9cdf9bd4efe8ecfdbb85a7

我在这个例子中使用了：


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(40.0),
          child: ClipShadowPath(
            clipper: _MyClipper(100),
            shadow: const Shadow(
              blurRadius: 15,
              color: Colors.grey,
              offset: Offset(0, 10),
            ),
            child: SizedBox(
              height: 400,
              child: Container(
                color: Colors.white,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: const [
                    Spacer(),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class _MyClipper extends CustomClipper<Path> {
  final double space;

  _MyClipper(this.space);

  @override
  Path getClip(Size size) {
    final path = Path();
    final halfWidth = size.width / 2;
    final halfSpace = space / 2;
    final curve = space / 6;
    final height = halfSpace / 1.4;
    path.lineTo(halfWidth - halfSpace, 0);
    path.cubicTo(halfWidth - halfSpace, 0, halfWidth - halfSpace + curve,
        height, halfWidth, height);

    path.cubicTo(halfWidth, height, halfWidth + halfSpace - curve, height,
        halfWidth + halfSpace, 0);

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

    return path;
  }

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

结果

您只需更新路径即可获得 Container 的圆角。

Flutter 绘制容器，中间有一条曲线

Flutter draw container with a curve in the center

user-interface

dart

flutter