How to Open New Page and Back without Context in Flutter

In this example, we are going to show you how to navigate to the new next page and get back from that page to the previous page without context in Flutter. See the example below:

For contextless navigation, first, you need to add get the package in your project by adding the following lines on pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  get: ^4.6.5

Now, import the package to your script:

import 'package:get/get.dart';

Convert MaterialApp() to GetMaterialApp():

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      
    );
  }
}

New Page Class:

class NewPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
     return Scaffold(
         appBar: AppBar(title: Text("Next Page")),
         body: Container(
            alignment: Alignment.topCenter,
            padding: EdgeInsets.all(30),
            child: ElevatedButton(
               onPressed: (){
                  Get.back();
               },
               child: Text("Go Back"),
            ),
         ),
     );
  }
}

To go to a new page:

Get.to(NewPage());

To go to a new page and clear the last one Navigation history:

Get.off(NewPage());

To go to a new page and clear all previous Navigation history:

Get.offAll(NewPage());

To go to the named route:

Get.toNamed('/nextpage');

Get back from The next page to the previous page:

Get.back();

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

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> { 
  @override
  Widget build(BuildContext context) { 
    return  Scaffold(
          appBar: AppBar(
            title: Text("Home Page"),
          ),
          body: Container(
            padding: EdgeInsets.only(top:20, left:20, right:20),
            alignment: Alignment.topCenter,
            child: Column(
              children: [

                 ElevatedButton(
                  onPressed: (){
                     Get.to(NewPage());
                  }, 
                  child: Text("Go to Next Page")
                ),

                ElevatedButton(
                  onPressed: (){
                     Get.off(NewPage());
                     //go to new page and clear the 
                     //previous history
                     //you can use after splash, login page
                  }, 
                  child: Text("Go to Next Page and Clear History")
                ),

                ElevatedButton(
                  onPressed: (){
                     Get.offAll(NewPage());
                     //go to new page and clear the 
                     //all previous history
                  }, 
                  child: Text("Go to Next Page and Clear All History")
                )
            ],)
          )
       );
  }
}


class NewPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
     return Scaffold(
         appBar: AppBar(title: Text("Next Page")),
         body: Container(
            alignment: Alignment.topCenter,
            padding: EdgeInsets.all(30),
            child: ElevatedButton(
               onPressed: (){
                  Get.back();
               },
               child: Text("Go Back"),
            ),
         ),
     );
  }

}

In this way, you can navigate to the new next page and get back without context in Flutter.

No any Comments on this Article


Please Wait...