Flutter: Tạo ứng dụng đáp ứng

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Ứng dụng đáp ứng hiển thị giao diện người dùng của nó theo kích thước và hình dạng của màn hình hoặc cửa sổ. Điều này đặc biệt cần thiết khi cùng một ứng dụng có thể chạy trên nhiều thiết bị, từ đồng hồ, điện thoại, máy tính bảng đến máy tính xách tay hoặc máy tính để bàn. Khi người dùng thay đổi kích thước cửa sổ trên máy tính xách tay hoặc máy tính để bàn hoặc thay đổi hướng của điện thoại hoặc máy tính bảng, ứng dụng sẽ phản hồi bằng cách sắp xếp lại giao diện người dùng cho phù hợp.

Flutter cho phép bạn tạo các ứng dụng tự thích ứng với kích thước và hướng màn hình của thiết bị.

Có hai cách tiếp cận cơ bản để tạo ứng dụng Flutter với thiết kế đáp ứng:

Sử dụng lớp LayoutBuilder

Từ thuộc tính builder, bạn có được một đối tượng BoxConstraints. Kiểm tra các thuộc tính của ràng buộc để quyết định những gì sẽ hiển thị. Ví dụ: nếu maxWidth của bạn lớn hơn điểm ngắt chiều rộng thì hãy trả về một đối tượng Scaffold có hàng có danh sách ở bên trái. Nếu nó hẹp hơn, hãy trả về một đối tượng Scaffold có ngăn chứa danh sách đó. Bạn cũng có thể điều chỉnh màn hình của mình dựa trên chiều cao của thiết bị, tỷ lệ khung hình hoặc một số thuộc tính khác. Khi các ràng buộc thay đổi (ví dụ: người dùng xoay điện thoại hoặc đặt ứng dụng của bạn vào giao diện người dùng lát trong Nougat) thì hàm build sẽ chạy.

Sử dụng phương thức MediaQuery.of() trong các hàm build

Điều này sẽ cung cấp cho bạn kích thước, hướng, v.v. của ứng dụng hiện tại của bạn. Điều này hữu ích hơn nếu bạn muốn đưa ra quyết định dựa trên bối cảnh hoàn chỉnh thay vì chỉ dựa trên kích thước của tiện ích cụ thể của bạn. Một lần nữa, nếu bạn sử dụng điều này, thì chức năng xây dựng của bạn sẽ tự động chạy nếu người dùng bằng cách nào đó thay đổi kích thước của ứng dụng.

Các widget và lớp hữu ích khác để tạo giao diện người dùng đáp ứng:

Dưới đây là một số tài nguyên nữa, bao gồm cả đóng góp từ cộng đồng Flutter:

Nguồn: flutter.dev
» Tiếp: Hiểu về các ràng buộc
« Trước: Hướng dẫn xây dựng bổ cục trong Flutter
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!