Bài 5: Đổ dữ liệu thật lên giao diện

I.Hoàn thiện Widget thể hiện cho 1 câu hỏi trong danh sách

Ở phần trước, chúng ta có Widget cho mỗi câu hỏi là QuestionMainWidget, giờ chúng ta sẽ tiến hành điền đầy đủ dữ liệu cho nó nào.

Tóm tắt lại phân tích ở bài trước chúng ta có:

QuestionMainWidget sẽ chứa: 

• Ảnh nền background
• Ảnh thumb hiển thị câu hỏi
• Số thứ tự câu hỏi với trường hợp đã trả lời đúng
• Icon khóa với câu hỏi chưa trả lời

Ảnh nền, và số 1 fake tạm đã được vẽ, giờ còn hiển thị lên ảnh thumb cho câu hỏi, và số thứ tự/icon khóa tương ứng. Để hiển thị đầy đủ QuestionMainWidget cần nhận dữ liệu đầu vào là QuestionModel, và trạng thái khóa hay không.

Điều chỉnh lại Widget hiển thị danh sách câu hỏi tại HomeScreen và truyền vào dữ liệu tương ứng, trường isLock ta sẽ fake tạm là false/true để test QuestionMainWidget. Đồng thời childCount cũng đẩy đúng giá trị listQuestion.length để hiển thị đúng và đủ số câu hỏi.

Hiển thị ảnh thumb cho câu hỏi chúng ta sẽ load ảnh từ trường picture trong QuestionModel với cached_network_image (https://pub.dev/packages/cached_network_image ) 

Ứng với dữ liệu isLock truyền vào là fale/true chúng ta có kết quả:

Vậy là đã xong được cơ bản màn HomeScreen rồi đó.

II.Điều hướng và truyền dữ liệu sang màn chi tiết

Sau khi click vào 1 câu hỏi, chúng ta sẽ điều hướng vào màn chi tiết.

Màn detail đã được định nghĩa ở trong RouteGenerator, giờ chúng ta sẽ điều hướng sang bằng Navigator và truyền dữ liệu câu hỏi được chọn tương ứng.

Trong DetailScreen ta thêm DetailArgs chứa QuestionModel,

RouteGenerator cũng bổ sung thêm args cho DetailScreen

Và trong QuestionMainWidget, xử lý hàm onPressDetail() để điều hướng và truyền dữ liệu sang màn mới:

Như vậy là hoàn tất được quá trình điều hướng và truyền dữ liệu với Navigator.

III.Phân tích giao diện màn hình chi tiết

Nhìn vào giao diện ta có thể tách thành các Widget tổng quan như sau:

• Hình nền background ở dưới

• HeaderWidget chứa Icon Back và title hiển thị câu hỏi: 
• Widget hiển thị bảng đen
• Widget hiển thị câu hỏi trên bảng
• Widget hiển thị câu trả lời, nút clear và nút kiểm tra đáp án
• Widget hiển thị danh sách các nút

Từ đây các bạn có thể tự triển khai giao diện tương ứng trong Flutter dựa vào các kiến thức về UI đã có. 

IV.Tổng kết

Ở bài này, chúng ta đã hoàn thiện được giao diện tại trang HomeScreen với dữ liệu thật lấy từ api. Biết được cách điều hướng cơ bản qua các màn hình và truyền dữ liệu cần thiết.