Ví dụ Flutter Navigator pushNamedAndRemoveUntil

pushNamedAndRemoveUntil
Ví dụ pushNamedAndRemoveUntil()

pushNamedAndRemoveUntil là một phương thức tĩnh của lớp Navigator. Trong bài học này chúng ta sẽ xem xét cách sử dụng phương thức này thông qua một vài ví dụ.

Hướng dẫn và ví dụ Flutter Navigator

1. pushNamedAndRemoveUntil

typedef RoutePredicate = bool Function(Route<dynamic> route);


@optionalTypeArgs
static Future<T?> pushNamedAndRemoveUntil<T extends Object?>(
   BuildContext context,
   String newRouteName,
   RoutePredicate predicate,
  {Object? arguments}
)

Các phương thức Navigator.pushAndRemoveUntil() và Navigator.pushNamedAndRemoveUntil() được sử dụng để nhẩy đến một màn hình mới đồng thời loại bỏ một vài tuyến đường đã đi qua trong lịch sử cho tới khi RoutePredicate trả về true.

Navigator.pushNamedAndRemoveUntil(
  context, 
  RouteNames.routeD4, // "/routeD4"
  (Route<dynamic> route) {
    String? routeName=  route.settings.name;
    return routeName == RouteNames.routeD2;
  },
);

Ví dụ, bạn tạo ra một ứng dụng tương tự Facebook hoặc Instagram, người dùng sau khi xem nhiều trang (màn hình) họ đăng xuất ra khỏi ứng dụng. Sau khi đăng xuất, ứng dụng nhẩy tới màn hình Home và việc loại bỏ lịch sử các tuyến đường (route) và người dùng đã trải qua trước đó là điều cần thiết.

Navigator.of(context).pushNamedAndRemoveUntil(
  '/home',
  (Route<dynamic> route) => false,
);

// OR:
Navigator.pushNamedAndRemoveUntil(
  context,
  '/home',
  (Route<dynamic> route) => false,
);

2. Ví dụ pushNamedAndRemoveUntil()

Trong ví dụ này, chúng ta sử dụng phương thức pushNamedAndRemoveUntil() để nhẩy từ màn hình 3 tới màn hình 4, đồng thời loại bỏ lịch sử các tuyến đường ngoại trừ màn hình 1.

//
// Code of Screen D3
//
Navigator.pushNamedAndRemoveUntil(
  context,
  RouteNames.routeD4, // "/routeD4"
  (Route<dynamic> route) => route.isFirst,
);

Code đầy đủ của ví dụ:

push_named_and_remove_until_ex.dart

import 'package:flutter/material.dart';

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

class RouteNames {
  static const String routeD1 = "/screenD1";
  static const String routeD2 = "/screenD2";
  static const String routeD3 = "/screenD3";
  static const String routeD4 = "/screenD4";
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Navigator Demo (pushNamed)',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      initialRoute: RouteNames.routeD1,
      routes: {
        RouteNames.routeD1: (context) => const ScreenD1(),
        RouteNames.routeD2: (context) => const ScreenD2(),
        RouteNames.routeD3: (context) => const ScreenD3(),
        RouteNames.routeD4: (context) => const ScreenD4(),
      },
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            const Text("This is Screen D1"),
            const SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, RouteNames.routeD2);
              },
              child: const Text("Go to Screen D2 >>"),
            ),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            const Text(
              "This is Screen D2",
              style: TextStyle(
                color: Colors.red,
              ),
            ),
            const SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, RouteNames.routeD3);
              },
              child: const Text("Go to Screen D3 >>"),
            ),
            const SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {
                Navigator.pop(context); // Back!!
              },
              child: const Text("<< Back"),
            ),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            const Text(
              "This is Screen D3",
              style: TextStyle(
                color: Colors.red,
              ),
            ),
            const SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamedAndRemoveUntil(
                  context,
                  RouteNames.routeD4, // "/routeD4"
                  (Route<dynamic> route) => route.isFirst,
                );
              },
              child: const Text("Go to Screen D4 >>"),
            ),
            const SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {
                Navigator.pop(context); // Back!!
              },
              child: const Text("<< Back"),
            ),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            const Text(
              "This is Screen D4",
              style: TextStyle(
                color: Colors.red,
              ),
            ),
            const SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {
                Navigator.pop(context); // Back!!
              },
              child: const Text("<< Back"),
            ),
          ],
        ),
      ),
    );
  }
}

Ví dụ Flutter Navigator pushNamedAndRemoveUntil

1. pushNamedAndRemoveUntil

2. Ví dụ pushNamedAndRemoveUntil()

Các hướng dẫn lập trình Flutter

Các hướng dẫn lập trình Flutter

Các bài viết mới nhất