Question

如何在Flutter中导航到新屏幕？

这些问题相似，但提出的问题比我要多。

我在下面添加一个答案。

Answer 1

使用Navigator.push()导航到下一个屏幕并返回

Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondRoute()),);

使用Navigator.pushReplacement()导航到下一个屏幕而无需返回

Navigator.pushReplacement(
context,MaterialPageRoute(builder: (context) => SecondRoute()),);

Answer 2

这是一个完整的路由推送/弹出示例：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Routes',
      routes: {
        '/login': (BuildContext context) => Login(),
        // add another route here
        // '/register': (BuildContext context) => Register(),
      },
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Routes'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            RaisedButton(
              onPressed: () {
                // This gives the back button:
                Navigator.of(context).pushNamed('/login');

                // This doesn't give the back button (it replaces)
                //Navigator.pushReplacementNamed(context, '/login');
              },
              child: Text('Login'),
            ),
          ],
        ),
      ),
    );
  }
}

class Login extends StatefulWidget {
  @override
  _LoginState createState() => _LoginState();
}

class _LoginState extends State<Login> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Login Page'),
        ),
        body: Center(
          child: RaisedButton(
            onPressed: () {
              // This will only work for pushNamed
              Navigator.of(context).pop();
            },
            child: Text('Go back'),
          ),
        ));
  }
}

Answer 3

导航到新屏幕：

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => NewScreen()),
);

其中context是小部件的BuildContext，而NewScreen是第二个小部件布局的名称。

代码

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Screen')),
      body: Center(
        child: RaisedButton(
          child: Text(
            'Navigate to a new screen >>',
            style: TextStyle(fontSize: 24.0),
          ),
          onPressed: () {
            _navigateToNextScreen(context);
          },
        ),
      ),
    );
  }

  void _navigateToNextScreen(BuildContext context) {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => NewScreen()),
    );
  }
}

class NewScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('New Screen')),
      body: Center(
        child: Text(
          'This is a new screen',
          style: TextStyle(fontSize: 24.0),
        ),
      ),
    );
  }
}

另请参见

Documentation

Answer 4

如果您熟悉Web开发，则此方法类似于路由。

main.dart

void main() {
  setupLocator();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      routes: {
        '/' : (BuildContext context)=>HomePage(),
        '/register' : (BuildContext context)=>RegisterPage(),
      },
    );
  }
}

您可以从onPressed添加按钮homepage.dart事件来导航register.dart，如下所示。

onPressed: (){
    Navigator.pushReplacementNamed(context, '/register');
 },

Answer 5

使用新的 Get plugin，您只需调用即可导航到新页面

Get.to(Page());

Answer 6

您可以尝试以下代码

Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => YourNextScreen())),

Answer 7

onTap: () {
  Navigator.push(context,
      MaterialPageRoute(builder: (context) => NextScreenName()));
}

Answer 8

我发现我遵循了一个很好的教程，它非常完整，包括屏幕截图和逐步操作，您也可以下载代码并运行它。对我学习Flutter很有帮助，尤其是我完全是个初学者。

https://medium.com/@misterflutter/lesson-5-creating-new-screens-f740994190c7

https://medium.com/@misterflutter/lesson-6-creating-new-screens-part-2-4997085a43af?sk=d2a0fb723af42b78800f7cf19b312b62

Answer 9

要使用Flutter预罐animations加载新屏幕，请使用其各自的过渡类。例如：

容器转换

基本上，我们将第一个窗口小部件或屏幕转换为下一个屏幕。为此，我们需要使用public static function v4() { return sprintf('%04x%04x-%04x-%04x-%04x-%04x%04x%04x', // 32 bits for "time_low" mt_rand(0, 0xffff), mt_rand(0, 0xffff), // 16 bits for "time_mid" mt_rand(0, 0xffff), // 16 bits for "time_hi_and_version", // four most significant bits holds version number 4 mt_rand(0, 0x0fff) | 0x4000, // 16 bits, 8 bits for "clk_seq_hi_res", // 8 bits for "clk_seq_low", // two most significant bits holds zero and one for variant DCE1.1 mt_rand(0, 0x3fff) | 0x8000, // 48 bits for "node" mt_rand(0, 0xffff), mt_rand(0, 0xffff), mt_rand(0, 0xffff) ); }。以下代码说明了将ListView中的项目转换为其详细信息页面。

OpenContainer

共享轴

要使用类似的方法，我们使用@override Widget build(BuildContext context) { return Card( color: Colors.white, elevation: 2.0, child: OpenContainer( transitionType: ContainerTransitionType.fadeThrough, closedColor: Theme.of(context).cardColor, closedElevation: 0.0, openElevation: 4.0, transitionDuration: Duration(milliseconds: 1500), openBuilder: (BuildContext context, VoidCallback _) => THENEXTSCREEN(), closedBuilder: (BuildContext _, VoidCallback openContainer) { return ListTile( leading: Icon(Icons.album), title: Text("ITEM NAME"), ); }, ), ); }，SharedAxisTransition以及一个状态来存储简单的PageTransitionSwitcher来指示活动页面。我在以下代码中使用Provider来说明水平过渡。

isFirstPage

请注意，在所有这些情况下，我们都不使用Navigator和MaterialPageRoute。所有这些代码都是从animations repo派生的，因此请参考源代码以获取更详尽的示例。

Answer 10

Flutter 有一个类似的实现，使用 Navigator 和 Routes。 Route 是对应用“屏幕”或“页面”的抽象，而 Navigator 是管理路由的小部件。

要在页面之间导航，您有两个选择：

指定路线名称映射。
直接导航到路线。

以下示例构建地图。

void main() {
  runApp(CupertinoApp(
    home: MyAppHome(), // becomes the route named '/'
    routes: <String, WidgetBuilder> {
      '/a': (BuildContext context) => MyPage(title: 'page A'),
      '/b': (BuildContext context) => MyPage(title: 'page B'),
      '/c': (BuildContext context) => MyPage(title: 'page C'),
    },
  ));
}

通过 route 在导航器中的名称导航到 pushing。

Navigator.of(context).pushNamed('/b');

Navigator 类处理 Flutter 中的路由，用于从您推送到堆栈的路由中获取返回结果。这是由 awaiting 返回的 Future 完成的。

例如，要开始一条让用户选择其位置的“位置”路线，您可以执行以下操作：

push()

然后，在您的“位置”路线中，一旦用户选择了他们的位置，Map coordinates = await Navigator.of(context).pushNamed('/location'); 将包含结果的堆栈：

pop()

Answer 11

您可以在构建小部件中使用这种方式

onTap: () { Navigator.of(context).push(MaterialPageRoute( builder: (context) => NewScreen()));},

在Flutter中导航到新屏幕

11 个答案:

导航到新屏幕：

代码

另请参见