如何在Flutter中绘制超出屏幕宽度的容器？

Question

我该如何创建一个如下所示的带有圆角的容器？ 我尝试使用宽度超过屏幕宽度的容器，但是这会将其限制在屏幕内。我尝试使用Overflow Box，但也无法得到相同的结果。我不想使用clipRect来实现这一点，因为我想对圆角应用动画。

编辑：添加容器片段以清除疑虑

Widget build(BuildContext context) {
return Scaffold(
  backgroundColor: Colors.black,
  body: Align(
    alignment: Alignment.bottomCenter,
    child: Container(
      height: 500,
      decoration: BoxDecoration(
          color: Colors.green, borderRadius: BorderRadius.circular(500)),
    ),
  ),
);
}

- RoyalGriffin

---

你尝试过使用BoxDecoration的shape属性为圆形的容器吗？ - Julien Lachal

我听不清你说的话。 - Mohamed Gaber

你好。能否请您提供更多细节？为什么要创建一个比屏幕尺寸还大的容器呢？因为这样做是毫无意义的，而且也不会被查看到。 - Dyary

大家好，我添加了代码片段并附上了结果。希望这能消除困惑。 - RoyalGriffin

你能上传一个包含你目标的截图或gif吗？@RoyalGriffin - Mohamed Gaber

Answer 1

我已经通过使用缩放变换得到了我想要的类似效果。不过还想尝试另一种方法。

Widget build(BuildContext context) {
return Scaffold(
  backgroundColor: Colors.black,
  body: Align(
    alignment: Alignment.bottomCenter,
    child: Transform.scale(
      scale: 1.7,
      child: Container(
        height: 400,
        decoration: BoxDecoration(
            color: Colors.green, borderRadius: BorderRadius.circular(200)),
      ),
    ),
  ),
);
}

- RoyalGriffin

Answer 2

我使用clippath实现了这个功能。如果您更改容器的大小，则clippath的大小会自动根据容器的大小进行调整。

您可以根据需要修改路径以获得不同的形状，因此这非常有用。

在这里，我只是使用ClipPath小部件，并创建了MyCustomShape类来修改子Container小部件的形状。

 class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black87,
      body: ClipPath(
        clipper: MyCustomShape(),
        child: Container(
          color: Colors.green[800],
          height: double.infinity,
        ),
      ),
    );
  }
}

class MyCustomShape extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = new Path();  // use for shape your container
    path.lineTo(0.0, 100);
    path.quadraticBezierTo(size.width * 0.5, 0.0, size.width, 100);
    path.lineTo(size.width, size.height);
    path.lineTo(0.0, size.height);
    path.close();
    return path;
  }

- Sanjayrajsinh

Answer 3

在多次阅读您的问题和评论后，我希望这是您正在寻找的内容。

class dummy2 extends StatefulWidget {
  @override
  _dummy2State createState() => _dummy2State();
}

class _dummy2State extends State<dummy2> with TickerProviderStateMixin {
  AnimationController controller;
  Animation<double> animaton;
  @override
  initState() {
    super.initState();
    controller =
        AnimationController(vsync: this, duration: Duration(seconds: 1));
    animaton = Tween<double>(begin: 1, end: 2.5).animate(
        CurvedAnimation(parent: controller, curve: Curves.fastOutSlowIn));
    animaton.addListener(() {
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            appBar: AppBar(
              actions: <Widget>[
                FlatButton(
                    onPressed: () {
                      controller.forward();
                    },
                    child: Text('forward')),
                FlatButton(
                    onPressed: () {
                      controller.reverse();
                    },
                    child: Text('reverse'))
              ],
            ),
            body: Transform.scale(
              child: Container(
                decoration: BoxDecoration(
                    color: Colors.deepPurple, shape: BoxShape.circle),
              ),
              scale: animaton.value,
            )));
  }
}

- Mohamed Gaber

Answer 4

我认为你应该在容器内使用SafeArea来填充它。像这样：

Container(
  color: Colors.blue,
  child: SafeArea(child: ### // you nav or functions),
),

请参见：https://api.flutter.dev/flutter/widgets/SafeArea-class.html

- R. Flierman

---

嘿@r-flierman，这并没有回答问题。您能否提供一个更新的解决方案，更符合问题的要求？ - RoyalGriffin

抱歉，我以为你无法触及外角的空间。我在你的截图中错过了微小的绿线，所以我认为你指的是iPhone本身的圆角。 - R. Flierman