容器大小中的容器

Question

我在其中的另一个容器中创建了一个容器。子容器应该比父容器小，但这不起作用。我只看到了子容器的边框。

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        decoration: BoxDecoration(color: Colors.green),
        child: Container(
            height: 200,
            width: 200,
            decoration: BoxDecoration(color: Colors.red),
          child: Card(
            child: Text('fffff'),
          ),
        ),
      ),
    );
  }

Answer 1

您可以使用Stack和Positioned小部件来实现此目的，如下所示：

Container(
          width: 200,
          height: 200,
          decoration: BoxDecoration(
            color: Colors.blue,
          ),
          child: Stack(
            children: <Widget>[
              Positioned(
                left: 20.0,
                top: 20.0,
                child: Container(
                  height: 100,
                  width: 100,
                  decoration: BoxDecoration(color: Colors.green),
                ),
              )
            ],
          ),
        ),