Início / coding / Perguntas / 79296647
Accepted
Tanu Purohit
Asked: 2024-12-20 16:43:51 +0800 CST

Como fazer Pop em uma tela específica quando o Push é de duas telas diferentes

  • 772

Nesta tela de detalhes do pedido, estou indo de duas telas diferentes, uma é das telas orders_lists e uma do pop-up de checkout para mostrar os detalhes do pedido após fazer o pedido com sucesso, mas quero que quando eu voltar da tela de detalhes, eu vá apenas para a tela orders_list

Alguém pode ter uma solução para isso?

Aqui está a tela de detalhes do meu pedido

  @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,
              ),
            ),
        ],
      ),
    );
  }
}
flutter

1 respostas

  1. Best Answer

    O que você quer é uma navegação declarativa , onde você pode descrever como quer navegar — como "sempre vá para a tela de listas de pedidos a partir da tela de detalhes do pedido". Isso é diferente da navegação imperativa , que você usa quando chama o método pushou popde Navigator, onde você tem que especificar manualmente cada ação de navegação.

    A maneira oficial de fazer navegação declarativa no flutter é com o pacote go_router . Veja como você pode definir seu roteador para que ele sempreOrderDetails vá para , não importa como você navegue até ele:OrderLists

    GoRouter(
  initialLocation: '/order-lists',
  routes: [
    GoRoute(
      path: '/order-lists',
      builder: (_, __) => OrderListsScreen(),
      routes: [
        GoRoute(
          path: '/order-details',
          builder: (_, __) => OrderDetailsScreen(),
        ),
      ],
    ),
    GoRoute(
      path: '/checkout',
      builder: (_, __) => CheckoutScreen(),
    ),
  ],
)

    Com GoRouter, você atribui um caminho (que é um String) para cada página no seu roteador. Você especifica sua tela inicial passando seu caminho para o initialLocationparâmetro. Você então navega para suas páginas passando seu caminho para o context.gométodo, e você pop usando context.pop(). Nós definimos order detailscomo uma sub-rota de order lists, então navegaríamos até ela usando context.go('/order-lists/order-details'). Como order detailsé uma sub-rota de order lists, ela sempre retornará para order lists.

    Para usar seu GoRouter, use o MaterialApp.routerconstrutor:

    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(),
          ),
        ],
      ),
    );
  }
}

    Resultado

    Gravação de tela do resultado

    Exemplo completo

    Aqui está o código completo que produz esta gravação:

    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'),
            ),
          ],
        ),
      ),
    );
  }
}
    • 1

relate perguntas