Cách điều hướng màn hình trong Flutter?

Question

Vương Nguyễn · Accepted Answer

Trong Flutter, điều hướng giữa các màn hình (navigation) là một trong những khía cạnh quan trọng khi xây dựng ứng dụng. Flutter cung cấp nhiều phương pháp để điều hướng giữa các màn hình (widgets). Phổ biến nhất là sử dụng Navigator và Route. Chúng ta sẽ cùng tìm hiểu chi tiết về các phương pháp điều hướng sau:
1. Sử dụng Navigator.push và Navigator.pop
Phương pháp cơ bản nhất để điều hướng giữa các màn hình trong Flutter là sử dụng Navigator. Navigator hoạt động giống như một stack (ngăn xếp). Bạn có thể đẩy (push) một màn hình mới vào stack và pop (loại bỏ) màn hình hiện tại khỏi stack để quay lại màn hình trước đó.
Cú pháp:
Navigator.push: Đẩy một màn hình mới vào ngăn xếp.
Navigator.pop: Loại bỏ màn hình hiện tại khỏi ngăn xếp và quay lại màn hình trước.
Ví dụ, giả sử bạn có hai màn hình HomeScreen và SecondScreen và muốn điều hướng từ HomeScreen đến SecondScreen.
Code:
import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}
class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
          },
          child: Text('Go to Second Screen'),
        ),
      ),
    );
  }
}
class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Back to Home Screen'),
        ),
      ),
    );
  }
}
Trong ví dụ trên:
Navigator.push(context, MaterialPageRoute(builder: (context) => SecondScreen())) sẽ đẩy màn hình SecondScreen vào stack.
Navigator.pop(context) sẽ loại bỏ màn hình SecondScreen và quay lại HomeScreen.
2. Sử dụng Named Routes (Định tuyến tên)
Trong các ứng dụng lớn, việc điều hướng giữa nhiều màn hình có thể phức tạp. Để quản lý điều hướng tốt hơn, Flutter hỗ trợ Named Routes, nơi bạn định nghĩa các tuyến đường (routes) với tên và quản lý chúng thông qua một bản đồ (Map) trong MaterialApp.
Cú pháp:
Định nghĩa các tuyến đường trong MaterialApp.
Sử dụng Navigator.pushNamed để điều hướng đến các màn hình theo tên.
Code:
import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/second': (context) => SecondScreen(),
      },
    );
  }
}
class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
          child: Text('Go to Second Screen'),
        ),
      ),
    );
  }
}
class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Back to Home Screen'),
        ),
      ),
    );
  }
}
Trong ví dụ trên:
initialRoute: '/' xác định màn hình khởi tạo là HomeScreen.
routes: {'/': (context) => HomeScreen(), '/second': (context) => SecondScreen()} là bản đồ các route có tên.
Khi bấm nút, Navigator.pushNamed(context, '/second') sẽ điều hướng đến màn hình SecondScreen.
3. Truyền dữ liệu giữa các màn hình
Bạn có thể truyền dữ liệu giữa các màn hình thông qua Navigator.push hoặc pushNamed. Dữ liệu có thể được truyền khi đẩy một màn hình mới và nhận lại khi màn hình mới bị pop.
Truyền dữ liệu qua Navigator.push:
Code:
import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}
class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            final result = await Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => SecondScreen(data: 'Hello from HomeScreen'),
              ),
            );
            // Hiển thị kết quả nhận lại
            print(result);
          },
          child: Text('Go to Second Screen'),
        ),
      ),
    );
  }
}
class SecondScreen extends StatelessWidget {
  final String data;
  SecondScreen({required this.data});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: &#x5B;
            Text(data),
            ElevatedButton(
              onPressed: () {
                Navigator.pop(context, 'Hello from SecondScreen');
              },
              child: Text('Back to Home Screen with data'),
            ),
          ],
        ),
      ),
    );
  }
}
Trong ví dụ này:
SecondScreen nhận dữ liệu từ HomeScreen thông qua tham số data.
Khi quay lại HomeScreen, dữ liệu 'Hello from SecondScreen' được trả về và có thể xử lý.
4. Quản lý điều hướng với thư viện GoRouter
Trong những ứng dụng lớn và phức tạp hơn, bạn có thể sử dụng thư viện go_router để quản lý điều hướng một cách hiệu quả. Thư viện này hỗ trợ điều hướng dựa trên URL và dễ dàng hơn khi phát triển các ứng dụng web/hybrid.
Kết luận
Trong Flutter, điều hướng giữa các màn hình có thể được thực hiện dễ dàng thông qua Navigator và Route. Bạn có thể sử dụng Navigator.push để điều hướng đơn giản, hoặc pushNamed để sử dụng Named Routes nhằm quản lý ứng dụng lớn.