dart - 在 Flutter 中导航到新屏幕

Question

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

这些问题很相似，但问的比我多。

• Flutter - Navigate to a new screen, and clear all the previous screens
• Flutter: How do I navigate to a new screen using DropDownMenuItems
• Flutter: Move to a new screen without back
• flutter navigation to new screen not working

我在下面添加一个答案。

Answer 1

导航到新屏幕:

Navigator.of(context).push(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: const Text('Home Screen')),
      body: Center(
        child: ElevatedButton(
          child: const Text(
            'Navigate to a new screen >>',
            style: TextStyle(fontSize: 24.0),
          ),
          onPressed: () {
            _navigateToNextScreen(context);
          },
        ),
      ),
    );
  }

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

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

另见

• Documentation
• Navigator and Routes and Transitions... Oh, My! - Simon Lightfoot | Flutter Europe