Hình 4.50: Giao diện “Đăng nhập”
STT Tên Kiểu Chức năng/Biến cố Ghi chú
1 Username TextFormField Nhập tên đăng nhập
2 Password TextFormField Nhập mật khẩu Nội dung ở dạng kí tự tròn
115 mật khẩu
4 Đăng nhập FlatButton Đăng nhập vào hệ thống
Thực hiện khi các thông tin đã được điền đầy đủ 5 Đăng ký FlatButton Tạo tài khoản mới
6 Tiếp tục với tư
cách khách FlatButton
Truy cập ứng dụng với tư cách khác
Không cần đăng nhập
Bảng 4.60: Mô tả chi tiết màn hình “Đăng nhập”
4.9.2. Màn hình Đăng ký
116
STT Tên Kiểu Chức năng/Biến cố Ghi chú
1 Họ TextFormField Nhập họ 2 Tên TextFormField Nhập tên
3 Emial TextFormField Nhập email Định dạng email 4 Tên đăng nhập TextFormField Nhập tên đăng nhập
5 Mật khẩu TextFormField Nhập mật khẩu Nội dung ở dạng kí tự tròn
6 Nhập lại mật
khẩu TextFormField Nhập lại mật khẩu
Nội dung ở dạng kí tự tròn
7 Đăng ký FlatButton Đăng ký tài khoản
Thực hiện khi các thông tin đã được điền đầy đủ Bảng 4.61: Mô tả chi tiết màn hình “Đăng ký”
117
4.9.3. Màn hình Quên mật khẩu
Hình 4.52: Giao diện “Quên mật khẩu”
STT Tên Kiểu Chức năng/Biến cố Ghi chú
1 Email TextFormField Nhập email khôi phục Định dạng email
2 Gửi FlatButton Gửi email khôi phục
Thực hiện khi các thông tin đã được điền đầy đủ
118
4.9.4. Màn hình Trang chủ
4.9.4.1. Màn hình Trang chủ chế độ người dùng khách
Hình 4.53: Giao diện “Trang chủ” ở chế độ “Khách”
STT Tên Kiểu Chức năng/Biến cố Ghi chú
1 Tìm kiếm TextFormField Nhập nội dung tìm kiếm
2 Search IconButton Thực hiện việc tìm kiếm
3 Hiển thị bộ lọc
nâng cao FlatButton
Hiển thị bộ lọc nâng cao
Đổi màu nếu sử dụng bộ lọc 4 Bài đăng ListView Danh sách bài đăng
119 nhâp
6 Bản đồ BottomTabBar Đến màn hình bản đồ
Bảng 4.63: Mô tả chi tiết màn hình “Trang chủ” ở chế độ “Khách”
4.9.4.2. Màn hình Trang chủ
Hình 4.54: Giao diện “Trang chủ” khi đã đăng nhập
STT Tên Kiểu Chức năng/Biến cố Ghi chú
1 Tìm kiếm TextFormField Nhập nội dung tìm kiếm
2 Search IconButton Thực hiện việc tìm kiếm
3 Hiển thị bộ lọc
nâng cao FlatButton
Hiển thị bộ lọc nâng cao
Đổi màu nếu sử dụng bộ lọc
120
4 Bài đăng ListView Danh sách bài đăng 5 Bản đồ BottomTabBar Đến màn hình bản đồ
6 Bài đăng mới BottomTabBar Đến màn hình đăng bài Cấp người dùng 7 Cá nhân BottomTabBar Đến màn hình cá nhân Cấp người dùng 8 Quản trị BottomTabBar Đến màn hình quản trị Cấp kiểm duyệt
viên, admin Bảng 4.64: Mô tả chi tiết màn hình “Trang chủ” khi đã đăng nhập
4.9.4.3. Màn hình Bộ lọc bài đăng
Hình 4.55: Giao diện “Bộ lọc bài đăng”
STT Tên Kiểu Chức năng/Biến cố Ghi chú
1 Loại bài DropDownButton Chọn loại bài đăng 2 Giá tiền DropDownButton Chọn và nhập giá tiền
121
3 Diện tích DropDownButton Chọn và nhập diện tích
4 Địa chỉ TextFormField Nhập địa chỉ 5 Tag TextFormField Nhập tag
6 Tỉnh DropDownButton Lựa chọn tỉnh/thành
Sau khi chọn, hiện Drop Down Button huyện, xã
7 Username TextFormField Nhập username 8 Tên dự án TextFormField Nhập tên dự án 9 Chủ dự án TextFormField Nhập chủ dự án 10 Sử dụng bộ
lọc FlatButton Áp dụng bộ
11 Đặt lại giá trị FlatButton Đặt lại giá trị bộ lọc Bảng 4.65: Mô tả chi tiết màn hình “Bộ lọc bài đăng”
122