Đồ án tìm hiểu flutter và xây dựng ̣ ứng dụng

ĐẠI HỌC QUỐC GIA THÀ NH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM - - BÁO CÁO ĐỒ ÁN Đề tài: TÌM HIỂU FLUTTER VÀ XÂY DỰNG ỨNG DỤNG Giảng viên hướng dẫn: Huỳnh Tuấn Anh Lớp: SE121.N21.PMCL Sinh viên thư ̣c hiên: ̣ Phạm Thanh Phong – 20520272 Hồ Hồng Đăng – 20520427 TP.HCM, tháng năm 2023 ĐỒ ÁN Lời cảm ơn Sau q trình học tập rèn luyện khoa Cơng nghệ phần mềm trường Đại học Công nghệ Thông tin – ĐHQG TP.HCM, em trang bị kiến thức kỹ thực tế để hồn thành Đồ án Để hồn thành đồ án này, với lịng biết ơn sâu sắc em xin gửi lời cảm ơn chân thành đến: Ban Giám hiệu trường Đại học Công nghệ Thông tin – ĐHQG TP.HCM tạo điều kiện thuận lợi để sinh viên tìm kiếm, nghiên cứu thơng tin với hệ thống thư viện đại, đa dạng loại sách tài liệu Gần gũi lời tốt đẹp xin gửi đến đến thầ y Huỳnh Tuấn Anh tận tình giúp đỡ, định hướng cách tư hướng làm việc khoa học Đó góp ý q báu khơng q trình thực đồ án mà cịn hành trang tiếp bước cho em trình học tập làm việc sau Sau cùng, xin chúc quý Thầy Cơ khoa Cơng nghệ Phần mềm nói riêng giáo viên trường Công nghệ thông tin nói chung thật dồi sức khỏe, niềm tin để tiếp tục thực sứ mệnh cao đẹp Thành phố Hồ Chí Minh, tháng năm 2023 Sinh Viên Phạm Thanh Phong Hồ Hồng Đăng Trang ĐỒ ÁN Nhâ ̣n xét của giảng viên Trang ĐỒ ÁN MỤC LỤC Lời cảm ơn Nhâ ̣n xét của giảng viên MỤC LỤC CHƯƠNG 1: GIỚI THIỆU TỔNG QUAN Thông tin sinh viên: Tổ ng quan đề tài: 2.1 Giới thiê ̣u đề tài: 2.2 Pha ̣m vi nghiên cứu: 2.3 Nô ̣i dung nghiên cứu: 2.4 Kế t quả hướng tới: Công cu ̣ sử du ̣ng: CHƯƠNG 2: FLUTTER 10 Flutter là gi?̀ 10 Điề u gi ̀ làm Flutter trở nên đô ̣c đáo 11 Kiế n trúc của Flutter 13 4.1 Kiế n trúc Flutter 13 4.2 Flutter Engine 13 4.3 Thư viê ̣n nề n tảng (Foudation Library) 13 4.4 Widget 13 4.5 Thiế t kế các Widget cu ̣ thể 14 Giới thiê ̣u về ngôn ngữ lâ ̣p trin ̀ h Dart 14 5.1 Các từ khóa 14 5.2 Kiể u dữ liê ̣u 15 5.3 Các biế n và hàm 17 5.4 Toán tử (Operators) 17 5.5 Câu lê ̣nh điề u kiê ̣n 19 5.6 Vòng lă ̣p 20 5.7 Chú thích (Comment) 21 Trang ĐỒ ÁN 5.8 Continue và Break 22 5.9 Từ khóa Final và Const 23 5.10 Lâ ̣p trin ̀ h hướng đố i tươṇ g (OOP) 23 Mô ̣t số loa ̣i Widget thường gă ̣p Flutter 29 6.1 Widget Flutter 29 6.2 Widget hiể n thi ̣ 31 6.3 Widget ẩ n 38 Tim ̀ hiể u bố cu ̣c (layout) Trong giao diê ̣n Flutter 43 7.1 Bố cu ̣c 43 7.2 Bố cu ̣c mô ̣t Widget 44 7.3 Các loa ̣i Widget bố cu ̣c 45 Tim ̀ hiể u về Cử chỉ (Gestures) với giao diêṇ Flutter 48 8.1 Con trỏ 49 8.2 Cử chỉ 49 8.3 Dò cử chỉ 51 Quản lý State 51 9.1 Tra ̣ng thái tức thời 52 9.2 Tra ̣ng thái ứng du ̣ng 53 Quản lý thư viê ̣n và các gói Flutter (Lib & Package) 54 10.1 Na ̣p thư viê ̣n Dart 54 10 10.2 10.3 10.4 10.5 11 Các thư viê ̣n cung cấ p sẵ n 55 Ta ̣o thư viê ̣n Dart 56 Cài đă ̣t các gói 57 Các gói hay sử du ̣ng 58 Tim ̀ hiể u về Navigator và Routing Flutter 64 11.1 Ta ̣o routes 65 11.2 Điề u hướng sang route thứ hai bằ ng phương thức Navigator.push() 66 11.3 Quay la ̣i route đầ u tiên bằ ng phương thức Navigator.pop() 67 11.4 Điề u hướng với các route đươ ̣c đă ̣t tên 67 12 Tim ̀ hiể u về Database Flutter 71 Trang ĐỒ ÁN 12.1 Cơ sở dữ liêụ SQLite 71 12.2 Firebase – NoSQL lưu trữ online 75 Sơ lươ ̣c về Firebase 75 CHƯƠNG 3: XÂY DỰNG ỨNG DỤNG 78 12.2.1 Tổ ng quan 78 1.1 Tên ứng du ̣ng: Phầ n mề m quản lý chi tiêu cá nhân di đô ̣ng 78 1.2 Lý cho ̣n ứng du ̣ng 78 1.3 Đố i tươṇ g hướng đế n 78 1.4 Môi trường phát triể n ứng du ̣ng 78 1.5 Kế t quả mong ̣i 79 1.6 Khảo sát hiê ̣n tra ̣ng 79 1.7 Quy trin ̀ h thực hiê ̣n các công viêc̣ chính 80 Phân tích, thiế t kế ̣ thố ng 81 2.1 Xác đinh ̣ và mô hin ̀ h hóa các yêu cầ u phầ n mề m 81 2.2 Thiế t kế ̣ thố ng 97 2.3 Thiế t kế dữ liê ̣u 98 2.4 Thiế t kế giao diê ̣n 107 Cài đă ̣t và thử nghiê ̣m 132 Hướng dẫ n cài đă ̣t phầ n mề m 133 Hướng dẫ n sử du ̣ng phầ n mề m 135 5.1 Bắ t đầ u với ̣ thố ng 135 5.2 Đăng nhâ ̣p, đăng ký và đăng xuấ t khỏi ̣ thố ng 135 5.3 Quên mâ ̣t khẩ u, Đổ i mâ ̣t khẩ u 136 5.4 Chuyể n tiế p giữa các thành phầ n bên ứng du ̣ng 136 5.5 Thêm chi tiêu 137 5.6 Sửa chi tiêu 137 5.7 Thay đổ i thông tin cá nhân 137 5.8 Thay đổ i ngôn ngữ ứng du ̣ng 137 5.9 Tim ̀ kiế m chi tiêu 137 5.10 Xuấ t CSV 137 Trang ĐỒ ÁN TÀ I LIỆU THAM KHẢO 138 Trang ĐỒ ÁN CHƯƠNG 1: GIỚI THIỆU TỞNG QUAN Thơng tin sinh viên: MSSV 20520272 20520427 Ho ̣ tên Phạm Thanh Phong Hồ Hồng Đăng Email 20520272@gm.uit.edu.vn 20520427@gm.uit.edu.vn Tổ ng quan đề tài: 2.1 Giới thiê ̣u đề tài: Với sự phát triể n nhanh của smartphone hiê ̣n với hai ̣ điề u hành phổ biế n nhấ t là Android và IOS thì nhu cầ u phát triể n ứng du ̣ng smartphone là rấ t lớn và viê ̣c phát triể n riêng lẻ ứng du ̣ng hai hệ điề u hành bằ ng hai ngôn ngữ, hai framework khác sẽ làm tố n rấ t nhiều chi phí và thời gian Do đó viê ̣c có mô ̣t framework cross-platform có thể code mô ̣t lầ n và cha ̣y cả hai ̣ điề u hành sẽ giúp tiế t kiê ̣m thời gian tiề n ba ̣c Hiê ̣n có rấ t nhiề u framework cross-platform hỗ trơ ̣ phát triể n ứng du ̣ng cả hai ̣ điề u hành mô ̣t cách nhanh chóng, tiê ̣n lơị vẫn đảm bảo tin ́ h bảo mâ ̣t thông tin khách hàng Và nổ i bâ ̣t những năm gầ n đó là Flutter 2.2 Pha ̣m vi nghiên cứu: Trong đồ án lần này, em chủ yếu tập trung vào nghiên cứu tổng quan cách thức hoạt động và cách sử du ̣ng các thư viê ̣n - package cũng cách lưu trữ dữ liê ̣u Flutter Đồng thời, em áp dụng nghiên cứu vào ứng dụng thực tế để giúp em hiểu sâu kiến thức tìm hiểu 2.3 Nội dung nghiên cứu: Em tiến hành nghiên cứu chi tiết cách thức hoạt động, ưu - khuyết điểm thư viện - tính - package liên quan đến Flutter 2.4 Kết quả hướng tới: Với đề tài này, em đề hai mục tiêu chính: Trang ĐỜ ÁN  Đớ i với các nhân: mở rộng kiến thức mình Flutter thơng qua q trình tìm hiểu áp dụng vào ứng dụng thực tế Các kiến thức tìm hiểu thông qua đồ án thúc đẩy em phát triển thêm ứng dụng khác Flutter Đồng thời, em học cách nghiên cứu sử dụng framework cần trải qua trình nhằm giúp em dễ dàng tiếp xúc với công nghệ tương lai  Đối với lập trình viên dùng đồ án nghiên cứu làm tài liệu tham khảo: thông qua tài liệu nghiên cứu ứng dụng em xây dựng, lập trình viên khác dễ dàng định hướng cần phải tìm hiểu sử dụng Flutter Đồng thời em có ghi số khái niệm, kiến thức thư viện phổ biến đề xuất cộng đồng sử dụng Flutter, lập trình viên khác tham khảo tìm hiểu sâu Cơng cu ̣ sử du ̣ng: Trong quá trình xây dựng phầ n mề m, em đã sử du ̣ng các phầ n mề m sau:  Android Studio: Code giao diê ̣n ứng du ̣ng + khởi ta ̣o máy ảo  Visual Studio Code: Code giao diê ̣n ứng du ̣ng  Chrome: Tìm hiể u thơng tin Trang ĐỜ ÁN CHƯƠNG 2: FLUTTER Flutter là gi?̀ Flutter SDK đa tảng hoạt động iOS Android Google phát triển sử dụng để tạo ứng dụng dành cho di động (native app) Flutter gồm thành phần quan trọng:  Một SDK (Software Development Kit): Một sưu tập công cụ giúp bạn phát triển ứng dụng  Một Framework (UI Library based on widgets): Một tập hợp thành phần giao diện người dùng (UI) tái sử dụng (button, text inputs, slider, v.v.) giúp bạn cá nhân hóa tùy theo nhu cầu riêng Nói chung, tạo ứng dụng di động công việc phức tạp đầy thử thách Có nhiều framework có sẵn, cung cấp tính tuyệt vời để phát triển ứng dụng di động Để phát triển ứng dụng dành cho thiết bị di động, Android cung cấp framework gốc dựa ngôn ngữ Java Kotlin, iOS cung cấp framework dựa ngơn ngữ Objective-C/Swift Vì vậy, cần hai ngôn ngữ framework khác để phát triển ứng dụng cho hai hệ điều hành Ngày nay, để khắc phục phức tạp này, có số framework giới thiệu hỗ trợ hệ điều hành với ứng dụng dành cho máy tính để bàn Những loại framework gọi công cụ phát triển đa tảng Framework phát triển đa tảng có khả viết code triển khai nhiều tảng khác (Android, iOS Máy tính để bàn) Nó tiết kiệm nhiều thời gian nỗ lực phát triển nhà phát triển Có số cơng cụ có sẵn để phát triển đa tảng, bao gồm công cụ dựa web Mỗi framework có mức độ thành công khác ngành công nghiệp di động Gần đây, framework công tác giới thiệu họ phát triển đa tảng có tên Flutter phát triển từ Google Flutter công cụ giao diện người dùng để tạo ứng dụng nhanh, đẹp, biên dịch nguyên cho thiết bị di động, web máy tính để bàn với ngơn ngữ lập trình sở code Nó miễn phí code nguồn mở Trang 10 ĐỜ ÁN hình Button xóa xóa chi tiêu hiển thị hình Khi người dùng nhấn vào button xóa hình Thơng tin chi tiêu Hiển thị chi tiết chi tiêu mà người dùng lưu Khi người dùng nhấn vào chi tiêu page home trước 2.4.3.12 Màn hình báo cáo a Giao diê ̣n Trang 124 ĐỒ ÁN b Mô tả các đố i tươ ̣ng màn hình Tên xử lý Ý nghiã Điề u kiê ̣n go ̣i Báo cáo Tuầ n Hiể n thi ba ̣ ́ o cáo tuầ n Khi người dùng nhấ n vào nút tuầ n Báo cáo Tháng Hiể n thi ba ̣ ́ o cáo tháng Khi người dùng nhấ n vào nút tháng Báo cáo Năm Hiể n thi ba ̣ ́ o cáo năm Khi người dùng nhấ n vào nút năm Tim ̀ kiế m Chuyể n sang trang tim ̀ kiế m Khi người dùng nhấ n vào nút tìm kiế m Báo cáo Chi tiêu Chuyể n sang báo cáo cho chi tiêu Khi người dùng nhấ n vào nút chi tiêu Báo cáo Thu nhâ ̣p Chuyể n sang báo cáo cho thu nhâ ̣p Khi người dùng nhấ n vào nút thu nhâ ̣p Chuyể n sang biể u đồ tròn Khi người dùng nhấ n vào biể u tươṇ g biể u đồ tròn Chuyể n sang biể u đồ cô ̣t Khi người dùng nhấ n vào biể u tươṇ g biể u đồ cô ̣t STT Hiể n thi biể ̣ u đồ tròn Hiể n thi biể ̣ u đồ ̣t Ghi chú 2.4.3.13 Màn hình cài đă ̣t Trang 125 ĐỒ ÁN a Giao diê ̣n b Mô tả các đố i tươ ̣ng màn hình STT Tên xử lý Cài đặt tài khoản Đổi mật Ngôn ngữ Ý nghiã Điề u kiê ̣n go ̣i Thay đổi thông tin cá nhân Khi người dùng nhấ n vào Button tài khoản hình Thay đổi mật Khi người dùng nhấ n vào Button đổi mật hình Ghi chú Chuyễn đổi Khi người dùng ngơn ngữ sẵn có nhấ n vào Button Trang 126 ĐỜ ÁN ứng du ̣ng Chế độ tối Thay đổi giao diện hình ngơn ngữ hình Khi người dùng nhấ n vào Button chế ̣ tớ i hình Lịch sử Xem lich ̣ sử Khi người dùng giao dich ̣ từ mới nhấ n vào Button nhấ t đế n cũ nhấ t lịch sử của người dùng hình Xuất CSV X́ t toàn bơ ̣ dữ Khi người dùng liê ̣u chi tiêu của nhấ n vào Button người dùng xuất CSV thành file CSV hình Xem tỷ giá tiề n tê ̣ hiê ̣n ta ̣i Khi người dùng nhấ n vào Button Tỷ giá tiề n tê ̣ hình Thông tin Xem thông tin ứng du ̣ng Khi người dùng nhấ n vào Button thơng tin hình Đăng xuấ t Đăng xuấ t tài khoản khỏi ứng du ̣ng Khi người dùng nhấ n vào Button Đăng xuấ t hình Tỷ giá tiề n tê ̣ 2.4.3.14 Màn hình tim ̀ kiế m a Giao diê ̣n Trang 127 ĐỜ ÁN b Mơ tả các đố i tươ ̣ng màn hình Tên xử lý Ý nghiã Điề u kiê ̣n go ̣i Tìm kiế m chi tiêu Tim ̀ kiế m chi tiêu theo yêu cầ u của người dùng Khi người dùng nhấ n vào button kính lúp bàn phím Hiể n thi bô ̣ ̣ lo ̣c Hiể n thi bô ̣ ̣ lo ̣c tìm kiế m lên màn hình Khi người dùng nhấ n vào button có biể u tươṇ g bô ̣ lo ̣c Lo ̣c tim ̀ kiế m theo số tiề n Lo ̣c các tim ̀ kiế m theo số tiề n mà người Khi người dùng cho ̣n những tùy cho ̣n bô ̣ STT Ghi chú Trang 128 ĐỜ ÁN dùng cho ̣n bơ ̣ lo ̣c lo ̣c số tiề n Lo ̣c tim ̀ kiế m theo thời gian Lo ̣c các tim ̀ Khi người dùng kiế m theo thời cho ̣n những tùy gian mà người cho ̣n bô ̣ dùng cho ̣n lo ̣c thời gian bô ̣ lo ̣c Lo ̣c tim ̀ kiế m theo ba ̣n bè Lo ̣c các tim ̀ Khi người dùng kiế m theo ba ̣n cho ̣n những tùy bè mà người cho ̣n bô ̣ dùng cho ̣n lo ̣c ba ̣n bè bô ̣ lo ̣c Lo ̣c tìm kiế m theo ghi chú Lo ̣c các tìm Khi người dùng kiế m theo ghi cho ̣n những tùy chú mà người cho ̣n bô ̣ dùng cho ̣n lo ̣c ghi chú bô ̣ lo ̣c Lo ̣c tim ̀ kiế m theo nhó m Lo ̣c các tim ̀ Khi người dùng kiế m theo nhóm cho ̣n những tùy mà người dùng cho ̣n bô ̣ cho ̣n bô ̣ lo ̣c nhó m lo ̣c Áp du ̣ng bô ̣ lo ̣c vào tìm kiế m Áp du ̣ng bô ̣ lo ̣c sau đươ ̣c người dùng tùy chin̉ h vào tìm kiế m Khi người dùng nhấ n vào nút tìm kiế m bô ̣ lo ̣c 2.4.3.15 Màn hình thay đở i thơng tin cá nhân a Giao diê ̣n Trang 129 ĐỜ ÁN b Mơ tả các đố i tươ ̣ng màn hình Tên xử lý Ý nghiã Điề u kiê ̣n go ̣i Thêm ảnh người dùng Người dùng thêm ảnh cá nhân vòa tài khoản Khi người dùng nhấ n vào button dấu + hình Họ tên người dùng Người dùng thêm tên hiển thị tài khoản Người dùng click vào textbox họ tên để sửa Số tiền hàng tháng Người dùng sửa tổng số Người dùng click vào STT Ghi chú Trang 130 ĐỒ ÁN tiền chi tiêu hàng tháng textbox tiền hàng tháng sửa Ngày sinh Người dùng sửa ngày sinh tài khoản Người dùng click vào textbox ngày sinh để sửa Giới tính Người dùng có Khi người dùng thể sửa giới tính chọn button male/female tài khoản 2.4.3.16 Màn hình đở i mâ ̣t khẩ u a Giao diê ̣n Trang 131 ĐỜ ÁN b Mơ tả các đớ i tươ ̣ng màn hình STT Tên xử lý Ý nghiã Điề u kiê ̣n go ̣i Textbox Nhập mật cũ Nhập mật cũ để sang trang để đổi mật Người dùng click textbox hình để nhập mật cũ Button gửi chuyển trang Khi người dùng tiếp người click vào button dùng nhập gửi mật cũ hình Nhập mật người dùng Người dùng click textbox mật để nhập mật Textbox nhập lại mật Nhập lại mật người dùng Người dùng click textbox nhập lại mật để nhập lại mật Button gửi kiểm tra xác nhận thay đổi mật người dùng Khi người dùng click vào button gửi hình Textbox nhập mật Ghi chú Cài đă ̣t và thử nghiê ̣m Source code: https://github.com/pthanhphong1502/ExpenditureManagement?fbclid=IwAR2UxyCGt5swTvgC 6v-YueZRQzeOEBhonR5Y14QXr5XF38dIi6iOkQzF3tY Trang 132 ĐỜ ÁN STT Chức Mức ̣ hoàn thành Ghi chú Đăng ký 100% Đăng ký tài khoản mới để truy câ ̣p vào ̣ thố ng Đăng nhâ ̣p 100% Đăng nhâ ̣p tài khoản vào ̣ thố ng để quản lý chi tiêu Đổ i mâ ̣t khẩ u 100% Thay đổ i mâ ̣t khẩ u tài khoản của người dùng Quên mâ ̣t khẩ u 100% Đă ̣t la ̣i mâ ̣t khẩ u người dùng sau người dùng xác thực tài khoản Thêm, sửa, xóa chi tiêu 100% Thêm, xóa, sửa chỉ tiêu Thố ng kê, báo cáo theo các khoảng thời gian nhấ t đinh ̣ 100% Lâ ̣p báo cáo theo tuầ n, tháng năm theo loa ̣i biể u đồ cô ̣t và tròn Thay đổ i thông tin cá nhân 100% Thay đổ i các thông tin cá nhân của người dùng 100% Thay đổ i ngôn ngữ ứng du ̣ng (Anh – Viê ̣t) 100% Tra cứu chi tiêu dựa bô ̣ lo ̣c tra cứu có sẵn 100% Xuấ t dữ liê ̣u chi tiêu file CSV 10 Thay đổ i ngôn ngữ Tim ̀ kiế m chi tiêu Xuấ t dữ liê ̣u chi tiêu Hướng dẫ n cài đă ̣t phầ n mề m Bước 1: các ba ̣n tải file cài đă ̣t ta ̣i Trang 133 ĐỒ ÁN Bước 2: Truy câ ̣p vào quản lý file và tim ̀ kiế m đế n file apk mà ba ̣n vừa tải về và mở lên để tiế n hành cài đă ̣t Trang 134 ĐỒ ÁN Bước 3: Sau cài đă ̣t xong tiế n hành mở ứng du ̣ng lên để sử du ̣ng Hướng dẫ n sử du ̣ng phầ n mề m 5.1 Bắt đầ u với ̣ thố ng Sau đọc tập tài liệu này, bạn có khả năng: - Truy cập vào hệ thống; - Đăng nhập đăng xuất khỏi hệ thống; - Truy cập tính hệ thống; 5.2 Đăng nhâ ̣p, đăng ký và đăng xuấ t khỏi ̣ thớ ng Khi bạn thấy hình đăng nhập ứng du ̣ng, bạn nhập tên đăng nhập (email) mật (password) để đăng nhập vào ứng dụng Nếu đăng nhập thất bại, bạn thấy thông báo tương ứng từ hệ thống Bạn thử lại Ta ̣i màn hiǹ h đăng nhâ ̣p ba ̣n nhấ n vào Đăng ký để di chuyể n đế n mà n hình đăng ký Ba ̣n cầ n điề n đầ y đủ thông tin cầ n thiế t và nhấ n Đăng ký để tiế n Trang 135 ĐỒ ÁN hành ta ̣o tài khoản ̣ thố ng Sau đăng ký thành công ba ̣n vui lòng kiể m tra email và xác thực tài khoàn để có thể truy câ ̣p vào ̣ thố ng Nế u đăng ký thấ t ba ̣n, ba ̣n sẽ thấ y thông báo tương ứng từ ̣ thố ng Ba ̣n hãy thử đăng ký la ̣i Nế u ba ̣n muố n đổ i tài khoản quản lý ba ̣n có thể vào Tài khoản và cho ̣n Đăng xuấ t 5.3 Quên mâ ̣t khẩ u, Đổ i mâ ̣t khẩ u Hê ̣ thố ng có cung cấ p chức lấ y la ̣i mâ ̣t khẩ u cho người dùng người dùng quên mâ ̣t khẩ u Ở màn hình đăng nhâ ̣p nhấ n vào nút quên mâ ̣t khẩ u, màn hình quên mâ ̣t khẩ u sẽ hiể n thi.̣ Ở người dùng cầ n nhâ ̣p vào điạ chỉ email cầ n lấ y la ̣i mâ ̣t khẩ u Sau nhâ ̣p xong email sẽ đươ ̣c gửi đế n điạ chỉ email vừa nhâ ̣p Người dùng tiế n hành kiể m tra email và đổ i mâ ̣t khẩ u Để bảo mâ ̣t tài khoản thì ̣ thố ng có cung cấ p chức đổ i mâ ̣t khẩ u Để đổ i mâ ̣t khẩ u, người dùng cầ n truy câ ̣p vào ̣ thố ng và cho ̣n tài khoản, cho ̣n đổ i mâ ̣t khẩ u Sau đó màn hình đổ i mâ ̣t khẩ u sẽ hiể n thi.̣ Người dùng nhâ ̣p mật khẩ u hiê ̣n ta ̣i Nế u mâ ̣t khẩ u chin ́ h xác sẽ đươ ̣c chuyể n đế n màn hiǹ h nhâ ̣p mâ ̣t khẩ u mới Người dùng nhâ ̣p mâ ̣t khẩ u mới và xác nhâ ̣n đổ i mâ ̣t khẩ u 5.4 Chuyể n tiế p giữa các thành phầ n bên ứng du ̣ng Khi vừa truy câ ̣p vào ứng du ̣ng ba ̣n sẽ thấ y có màn hiǹ h chiń h và phía ć i màn hiǹ h sẽ có mô ̣t bottom tab Bottom tab này dùng để di chuyể n giữa các tiń h bên ứng du ̣ng Trang chủ là nơi sẽ hiể n thi ̣ số dư hàng tháng của ba ̣n Ba ̣n có thể xem chi tiế t mỗ i tháng bằ ng cách cho ̣n các tháng tab bar phí Trang lich ̣ là nơi ba ̣n có thể xem đươ ̣c chi tiế t chi tiêu từng ngày của ba ̣n bằ ng cách cho ̣n ngày mà ba ̣n muố n xem lich ̣ Thêm chi tiêu là nơi ba ̣n có thể thêm vào chi tiêu của miǹ h Báo cáo là nơi ba ̣n có thể thố ng kê chi tiêu theo tuầ n, tháng, năm của ̀ h theo biể u đồ cô ̣t hoă ̣c tròn Tài khoản là nơi ba ̣n có thể quản lý thông tin cá nhân và các cài đă ̣t khác của ứng du ̣ng Trang 136 ĐỒ ÁN 5.5 Thêm chi tiêu Trong màn hin ̀ h chin ́ h ba ̣n nhấ n vào biể u tươṇ g dấ u + Màn hình thêm chi tiêu sẽ hiể n thi.̣ Ba ̣n tiế n hành thêm những thông tin cầ n thiế t vào bên và tiế n hành lưu chi tiêu Chi tiêu sẽ đươ ̣c lưu ̣ thố ng 5.6 Sửa chi tiêu Cho ̣n chi tiêu màn ba ̣n muố n sửa Tiế p theo cho ̣n biể u tươṇ g bút để tiế n hành sửa chi tiêu Nhâ ̣p vào nô ̣i dung mà ba ̣n muố n thay đổ i sau đó nhấ n lưu để lưu la ̣i thay đổ i 5.7 Thay đổ i thông tin cá nhân Trong màn hin ̀ h chin ́ h ba ̣n cho ̣n chức Tài khoản Sau đó cho ̣n tài khoản và tiế n hành thay đổ i thông tin mà ba ̣n muố n 5.8 Thay đổ i ngôn ngữ ứng du ̣ng Trong màn hin ̀ h chiń h ba ̣n cho ̣n chức Tài khoản Sau đó cho ̣n Ngôn ngữ và tiế n hành thay đổ i ngôn ngữ mà ba ̣n ḿ n 5.9 Tìm kiế m chi tiêu Trong màn hin ̀ h chin ́ h ba ̣n cho ̣n chức Báo cáo Sau đó cho ̣n biể u tươṇ g kính lúp và tiế n hành nhâ ̣p vào chi tiế t mà ba ̣n muố n tìm kiế m Có thể cho ̣n bô ̣ lo ̣c mà tùy cho ̣n những thông tin cầ n thiế t mà ba ̣n muố n lo ̣c 5.10 Xuất CSV Trong màn hiǹ h chính ba ̣n cho ̣n chức Tài khoản Sau đó cho ̣n Xuấ t CSV và đơị vài giây để ̣ thố ng kế t xuấ t và ta ̣o file báo cáo Trang 137 ĐỒ ÁN TÀ I LIỆU THAM KHẢO Em có dùng tài liệu tham khảo từ trang chủ Flutter Bên cạnh em cịn tham khảo nhiều chủ đề thảo luận, ví dụ minh hoạ Dart, Flutter, Firebase trang web Stackoverflow, Viblo, Github, … Flutter Document: https://flutter.dev/docs StackOverFlow: https://stackoverflow.com/ Youtube: https://youtube.com/ Firebase Document: https://firebase.google.com/docs/android/setup Firebase: https://firebase.google.com/docs FlutterFire Document: https://firebase.flutter.dev/docs/overview/ Github Flutter: https://github.com/flutter/samples Dart Packages: https://pub.dev/ Medium: https://medium.com/ Viblo: https://viblo.asia/ Trang 138