Flutter 如何在颤振中画出屏幕宽度外的容器？

如何创建具有圆角的容器，如下所示？ 我尝试使用宽度大于屏幕宽度的容器。但这限制了它在屏幕内的显示。我尝试使用一个溢出框，但也不能得到同样的结果。我不想使用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)),
    ),
  ),
);
}

---

我认为您应该使用容器内的安全区域来填充。像这样：

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

---

请参阅：

通过使用比例变换，我成功地获得了与我想要的相似的结果。但我希望看到一种不同的方法

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)),
      ),
    ),
  ),
);
}

---

在多次阅读您的问题和评论后，我希望这就是您想要的

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,
            )));
  }
}

类dummy2扩展了StatefulWidget{
@凌驾
_dummy2State createState（）=>dummy2State（）；
}
类dummy2State使用TickerProviderStateMixin扩展状态{
动画控制器；
动画；
@凌驾
initState（）{
super.initState（）；
控制器=
AnimationController（vsync:this，duration:duration（秒数：1））；
animaton=Tween（开始：1，结束：2.5）。设置动画(
曲线动画（父对象：控制器，曲线：Curves.fastoutswowin））；
animaton.addListener（（）{
setState（（）{}）；
});
}
@凌驾
小部件构建（构建上下文）{
返回安全区(
孩子：脚手架(
appBar:appBar(
行动：[
扁平按钮(
已按下：（）{
controller.forward（）；
},
子项：文本（“前进”），
扁平按钮(
已按下：（）{
controller.reverse（）；
},
子项：文本（'reverse'））
],
),
正文：Transform.scale(
子：容器(
装饰：盒子装饰(
颜色：Colors.deepPurple，形状：BoxShape.circle），
),
缩放：animaton.value，
)));
}
}

我使用clippath完成了这项工作。若您更改了容器的大小，则Clippath大小会根据容器大小自动更改

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

在这里，我只使用ClipPath小部件，并为修改子容器小部件的形状创建MyCustomShape类

 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;
  }

类示例扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回脚手架(
背景颜色：Colors.black87，
正文：ClipPath(
裁剪器：MyCustomShape（），
子：容器(
颜色：颜色。绿色[800]，
高度：双无限，
),
),
);
}
}
类MyCustomShape扩展了CustomClipper{
@凌驾
路径getClip（大小）{
Path Path=new Path（）；//用于塑造容器的形状
lineTo路径（0.0100）；
路径。方形贝塞尔托（size.width*0.5,0.0，size.width，100）；
path.lineTo（大小.宽度，大小.高度）；
path.lineTo（0.0，大小.高度）；
path.close（）；
返回路径；
}

---

你有没有试过用一个带有

BoxDecoration

的容器，它的

shape

属性是一个圆？我不太明白你的意思。嗨，你能再详细一点吗？为什么你想要一个比屏幕大的容器？因为它没用，而且无论如何都不会被看到。嘿，大家，用结果添加了代码片段结果很好。希望这能消除混乱。@JulienLachal它会产生相同的结果。边界不会超出屏幕。我想要像第一幅图像一样的布局，我得到的是像第二幅图像一样的布局。嘿@r-flierman，这并不能回答问题。你能提供一个与问题更相关的更新解决方案吗？那么rry，我的印象是你无法到达外角的空间。错过了屏幕截图中的小绿线，所以我想你指的是iPhone本身的圆角。