Navigation trong Flutter – Chuyển màn hình & Truyền dữ liệu

👋 Lời mở đầu

Tiếp tục hành trình chinh phục Flutter từ con số 0.

Trong bài viết hôm nay, chúng ta sẽ tìm hiểu về một tính năng rất cơ bản nhưng cực kỳ quan trọng khi làm app: Chuyển màn hình (Navigation) và Truyền dữ liệu giữa các màn hình.

Trong quá trình tìm hiểu nếu có điểm nào chưa chính xác, rất mong nhận được góp ý từ mọi người để bài viết hoàn thiện hơn nhé 🙏

1. Navigation là gì?

Trong một ứng dụng Flutter, việc chuyển từ màn hình này sang màn hình khác (ví dụ: từ trang chính sang trang chi tiết sản phẩm) được gọi là navigation.

Flutter sử dụng một khái niệm gọi là Navigator – hoạt động giống như một ngăn xếp (stack). Mỗi lần chúng ta chuyển màn hình, một widget mới được push lên stack. Khi quay lại, màn hình sẽ được pop ra khỏi stack.

2. Ví dụ cơ bản: Chuyển từ màn hình A sang màn hình B

home_screen.dart

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

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Trang chủ')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
          },
          child: Text('Chuyển sang màn hình 2'),
        ),
      ),
    );
  }
}

second_screen.dart

import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Màn hình thứ 2')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Quay lại'),
        ),
      ),
    );
  }
}

3. Truyền dữ liệu giữa các màn hình

Chúng ta có ví dụ truyền dữ liệu là một message Xin chào sang màn hình second_screen.dart

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => SecondScreen(message: 'Xin chào'),
  ),
);

class SecondScreen extends StatelessWidget {
  final String message;

  SecondScreen({required this.message});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Màn hình 2')),
      body: Center(
        child: Text(message),
      ),
    );
  }
}

4. Trả dữ liệu ngược lại màn hình trước

Chúng ta cũng có thể trả ngược dữ liệu từ màn hình B về A:

HomeScreen

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

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Trang chủ')),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            // Chuyển sang màn hình second_screen và chờ kết quả trả về
            final result = await Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => SecondScreen(),
              ),
            );

            // Hiển thị kết quả trả về (nếu có)
            if (result != null) {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('Kết quả: $result')),
              );
            }
          },
          child: Text('Đi đến second screen'),
        ),
      ),
    );
  }
}

SecondScreen

import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Màn hình 2')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Trả dữ liệu ngược lại về màn hình home
            Navigator.pop(context, 'Xin chào từ second screen!');
          },
          child: Text('Trả dữ liệu về'),
        ),
      ),
    );
  }
}

Lời kết

Qua bài học hôm nay, chúng ta đã nắm được cách chuyển màn hình và truyền dữ liệu trong Flutter – một bước quan trọng để tạo ứng dụng có nhiều trang và có tính tương tác cao hơn.

Ngày mai, chúng ta sẽ tiếp tục tìm hiểu về TextField, xử lý nhập liệu và quản lý controller trong form – một bước gần hơn với việc xây dựng form thực tế.