In this Order details screen I am going from two diff screen one is from orders_lists screens and one from checkout popup for showing order details after placing success order but i want that when i go back from details screen i should only pop to orders_list screen
Can anyone have solution for this??
Here my Order details screen
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: AppColors.appbarColor,
title: Text(
'Order Details',
style: GoogleFonts.poppins(color: AppColors.textColor),
),
),
body: Stack(
children: [
WebViewWidget(controller: _webViewController),
if (_isLoading)
Center(
child: CircularProgressIndicator(
color: AppColors.buttonColor,
),
),
],
),
);
}
}
What you want is declarative navigation, where you can describe how to you want to navigate — like “always pop to the order lists screen from the order details screen”. This is different from imperative navigation, which you use when you call the push or pop method from Navigator, where you have to manually specify each navigation action.
The official way to do declarative navigation in flutter is with the go_router package. Here’s how you could define your router so that OrderDetails will always pop to OrderLists, no matter how you navigate to it:
GoRouter(
initialLocation: '/order-lists',
routes: [
GoRoute(
path: '/order-lists',
builder: (_, __) => OrderListsScreen(),
routes: [
GoRoute(
path: '/order-details',
builder: (_, __) => OrderDetailsScreen(),
),
],
),
GoRoute(
path: '/checkout',
builder: (_, __) => CheckoutScreen(),
),
],
)
With GoRouter, you assign a path (which is a String) to each page in your router. You specify your starting screen by passing its path to the initialLocation parameter. You then navigate to your pages by passing your path to the context.go method, and you pop using context.pop(). We defined order details as a sub-route of order lists, so we would navigate to it using context.go('/order-lists/order-details'). Since order details is a sub-route of order lists, it will always pop back to order lists.
To use your GoRouter, use the MaterialApp.router constructor:
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp.router(
routerConfig: GoRouter(
initialLocation: '/order-lists',
routes: [
GoRoute(
path: '/order-lists',
builder: (_, __) => OrderListsScreen(),
routes: [
GoRoute(
path: '/order-details',
builder: (_, __) => OrderDetailsScreen(),
),
],
),
GoRoute(
path: '/checkout',
builder: (_, __) => CheckoutScreen(),
),
],
),
);
}
}
Result
Full Example
Here’s the complete code that produces this recording:
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp.router(
routerConfig: GoRouter(
initialLocation: '/order-lists',
routes: [
GoRoute(
path: '/order-lists',
builder: (_, __) => OrderListsScreen(),
routes: [
GoRoute(
path: '/order-details',
builder: (_, __) => OrderDetailsScreen(),
),
],
),
GoRoute(
path: '/checkout',
builder: (_, __) => CheckoutScreen(),
),
],
),
);
}
}
class OrderListsScreen extends StatelessWidget {
const OrderListsScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.red,
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Order Lists', style: TextStyle(fontSize: 32)),
SizedBox(height: 10),
ElevatedButton(
onPressed: () => context.go('/order-lists/order-details'),
child: Text('Go to order details'),
),
SizedBox(height: 10),
ElevatedButton(
onPressed: () => context.go('/checkout'),
child: Text('Go to checkout'),
),
],
),
),
);
}
}
class OrderDetailsScreen extends StatelessWidget {
const OrderDetailsScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
backgroundColor: Colors.green,
body: Center(
child: Text('Order Details', style: TextStyle(fontSize: 32)),
),
);
}
}
class CheckoutScreen extends StatelessWidget {
const CheckoutScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Checkout', style: TextStyle(fontSize: 32)),
SizedBox(height: 10),
ElevatedButton(
onPressed: () => context.go('/order-lists/order-details'),
child: Text('Go to order details'),
),
],
),
),
);
}
}
3