Trong các ứng dụng di động, chúng ta thường sử dụng hộp thoại để thông báo, cảnh báo đến người dùng hoặc có những trường hợp cần nhận thông tin từ người dùng để ứng dụng tiếp tục xử lý.
Đối với Flutter, khi nhắc đến hộp thoại thì có thể nhắc đến:
- Hộp thoại cảnh báo (alert dialog)
- Hộp thoại tùy chỉnh
- Hộp thoại full-screen
Hộp thoại đơn giản trong Flutter
Việc thêm một hộp thoại tối giản trong Flutter cũng khá dễ dàng.
Dưới đây là một hàm mẫu _showAlert() mà mình đã viết để hiển thị một hộp thoại đơn giản gồm tiêu đề và nội dung thông báo.
Kết quả như sau (nhấn vào ảnh để phóng to):
Hộp thoại có nút
Ở ví dụ trên, mình hướng dẫn cách hiện lên hộp thoại thông báo đơn giản chỉ có tiêu đề và nội dung. Để thêm nút bấm ví dụ như Close hoặc OK thì chúng ta làm như sau:
Đoạn code này sẽ hiển thị ra hộp thoại có tiêu đề, nội dung và nút "Đóng lại". Khi nhấn vào nút thì sẽ đóng lại hộp thoại thông báo.
Kết quả như sau (nhấn vào ảnh để phóng to):
Hộp thoại tùy chỉnh
Trong những trường hợp phức tạp, hộp thoại thông báo đơn giản không đáp ứng được nhu cầu của bạn. Vì dụ như cần nhận thông tin từ người dùng, ... thì bạn có thể tùy chỉnh hộp thoại trong Flutter.
Trong ví dụ trên sẽ hiển thị hộp thoại có ô textbox để người dùng nhập tên vào, có nút bấm để thực hiện tác vụ.
Kết quả như sau (nhấn vào ảnh để phóng to):
Hộp thoại full-screen
Để tạo hộp thoại fullscreen, chúng ta không dùng phương thức showDialog, thay vào đó chúng ta sử dụng phương thức showGeneralDialog được cung cấp bởi Flutter SDK.
Kết quả như sau:
Đăng nhận xét