Flutter 如何将两个容器放置在彼此的顶部？

我试着把两个容器放在一起。我想要的是显示一颗星星，当用户按下星星时，我想打开5颗星，这样他就可以投票了。我不确定我的想法是否正确。但是我想创建一个容器，在这个星形容器正上方的另一个容器中，显示所有其他按钮，这些按钮是如何正常计时的。我希望你明白我想做什么。所以当我把星型容器也放在同一个容器中时，当打开所有星型容器时，整个容器都会移动，不是吗？ 这就是我要做的

class VideoPage extends StatelessWidget {
  static const route = '/Video';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
            height: 100,
            color: Colors.yellow[300],
          ),
          Expanded(
            child: Row(
              children: [
                Expanded(
                  child: Container(color: Colors.green[300]),
                ),
                Container(
                  width: 100,
                  color: Colors.orange[300],
                ),
                Container(
                  width: 100,
                  color: Colors.red[300],
                ),
              ],
            ),
          ),
          Container(
            height: 80,
            color: Colors.blue[300],
          ),
        ],
      ),
    );
  }
}

这个看起来像：

---

我想要橙色的在红色的正下方，这样会有第一颗星星，按下它会打开5颗星星。这可能是我正在尝试的吗？如果是，请帮忙。如果没有，请帮助哈哈

您需要使用的是

堆栈

小部件：

Stack(
  children: <Widget>[
    BottomWidget(),
    MiddleWidget(),
    TopWidget(),
  ],
),

---

橙色应该在红色的下面。当我把这两个都放在堆栈里，从行中删除时，我再也看不到它们了。检查我编辑的答案，我给你们提供了一个下面显示橙色的例子。要想让它适合你，你必须在结构上下功夫，但这为你提供了在其余部分下面的容器。仍然看不到橙色的那个。你之前测试过吗？橙色的应该在红色的下面，但在蓝色的上面是的，我甚至降低了红色的不透明度，这样你就可以看到下面的橙色了。我用整个宽度做了一个橙色的。如果你想把它放在蓝色的上面，你也应该把蓝色的分开。

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 Scaffold(
      body: Column(
        children: [
          Container(
            height: 100,
            color: Colors.yellow[300],
          ),
          Stack(
            children: <Widget>[
              
              Container(
                  width: MediaQuery.of(context).size.width *1,
                  height: 200,
                  color: Colors.orange,
                ),
              
             Container(
               height:200,
               child: Row(
              children: [
                Expanded(
                  child: Container(color: Colors.green[300]),
                ),
                
                Container(
                  width: 100,
                  color: Colors.red.withOpacity(0.5),
                ),
              ],
            )),
              
  ],
          
          ),
          Container(
            height: 80,
            color: Colors.blue[300],
          ),
        ],
      ),
    );
  }
}