Bài 1. Tổng quan demo cơ bản
I. Lời nói đầu
Mình viết serie này với mục đích training thực tế cho người mới hiểu và bắt đầu được một dự án Flutter. Các kiến thức trong bài cũng là các kiến thức cơ bản, đủ để cho các bạn có thể bắt đầu làm quen, cấu trúc dự án một cách cơ bản nhất có thể để người mới có thể hình dung được.
II. Các kiến thức, kỹ thuật sẽ sử dụng
1.Kiến thức về UI
Widget: Để thiết kế được màn hình cho App chúng ta cần hiểu về khái niệm Widget. Tất cả những gì chúng ta nhìn thấy trên giao diện như 1 câu chữ, nút ấn, ô nhập dữ liệu,... đều là các Widget, nó có thể phân nhóm thành:
- Widget cơ bản (Core widget): Container, Text, Image, Icon, Button, TextField, CheckBox, … Chúng được sử dụng để hiển thị nội dung cơ bản và tương tác cơ bản
- Widget sắp xếp (Layout widget): Row (sắp xếp các widget con theo hàng ngang), Column (sắp xếp theo hàng dọc), Stack (cho phép các widget con đè nhau), ListView (widget hiển thị danh sách), GridView, … Chúng giúp bạn tạo giao diện có cấu trúc và sắp xếp các thành phần theo cách tốt nhất.
- Widget khác: cuộn như SingleChildScrollView, click InkWell, … và còn nhiều loại khác
Assets: Quản lý tài nguyên này đảm bảo rằng ứng dụng sẽ có giao diện đẹp và đầy đủ chức năng. Cơ bản nhất mà chúng ta cần là font chữ trong ứng dụng và các icon
2.Quản lý state
State là trạng thái của widget, hiểu đơn giản là các màn hình sẽ có những dữ liệu tương ứng, chúng chính là state.
3.Navigation
Điều hướng sang 1 màn hình mới + truyền dữ liệu qua
4.Networking
Làm việc với Api qua thư viện dio
III. Xây dựng ứng dụng Brainstorming IQ Training
Đây là một ứng dụng đơn giản với tính năng chính là hiển thị các câu hỏi về toán học, người dùng muốn trả lời đúng cần tìm ra quy luật trong các con số. Chỉ là các câu đố vui cơ bản mà thi thoảng mọi người có thể đố nhau.
Ứng dụng có vài màn hình như sau:
Nếu các bạn ủng hộ mình thì có thể truy cập vào link
Brainstorming - IQ Training
để trải nghiệm nha
IV. Chuẩn bị
Setup môi trường
- Công cụ code (IDE): Android studio
- Môi trường code: Flutter 3.10.6