Flutter 如何在Flatter中从一个提要转到另一个提要，与instagram中相同

我正试图应用instagram的相同概念，从一个提要转到另一个提要。 在这里，我喜欢quiz1部分，我想进入另一个quiz2部分，点击右侧，按下左侧后，我想进入quiz1部分

  Widget mainQuiz() {
return Column(
  children: [
    Spacer(
      flex: 1,
    ),
    Container(
      padding: EdgeInsets.all(30),
      child: Text(
        "When was the first spaceship NOT launched?",
        textAlign: TextAlign.center,
        style: TextStyle(
          color: Colors.white,
          fontWeight: FontWeight.w600,
          fontSize: 24,
        ),
      ),
    ),
    /* ---------------------OPTION 1----------------------*/
    Container(
      margin: EdgeInsets.only(
        left: 65,
        right: 65,
        bottom: 15,
      ),
      decoration: BoxDecoration(
          border: Border.all(color: Colors.white),
          borderRadius: BorderRadius.circular(100)),
      child: Row(
        children: [
          Container(
            margin: EdgeInsets.all(10),
            child: Row(
              children: [
                Stack(
                  children: [
                    Container(
                      margin: EdgeInsets.only(right: 10),
                      decoration: BoxDecoration(
                        color: Colors.white,
                        border: Border.all(color: Colors.white),
                        shape: BoxShape.circle,
                      ),
                      child: Icon(
                        Icons.check,
                        size: 15,
                        color: Color(0xffFFC700),
                      ),
                    )
                  ],
                ),
                Text(
                  "Last Tuesday",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 16,
                  ),
                ),
              ],
            ),
          ),
          Spacer(),
          Container(
            constraints: BoxConstraints.expand(
              height: 40,
              width: 50,
            ),
            decoration: BoxDecoration(
              color: Colors.black,
              borderRadius: BorderRadius.only(
                topRight: Radius.circular(100),
                bottomRight: Radius.circular(100),
              ),
            ),
            child: Center(
              child: Text(
                "55%",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 16,
                ),
              ),
            ),
          ),
        ],
      ),
    ),
    /* ---------------------OPTION 2----------------------*/
    Container(
      margin: EdgeInsets.only(
        left: 65,
        right: 65,
        bottom: 15,
      ),
      decoration: BoxDecoration(
          border: Border.all(color: Colors.white),
          borderRadius: BorderRadius.circular(100)),
      child: Row(
        children: [
          Container(
            margin: EdgeInsets.all(10),
            child: Row(
              children: [
                Stack(
                  children: [
                    Container(
                      margin: EdgeInsets.only(right: 10),
                      decoration: BoxDecoration(
                        color: Colors.white,
                        border: Border.all(color: Colors.white),
                        shape: BoxShape.circle,
                      ),
                      child: Icon(
                        Icons.check,
                        size: 15,
                        color: Color(0xffFFC700),
                      ),
                    )
                  ],
                ),
                Text(
                  "1969",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 16,
                  ),
                ),
              ],
            ),
          ),
          Spacer(),
          Container(
            constraints: BoxConstraints.expand(
              height: 40,
              width: 50,
            ),
            decoration: BoxDecoration(
              color: Colors.black,
              borderRadius: BorderRadius.only(
                topRight: Radius.circular(100),
                bottomRight: Radius.circular(100),
              ),
            ),
            child: Center(
              child: Text(
                "45%",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 16,
                ),
              ),
            ),
          ),
        ],
      ),
    ),
    /* ---------------------OPTION 3----------------------*/
    Container(
      margin: EdgeInsets.only(
        left: 65,
        right: 65,
        bottom: 15,
      ),
      padding: EdgeInsets.only(left: 10, right: 10, top: 10, bottom: 10),
      decoration: BoxDecoration(
          border: Border.all(color: Colors.white),
          borderRadius: BorderRadius.circular(100)),
      child: Row(
        children: [
          Stack(
            children: [
              Container(
                margin: EdgeInsets.only(right: 10),
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.white),
                  shape: BoxShape.circle,
                ),
                child: SizedBox(
                  height: 15,
                  width: 15,
                ),
              )
            ],
          ),
          Text(
            "1957",
            style: TextStyle(
              color: Colors.white,
              fontSize: 16,
            ),
          ),
        ],
      ),
    ),
    Spacer(
      flex: 2,
    ),
  ],
);
}

就像这是测验第一部分一样，我想进入第二部分，我可以使用相同的ui，我会将你的“mainquick”包装在一个堆栈小部件中

通过这种方式，您可以在堆栈的子级中添加其他2个容器

可以使用“定位”小部件定位这些容器。 一个在屏幕左侧，一个在右侧。 你也应该给我尺寸

---

我会让他们透明，我会给他们一个“手势检测器”或什么东西来检测点击，并呼叫导航器改变屏幕。

根据您的要求，我认为您应该使用

页面视图

默认情况下，它具有滑动功能，可以转到下一个和上一个屏幕

编辑：-

---

根据您的要求，您知道您有一个屏幕，该屏幕已经以给出答案的形式进行交互，这必须通过单击来完成。虽然您可以在堆栈中放置空容器以实现左右单击，但由于容器需要有一些宽度，所以它们将与您的答案重叠，因为基本填充不超过20。因此，我认为您应该使用滑动或指定按钮向左向右移动，即下一个问题和上一个问题。

但在按下android后退按钮后，我在这里遇到了一个问题，它显示了上一页，但它必须直接返回主主页。我不完全理解您的问题，但您可以始终覆盖背面按钮行为。这里有一个关于它的问题：不是只需点击左边就可以点击上一个，按右边就可以点击下一个