How to Navigate to New Page

Welcome guys,

In this post, I'm going to show you how to navigate to a new page using Flutter.

Here is how your sample app is going to look like.

Below is the complete code from main.dart file. Note: You can simply copy the below code into you main.dart and run the code and you will get the required output.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State {
  void _opennewpage() {
    Navigator.of(context).push(
      new MaterialPageRoute(
        builder: (BuildContext context) {
          return new Scaffold(
            appBar: new AppBar(
              title: new Text(widget.title),
            ),
            body: new Center(
              child: new Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  new Text(
                    'This is your second page',
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            new Text(
              'Example to Navigate to Next Page',
            ),
          ],
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _opennewpage,
        tooltip: 'Open New Page',
        child: new Icon(Icons.navigate_next),
      ),
    );
  }
}

Explanation: Initially I have created the Default App and then I have modified the code to call the function "_opennewpage" on the button click.

The button code already existing in the default app and you just have to modify the onPressed event. If you want a more appropriate icon for this example, then you can just change it to navigate_next and the icon code is available in floatingActionButton.

So after this I have implemented the function "_opennewpage" function to open a new page as below.

void _opennewpage() {
  Navigator.of(context).push(
    new MaterialPageRoute(
      builder: (BuildContext context) {
        return new Scaffold(
          appBar: new AppBar(
            title: new Text(widget.title),
          ),
          body: new Center(
            child: new Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                new Text(
                  'This is your second page',
                ),
              ],
            ),
          ),
        );
      },
    ),
  );
}

And then the new page opens on the button click.

This is a simple example of how you can implement multiple pages in Flutter. Hope this is useful.

Thanks,

Srikanth

0 Comments

Recent Comments