在Flutter中导航到新屏幕 [英] Navigate to a new screen in Flutter

问题描述

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

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

• 
  
• 导航器以及路线和转换...噢，天哪！ -西蒙·莱特富特|颤抖的欧洲

How do you navigate to a new screen in Flutter?

These questions are similar, but are asking more than I am.

• 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

I am adding an answer below.

解决方案

Navigate to a new screen:

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

where context is the BuildContext of a widget and NewScreen is the name of the second widget layout.

Code

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.of(context).push(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),
        ),
      ),
    );
  }
}

See also

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

这篇关于在Flutter中导航到新屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！