我如何在颤动上制作多个屏幕 - 超过 2 个屏幕答案

【问题标题】：How do i make multiple screens on flutter - more than 2 screens我如何在颤动上制作多个屏幕 - 超过 2 个屏幕
【发布时间】：2021-04-01 20:07:24
【问题描述】：

我需要一些帮助。我用谷歌搜索了这个，我不断得到制作 2 个屏幕的相同结果。
我正在尝试在颤振上制作多个屏幕。
我在这个论坛上找到了另一个答案，但它似乎对我不起作用，我一直在代码中遇到错误。我将在下面包含适用于 2 个屏幕的基本代码。

我实际上还在学习 Flutter，并尝试制作一个原型来展示给客户。我尝试使用线框，但我设法找到的只是一个绘制应用程序的地方，我想要一个可以向客户展示页面的实时骨架应用程序。

我在做什么？我正在尝试创建 2 条以上的路线，为每条路线命名，然后导航回主屏幕。
我在做什么试过了吗？我将在下面包含代码
我的结果是什么？我能够完美地导航 2 个屏幕（路线）
预期结果？我想要超过 2 条路线，我需要至少 6 条路线

有效的代码

 import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext ctxt) {
    return new MaterialApp(
      home: new FirstScreen(),
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext ctxt) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("Multi Page Application"),
        ),
        body: new Checkbox(
            value: false,
            onChanged: (bool newValue) {
              Navigator.push(
                ctxt,
                new MaterialPageRoute(builder: (ctxt) => new SecondScreen()),
              );
            }));
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext ctxt) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("Multi Page Application Page - 1"),
        ),
        body: new Checkbox(
            value: false,
            onChanged: (bool newValue) {
              //this pushes forward to screen 1
              Navigator.push(ctxt,
                  new MaterialPageRoute(builder: (ctxt) => new FirstScreen()));
              //    Navigator.pop(ctxt) ; // Pop from stack back to screen 1
            }));
  }
}

【问题讨论】：

标签： flutter

【解决方案1】：

创建 2 个单独的 dart 文件并分别创建您的小部件并将它们一起使用，这很容易，请为此使用谷歌

【讨论】：

感谢您的回复，但如果您阅读了我的帖子，我已经尝试过 google ，您能解释一下如何处理多个页面吗？这对你来说很容易，但我花了一整天的时间试图弄清楚。

【解决方案2】：

所以我在编辑器中玩了很多之后才知道如何做到这一点。我所做的只是创建了第三个屏幕，名为third_screen.dart，然后输入代码Navigator.push(ctxt, new MaterialPageRoute(builder: (ctxt) => new ThirdScreen()));

然后在第三个屏幕上，我直接复制了上面的代码，只是将“class ThirdScreen extends StatelessWidget”更改为第二个屏幕

然后在第三个屏幕上我输入返回上一页的命令

 Navigator.pop(context);

这会将我带回到我之前打开的屏幕。

所以完整的代码是

 import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext ctxt) {
    return new MaterialApp(
      home: new FirstScreen(),
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext ctxt) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("Multi Page Application"),
        ),
        body: new Checkbox(
            value: false,
            onChanged: (bool newValue) {
              Navigator.push(
                ctxt,
                new MaterialPageRoute(builder: (ctxt) => new SecondScreen()),
              );
            }));
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext ctxt) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("Multi Page Application Page - 1"),
        ),
        body: new Checkbox(
            value: false,
            onChanged: (bool newValue) {
              //this pushes forward to screen 3
              Navigator.push(ctxt,
                  new MaterialPageRoute(builder: (ctxt) => new ThirdScreen()));
             
            }));
  }
}
class ThirdScreen extends StatelessWidget {
      @override
      Widget build(BuildContext ctxt) {
        return new Scaffold(
            appBar: new AppBar(
              title: new Text("Multi Page Application Page - 1"),
            ),
            body: new Checkbox(
                value: false,
                onChanged: (bool newValue) {
              
                  Navigator.pop(ctxt) ; // Pop from stack back to screen 1
                }));
      }
    }

【讨论】：