How To Navigate To Other Screens in Flutter

In this article, you will learn How To Navigate To Other Screens in Flutter.

In Flutter you don’t need to install any third-party packages or dependencies. Navigation comes out of the box in Flutter which great compared to React Native.

Creating Screens

main.dart

class Screen1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Screen 1',
              style: TextStyle(fontSize: 40),
            ),
            OutlineButton(
              child: Text('Go To Screen 2'),
              onPressed: () {
                Navigator.push(context,
                    MaterialPageRoute(builder: (context) => Screen2()));
              },
            ),
          ],
        ),
      ),
    );
  }
}

class Screen2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Screen 2'),
        centerTitle: true,
      ),
      body: Center(
        child: Text(
          'Screen 2',
          style: TextStyle(fontSize: 40),
        ),
      ),
    );
  }
}

Here, you have the Screen1 Widget with Center & Column widget. After the Text() widget you have an OutlineButton() with onPressed. The function inside onPressed is used for navigating to different screens. To navigate to another screen you use

Navigator.push method with respective parameters, first param is the context and the second param is the MaterialPageRoute() with the Screen name.

Result