Flutter Tutorial

Flutter – How to navigate a new screen and back

flutter navigation
1.2kviews

Hi developer in this Flutter Tutorial, I am sharing how to navigate a new screen and back using flutter. In Android, our screen would have a new Activities. In iOS, we have called new ViewControllers. and In Flutter, screens are just Widgets!. So here I am explaining an easy way to in flutter how to navigate a new screen and back.

Screen navigation is the key part of the UI/UX for any Application. due to multiple functionality to navigate to screen A to screen B. and manage all screen to navigation. Flutter Navigation Example Tutorial.

Step: 1 Create a Flutter Project using Android Studio.

Let’s Start on these tutorial first of you can create a flutter project using android studio. If you do not know how to create a brand new flutter project, then please check out. Creating Simple Flutter Application in Android Studio.

Step: 2  Create Two dart files HomeScreen and SecondScreen.

Now, create one folder inside the lib folder called simple_navigation and create two screens inside that folder.

  1. HomeScreen.dart
  2. SecondScreen.dart

 after complete, this step open you HomeScreen.dart file and add these code.

Step: 3 Add this code in HomeScreen.dart file.

On the home screen create a button on click on button go to the second screen. In Flutter, these elements are called routers, and they’re managed by a Navigator widget. The navigator leads a stack of Route objects and provides methods for controlling the stack, like Navigator.push and Navigator.pop.

import 'package:flutter/material.dart';
import './SecondScreen.dart';

class HomeScreen extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
          child: RaisedButton(
              child: Text('Go to Second Screen'),
              color: Theme.of(context).primaryColor,
              textColor: Colors.white,
              onPressed: () => Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (BuildContext context) => SecondScreen(),
                  )))),
    );
  }
}

Step:4  SecondScreen.dart file source code.

import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: RaisedButton(
            child: Text('Back To HomeScreen'),
            color: Theme.of(context).primaryColor,
            textColor: Colors.white,
            onPressed: () => Navigator.pop(context)
        ),
      ),
    );
  }
}

 Step: 5 Main.dart file source code.

import "package:flutter/material.dart";
import './app_example/home_widget.dart';
import './simple_navigation/HomeScreen.dart';



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

//class App extends StatelessWidget {
//  @override
//  Widget build(BuildContext context) {
//    return MaterialApp(
//      title: 'My Flutter App',
//      home: Home(),
//    );
//  }

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(primarySwatch: Colors.blue), home: HomeScreen());
  }
}

after complete, this step run your application if your application and check you flutter navigation example.

 

Welcome to my blog! I’m Ritu Malik, and here at Codeplayon.com, we are dedicated to delivering timely and well-researched content. Our passion for knowledge shines through in the diverse range of topics we cover. Over the years, we have explored various niches such as business, finance, technology, marketing, lifestyle, website reviews and many others.