Flutter: Navigate to a New Screen

In Android terms, our screens would be new Activities. In iOS terms, new ViewControllers. In Flutter, screens are just Widgets!

let us see how to navigate the new screen.

First Create a Page Which you want to Navigate

1. 1. Right-click the “lib”.
   2. Tap “New” -> “ Dart Files”.
   3. Give the name like “New.page.dart”.
   4. Here you can create a program for the second page that is your navigational page.

Create Package in New.page.dart

import ‘package:flutter/material.dart’;

Create a new Page in New.page.dart

class NewPage extends StatelessWidget {
 final String title;
 NewPage(this.title);
 @override
 Widget build(BuildContext context) {
   return new Scaffold(
     appBar: new AppBar(
       title: new Text(title),
     ),
     body: new Center(
       child: new Text(title),
     ),
   );
 }
}

 

Import New.page.dart File Package in Main Dart

At the main dart file enter the basic package

import ‘package:flutter/material.dart’;

import 'package:flutter8_app/new.page.dart';

Create a Class File at the Main Dart

class _MyHomePageState extends State<MyHomePage> {
 @override
 Widget build(BuildContext context) {
   return new Scaffold(
     appBar: new AppBar(
       title: new Text(widget.title),
     ),

Create ListTile in the Main Dart

new ListTile(
             title: new Text("About us"),
           ),

Declare it in Main Class

routes: <String, WidgetBuilder>{

"/a": (BuildContext context) => new NewPage("New Page"),

}

Create Navigate in the ListTile

new ListTile(
             title: new Text("About us"),
            trailing: new Icon(Icons.supervisor_account),
             onTap: () => Navigator.of(context).pushNamed("/a"),
           ),

Note: “/a” is the name I have declared in Main Class.