Flutter Navigation : Return Data from a Screen Using Navigator.pop()

 

Introduction

In the Flutter framework, smooth navigation and effective data exchange between screens are essential components of building rich and interactive user interfaces. One powerful mechanism for achieving this is through the use of Navigator.pop() This blog will delve into the theory behind returning data from a Flutter screen and how the provided code exemplifies this process.

1. Navigation in Flutter

In Flutter, navigating between screens is facilitated by the Navigator class. The Navigator manages a stack of routes and enables the movement between different screens or pages within an application. While pushing a new screen onto the stack is a common operation, the ability to return data from a destination screen to its source is equally important.

2. The Role of Navigator.pop()

Navigator.pop() serves a dual purpose in Flutter navigation. It not only pops the current route off the stack, returning to the previous screen but also provides a way to send data back to the calling screen. This is achieved by passing a result parameter to Navigator.pop(), which becomes accessible through the then callback when navigating to the screen.

Data Handling

The data returned from SelectionScreen is captured in the then callback of Navigator.push() in the _SelectionButtonState class. The runtime type of the returned data is then displayed using a SnackBar. This provides a glimpse into the flexibility of Navigator.pop(), accommodating various data types.

Conclusion

Mastering the art of returning data from a screen in Flutter enhances the interactivity and user experience of your applications. The provided code illustrates the seamless integration of Navigator.pop() into the navigation flow, demonstrating how data can be efficiently passed back from a destination screen to its source. As you embark on your Flutter journey, remember the power of Navigator.pop() in shaping dynamic and responsive user interfaces.

* Home Screen:

import 'package:flutter/material.dart';

import 'demo_screen1.dart';

void main() {
runApp(
MaterialApp(theme:ThemeData(backgroundColor:

Colors.blueGrey,primaryColor:

Colors.pink.withOpacity(0.2)),
title: 'Return data from a screen',
home: HomeScreen(),
),
);
}

class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Return data from a screen'),
),
body: const Center(
child: SelectionButton(),
),
);
}
}

class SelectionButton extends StatefulWidget {
const SelectionButton({super.key});

@override
State<SelectionButton> createState() => _SelectionButtonState();
}

class _SelectionButtonState extends State<SelectionButton> {
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: ()=>
_navigateAndDisplaySelection(context),

child: const Text('Choose an option, any option!'),
);
}

_navigateAndDisplaySelection(BuildContext context) async {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const SelectionScreen()),
).then((value) {

ScaffoldMessenger.of(context)
..removeCurrentSnackBar()
..showSnackBar(SnackBar(content:

Text(value.runtimeType.toString())));
});
}
}

* Navigation Screen :

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

class SelectionScreen extends StatelessWidget {
const SelectionScreen({super.key});

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Pick an option'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8),
child: ElevatedButton(
onPressed: () {
Navigator.pop(context,

["Its a list","You can return"]);
},
child: const Text('Yep!'),
),
),
Padding(
padding: const EdgeInsets.all(8),
child: ElevatedButton(
onPressed: () {
Navigator.pop(context, true);
},
child: const Text('Nope.'),
),
)
],
),
),
);
}
}

Thanks !