Navigate to a new screen in Flutter

Question

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 cle

Answer 1

Navigate to next screen with back using Navigator.push()

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

Navigate to next screen without back using Navigator.pushReplacement()

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

Answer 2

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

Answer 3

If you are familiar with web development this approach is similar to routing.

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(),
      },
    );
  }
}

You can add button onPressed event from the homepage.dart to navigate register.dart as follows.

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

Answer 4

You can also avoid Navigator / MaterialPageRoute altogether. The main reason is animations.

The problem with Material route is that excepting Hero animation, it only has slide-in animation for most page transitions.

Now consider Flutter canned animation package.

To have something like this you'd need to code your page without using Material Route. All page transitions here work using Container transformation or sort-of widget switch.

So personally I'd structure my app based on how the pages transition. If the page I navigate to has shared elements with the previous page then I would go with Material Route. An example would be image gallery (which shares the image with the icon clicked). For normal page transitions I would actually go without it.

Answer 5

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

Answer 6

You can try with the following code

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