Tìm hiểu flutter và xây dựng ứng dụng minh họa

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM MÔN: ĐỒ ÁN SE122.L11.PMCL BÁO CÁO ĐỒ ÁN CUỐI KÌ Đề tài: Tìm hiểu Flutter xây dựng ứng dụng minh họa Giảng viên hướng dẫn: Nguyễn Tấn Toàn Sinh viên thực hiện: 17521177 – Nguyễn Quốc Trung TP Hồ Chí Minh, tháng năm 2021 LỜI CẢM ƠN Đầu tiên, nhóm tác giả xin gởi lời cảm ơn chân thành đến tập thể quý Thầy Cô Trường Đại học Công nghệ thông tin – Đại học Quốc gia TP.HCM quý Thầy Cô khoa Công nghệ phần mềm giúp cho em có kiến thức làm tảng để thực đề tài Đặc biệt, em xin gửi lời cảm ơn lòng biết ơn sâu sắc tới Thầy Nguyễn Tấn Toàn Thầy trực tiếp hướng dẫn tận tình, sửa chữa đóng góp nhiều ý kiến giúp em hồn thành tốt hạn báo cáo mơn học Trong thời gian học đề tài, em vận dụng kiến thức tảng tích lũy đồng thời kết hợp với việc học hỏi nghiên cứu kiến thức Từ đó, em vận dụng tối đa thu thập để hoàn thành báo cáo đồ án tốt Tuy nhiên, q trình thực hiện, em khơng tránh khỏi thiếu sót Chính vậy, em mong nhận góp ý từ phía Thầy Cơ nhằm hoàn thiện kiến thức mà em học tập hành trang để em thực tiếp đề tài khác tương lai Xin chân thành cảm ơn quý Thầy Cô ! Sinh viên thực Nguyễn Quốc Trung NHẬN XÉT CỦA GIẢNG VIÊN Mục lục A Tìm hiểu Flutter I Tổng quan Flutter Nguồn gốc Flutter………………………………………5 Tăng trưởng Tập trung vào di động…………………… Sơ lược Kiến trúc Flutter……………………………… Trải nghiệm lập trình viên…………………………… 10 a Plugin Package……………………………………….10 b Sự quản lý……………………………………………….11 c Lợi ích Flutter………………………………………11 Điều làm lập trình viên ngần ngại…………….12 So sánh Flutter React Native………………………… 13 II Tổng quan Kiến trúc Flutter Architectural layers……………………………………… 14 Giao diện người dùng phản ứng……………………………16 Widgets…………………………………………………….18 a Thành phần…………………………………………… 18 b Xây dựng Widget……………………………………….19 c Widget state…………………………………………….20 d Quản lý State……………………………………………21 Kết xuất bố cục…………………………………………23 a Mơ hình kết xuất Flutter……………………………23 b Từ đầu vào người dùng đến GPU………………….24 c Xây dựng: từ Widget thành Element……………………24 d Bố cục kết xuất………………………………………25 Platform embedding……………………………………….28 Tích hợp với mã khác………………………………………29 a Platform channels……………………………………….29 b Foreign Function Interface………………………………30 c Hiển thị điều khiển gốc ứng dụng Flutter…….30 d Lưu trữ nội dung Flutter ứng dụng mẹ……………31 Hỗ trợ web flutter………………………………………….32 B Xây dựng ứng dụng minh họa Ứng dụng chia sẻ hình ảnh trực tuyến Halogram Thơng tin chung ……………………………………………… 34 Một số package hỗ trợ……………………………………… 34 Chức năng…………………………………………………… 34 Cơ sở liệu………………………………………………… 35 Usecase……………………………………………………….36 Chức giao diện chính……………………………… 37 A I Tìm hiểu Flutter Tổng quan Flutter Nguồn gốc Flutter Flutter framework lập trình để xây dựng ứng dụng di động đa tảng Nguồn gốc bắt nguồn từ Google Chrome nỗ lực nhóm chuyên tinh chỉnh cho web chạy nhanh Eric Seidel người sáng lập dự án Flutter vấn SE Daily, anh kể lại cách anh vài đồng nghiệp nhóm Chrome định xem họ làm Chrome tải trang nhanh Họ phát phần lớn code Chrome làm chậm việc load trang web có để cung cấp khả tương thích với phận trang web nhỏ Họ loại bỏ phận để xem làm nhanh Nỗ lực chứng minh có nhiều tiềm việc tạo framework giao diện người dùng đa tảng thực nhanh chóng Khơng may, Eric nhóm anh muốn nhanh chóng đưa framework UI đa tảng vào tay lập trình viên phải thứ khơng phải web, họ nhận web cập nhật chậm áp dụng tiêu chuẩn Do đó, dự án Flutter đời Hình 1: Flutter Studio Phiên Flutter gọi "Sky" chạy hệ điều hành Android Nó cơng bố hội nghị nhà phát triển Dart 2015, với dự định ban đầu để kết xuất ổn định mức 120 khung hình giây Trong phát biểu hội nghị Google Developer Days Thượng Hải, Google công bố phiên Flutter Release Preview 2, phiên lớn cuối trước Flutter 1.0 Vào ngày tháng 12 năm 2018, Flutter 1.0 phát hành kiện Flutter Live, phiên "ổn định" khung ứng dụng Tăng trưởng Tập trung vào di động Trong lần mắt, Flutter sở mã Chrome nhóm phát triển tìm thứ trơng giống HTML Cuối cùng, nhóm bắt đầu với việc họ cố gắng tạo ngơn ngữ HTML chạy nhanh Nhóm Flutter nhận họ cần phải rời khỏi HTML suy nghĩ sâu cách làm cho việc phát triển giao diện người dùng hiệu dễ chịu từ góc độ lập trình viên Nhóm khởi động lại dự án Flutter thẳng vào đường phát triển JavaScript, xây dựng giải pháp phần tử tùy chỉnh thao tác với DOM Điều nghe khơng hồn tồn đúng, sau họ cố gắng render thứ thành phần tử canvas Sau đó, nhóm nghiên cứu nhiều lý chuyển từ JavaScript sang Dart chuyển sang sử dụng mẫu kiểu reactive, thay mẫu object-observe Một đội Google mà nhóm Flutter liên hệ nhóm Fuchsia Điều hữu ích việc tìm ý kiến xung quanh dự án Nhóm Flutter có tầm nhìn lớn việc Flutter cuối gì, Eric nhớ lại câu hỏi nhóm: Tại khơng xây dựng lại việc phát triển dung cho hình nào? Tuy nhiên, nhóm cho khơn ngoan tập trung vào tảng cung cấp giá trị lớn nhất, cho số lượng lớn lập trình viên thời gian ngắn Lựa chọn hợp lý tập trung vào việc cải thiện trải nghiệm suất lập trình di động cho iOS Android Ban đầu, họ làm việc cho iOS, dành nhiều thời gian để nói chuyện với khách hàng nhận họ cần dành thời gian tập trung vào Google để tìm khách hàng Google Từ việc nói chuyện với lập trình viên, họ thấy phần ‘Trải nghiệm dành cho lập trình viên’ cung cấp cho họ nhiều giá trị, chí cịn khía cạnh giao diện người dùng tảng giao diện tùy chỉnh Kiến trúc Flutter Vẽ pixel hình mục tiêu tất framework UI Flutter khác với framework tảng chéo khác chỗ hiển thị trực tiếp lên hình thơng qua OpenGL Các cách tiếp cận khác hoạt động mức độ trừu tượng cao hơn, nói chuyện với framework UI hệ thống tương ứng, từ điều khiển render pixel thành phần UI Ưu điểm phương pháp cần giao tiếp qua lại mã mã Flutter Có số chậm chạp xảy phải kết nối ngôn ngữ, theo quan sát Eric, cách tiếp cận Flutter tránh phần lớn chậm chạp Nhược điểm bạn khơng cịn dựa vào vật lý hoạt hình tích hợp iOS Android Mỗi tảng có cách tiếp cận khác cách tinh tế cách UI phản hồi cuộn, tải trang, v.v Và Eric nhớ lại, việc viết tương tác vật lý riêng bạn khó khăn cần thiết để đáp ứng mong đợi người dùng điều tương tác việc sử dụng tảng tương ứng Flutter chạy tất mã luồng riêng biệt từ khía cạnh cụ thể hệ điều hành ứng dụng Giao tiếp mã Dart mã cụ thể hệ điều hành thông qua JSON đơn giản Về mặt đồ họa hình, Flutter sử dụng Skia, thư viện đồ họa tương tự sử dụng Chrome Android Để bố trí văn bản, Flutter mượn mã phát triển cho Android Từ góc độ software stack, Flutter coi bao gồm lớp sau: + Lớp thấp lớp runtime xây dựng C++, cần nói chuyện với HĐH theo số cách hạn chế – đến Open GL, API truy cập, tệp mạng IO, v.v … Phía lớp API chuyển sang mã Dart + Một lớp liên kết chủ yếu cho thiết lập ban đầu + Một lớp render mơ hình view điển hình với đối tượng tồn lâu Lớp xử lý thứ bố cục, vẽ, chỉnh sửa văn bản, cử chỉ, v.v + Một lớp widget bao gồm thứ có thời gian tồn ngắn mô tả giao diện người dùng trông framework Flutter áp dụng mơ hình lập trình reactive UI xây dựng lại trạng thái thay đổi + Một lớp thể thẩm mỹ thiết kế cụ thể, ví dụ Thiết kế Layout cho Android Hình 2: Kiến trúc Flutter Tại lại Dart? Một số khía cạnh Dart khiến phù hợp với Flutter là: + Nó có garbage collector hệ nhanh Điều hữu ích Flutter tn theo mơ hình lập trình reactive đối tượng UI tạo hủy nhanh chóng + Trình biên dịch trước thời hạn Dart cho phép biên dịch trực tiếp mã Điều cho phép khởi động nhanh đạt hiệu suất phù hợp + Dart tập trung vào trải nghiệm tốt cho lập trình viên + Dart có thuật toán tree shaking – phần framework Flutter sử dụng đưa vào ứng dụng cuối RenderObjectElements trung gian phần tương tự widget chúng phần bên RenderObject, mà đề cập sau Phần tử widget tham chiếu thơng qua BuildContext, phần tử điều khiển vị trí widget Đây context lời gọi hàm chẳng hạn Theme.of(context), cung cấp cho build() phương thức dạng tham số Bởi widget bất biến, bao gồm mối quan hệ cha / nút, thay đổi widget trả tập hợp đối tượng widget Nhưng điều khơng có nghĩa đại diện phải xây dựng lại Cây phần tử liên tục từ khung sang khung khác đóng vai trị hiệu suất quan trọng, cho phép Flutter hoạt động thể hệ thống phân cấp tiện ích hồn tồn dùng lần lưu vào nhớ đệm biểu diễn Bằng cách duyệt qua widget thay đổi, Flutter xây dựng lại phần phần tử yêu cầu cấu hình lại d Bố cục kết xuất Lớp sở cho nút kết xuất RenderObject, lớp xác định mô hình trừu tượng cho bố cục vẽ Điều chung chung: khơng cam kết với số kích thước cố định chí hệ tọa độ Descartes (được minh họa ví dụ hệ tọa độ cực ) 25 Trong giai đoạn xây dựng, Flutter tạo cập nhật đối tượng kế thừa RenderObjectcho đối tượng RenderObjectElementtrong phần tử RenderObjects nguyên thủy: RenderParagraph kết xuất văn bản, RenderImagekết xuất hình ảnh RenderTransform áp dụng phép biến đổi trước vẽ Hầu hết widget Flutter hiển thị đối tượng kế thừa từ RenderBoxlớp con, đại diện cho RenderObject kích thước cố định khơng gian Descartes 2D RenderBox cung cấp sở mơ hình ràng buộc hộp , thiết lập chiều rộng chiều cao tối thiểu tối đa cho tiện ích hiển thị Để thực bố cục, Flutter qua kết xuất theo chiều sâu chuyển xuống ràng buộc kích thước từ cấp độ gốc sang cấp độ Khi xác định kích thước nó, đối tượng phải tơn trọng ràng buộc đối tượng cha Đối tượng phản hồi cách chuyển kích thước cho đối tượng cha chúng ràng buộc mà đối tượng cha thiết lập 26 Khi kết thúc bước đơn lẻ qua cây, đối tượng có kích thước xác định ràng buộc cha sẵn sàng vẽ cách gọi phương thức paint() Mơ hình ràng buộc hộp mạnh mẽ cách để bố trí đối tượng thời gian O (n) : Cha mẹ định kích thước đối tượng cách đặt ràng buộc tối đa tối thiểu cho giá trị Ví dụ: đối tượng hiển thị ứng dụng điện thoại giới hạn kích thước kích thước hình Đối tượng cha quy định chiều rộng đối tượng cho đối tượng linh hoạt theo chiều cao (hoặc quy định chiều cao linh hoạt theo chiều rộng) Mơ hình hoạt động đối tượng cần biết có dung lượng để định hiển thị nội dung Bằng cách sử dụng LayoutBuildertiện ích con, đối tượng kiểm tra ràng buộc truyền xuống sử dụng ràng buộc để xác định cách sử dụng chúng Gốc tất RenderObjects RenderView, đại diện cho tổng sản lượng kết xuất Khi tảng yêu cầu khung hiển thị (ví dụ: vsync q trình giải nén / tải lên kết cấu hồn tất), lệnh gọi 27 thực tới phương thức compositeFrame(), phần đối tượng RenderView gốc kết xuất Điều tạo kích hoạt SceneBuilder cập nhật cảnh Khi cảnh hồn tất, đối tượng RenderView chuyển cảnh tổng hợp tới Window.render() dart:ui, phương thức chuyển quyền điều khiển cho GPU để hiển thị Platform embedding Như thấy, thay dịch sang tiện ích OS tương đương, giao diện người dùng Flutter Flutter xây dựng, bố trí, tổng hợp vẽ Cơ chế để có kết cấu tham gia vào vòng đời ứng dụng hệ điều hành chắn khác tùy thuộc vào mối quan tâm riêng tảng Cơng cụ tảng bất khả tri, trình bày ABI (Giao diện nhị phân ứng dụng) ổn định cung cấp trình nhúng tảng cách thiết lập sử dụng Flutter Platform embedder ứng dụng hệ điều hành gốc lưu trữ tất nội dung Flutter hoạt động chất kết dính hệ điều hành chủ Flutter Khi bạn khởi động ứng dụng Flutter, trình nhúng cung cấp điểm nhập, khởi tạo công cụ Flutter, lấy luồng cho giao diện người dùng xếp, đồng thời tạo kết cấu mà Flutter ghi vào Trình nhúng chịu trách nhiệm vòng đời ứng dụng, bao gồm cử đầu vào (chẳng hạn chuột, bàn phím, chạm), định cỡ cửa sổ, quản lý luồng thông báo tảng Flutter bao gồm trình nhúng tảng cho Android, iOS, Windows, macOS Linux; bạn tạo trình nhúng tảng tùy chỉnh, ví dụ làm việc hỗ trợ xóa phiên Flutter thơng qua đệm khung kiểu VNC ví dụ hoạt động cho Raspberry Pi Mỗi tảng có API ràng buộc riêng Một số lưu ý ngắn gọn tảng cụ thể: Trên iOS macOS, Flutter tải vào tệp nhúng dạng UIViewController NSViewController, tương ứng Trình nhúng tảng tạo FlutterEngine, đóng vai trị máy chủ lưu trữ Dart VM thời gian chạy Flutter bạn, FlutterViewController, gắn vào FlutterEngine để chuyển kiện đầu vào UIKit Cocoa vào Flutter để hiển thị khung FlutterEngine hiển thị cách sử dụng Metal OpenGL 28 Trên Android, Flutter, theo mặc định, tải vào trình nhúng dạng Hoạt động Chế độ xem điều khiển FlutterView, hiển thị nội dung Flutter dạng khung nhìn kết cấu, tùy thuộc vào yêu cầu thành phần thứ tự z nội dung Flutter Trên Windows, Flutter lưu trữ ứng dụng Win32 truyền thống nội dung hiển thị ANGLE, thư viện dịch lệnh gọi API OpenGL sang DirectX 11 tương đương Các nỗ lực tiến hành để cung cấp trình nhúng Windows mơ hình ứng dụng UWP, thay ANGLE đường dẫn trực tiếp đến GPU thơng qua DirectX 12 Tích hợp với mã khác Flutter cung cấp nhiều chế tương tác khác nhau, cho dù bạn truy cập mã API viết ngôn ngữ Kotlin Swift, gọi API gốc dựa C, nhúng điều khiển gốc vào ứng dụng Flutter nhúng Flutter vào ứng dụng có a Platform channels Đối với ứng dụng dành cho thiết bị di động máy tính để bàn, Flutter cho phép bạn gọi vào mã tùy chỉnh thông qua platform channel , chế đơn giản để giao tiếp mã Dart bạn mã dành riêng cho tảng ứng dụng lưu trữ bạn Bằng cách tạo kênh chung (đóng gói tên codec), bạn gửi nhận tin nhắn Dart thành phần tảng viết ngôn ngữ Kotlin Swift Dữ liệu hóa từ loại Dart Map thành định dạng tiêu chuẩn, sau giải mã hóa thành biểu diễn tương đương Kotlin (chẳng hạn HashMap) Swift (chẳng hạn Dictionary) 29 b Foreign Function Interface Đối với API dựa C, bao gồm API tạo cho mã viết ngôn ngữ đại Rust Go, Dart cung cấp chế trực tiếp để liên kết với mã gốc cách sử dụng thư viện dart:ffi Foreign Function Interface (FFI) nhanh đáng kể so với kênh tảng, khơng cần hóa để truyền liệu Thay vào đó, thời gian chạy Dart cung cấp khả cấp phát nhớ heap hỗ trợ đối tượng Dart thực gọi đến thư viện liên kết tĩnh động FFI có sẵn cho tất tảng khác web, gói js phục vụ mục đích tương đương Để sử dụng FFI, bạn tạo ký hiệu typedef cho phương thức Dart phương thức không quản lý, đồng thời hướng dẫn ánh xạ Dart VM chúng c Hiển thị điều khiển gốc ứng dụng Flutter Bởi nội dung Flutter vẽ vào kết cấu tiện ích hồn tồn nằm nội bộ, khơng có chỗ cho thứ chế độ xem Android tồn mơ hình bên Flutter hiển thị xen kẽ tiện ích Flutter Đó vấn đề nhà phát triển muốn đưa thành phần tảng có vào ứng dụng Flutter họ, chẳng hạn điều khiển trình duyệt Flutter giải vấn đề cách giới thiệu tiện ích xem tảng ( AndroidView UiKitView) cho phép bạn nhúng loại nội dung tảng Chế độ xem tảng tích hợp với nội dung Flutter khác Mỗi widget hoạt động trung gian cho hệ điều hành Ví dụ: Android, AndroidViewcung cấp ba chức chính: Tạo kết cấu đồ họa hiển thị chế độ xem gốc trình bày với Flutter để bố cục phần bề mặt kết xuất Flutter khung vẽ Đáp ứng cử nhập thử nghiệm lần truy cập, đồng thời dịch cử thành đầu vào gốc tương đương Tạo tương tự trợ chuyển lệnh phản hồi lớp nguyên Flutter 30 Không thể tránh khỏi, có lượng chi phí định liên quan đến đồng hóa Do đó, nói chung, phương pháp phù hợp với điều khiển phức tạp Google Maps, nơi việc thực lại Flutter không thực tế Thông thường, ứng dụng Flutter khởi tạo tiện ích phương pháp build() dựa thử nghiệm tảng Giao tiếp với mã gốc bên AndroidViewhoặc UiKitView thường xảy cách sử dụng chế kênh tảng, mô tả trước Hiện tại, chế độ xem tảng không khả dụng cho tảng máy tính để bàn, khơng phải giới hạn kiến trúc; việc hỗ trợ thêm vào tương lai d Lưu trữ nội dung Flutter ứng dụng mẹ Ngược lại kịch trước nhúng tiện ích Flutter vào ứng dụng Android iOS có Như mơ tả phần trước, ứng dụng Flutter tạo chạy thiết bị di động lưu trữ hoạt động Android iOS UIViewController Nội dung rung nhúng vào ứng dụng Android iOS có cách sử dụng API nhúng Mẫu mô-đun Flutter thiết kế để dễ dàng nhúng; bạn nhúng dạng phụ thuộc nguồn vào định nghĩa dựng Gradle Xcode có bạn biên dịch thành tệp nhị phân Android Archive iOS Framework để sử dụng mà không yêu cầu nhà phát triển phải cài đặt Flutter Công cụ Flutter khoảng thời gian ngắn để khởi tạo, cần tải thư viện chia sẻ Flutter, khởi tạo thời gian chạy Dart, tạo chạy vùng lập Dart đính kèm bề mặt kết xuất vào giao diện người dùng Để giảm thiểu độ trễ giao diện người dùng trình bày nội dung Flutter, tốt khởi chạy cơng cụ Flutter trình tự khởi tạo ứng dụng tổng thể trước hình Flutter đầu tiên, để người dùng khơng gặp phải tình trạng tạm dừng đột ngột mã Flutter nạp vào Ngồi ra, việc tách cơng cụ Flutter cho phép sử dụng lại nhiều hình Flutter chia sẻ chi phí nhớ liên quan đến việc tải thư viện cần thiết 31 Hỗ trợ web Flutter Trong khái niệm kiến trúc chung áp dụng cho tất tảng mà Flutter hỗ trợ, có số đặc điểm riêng hỗ trợ web Flutter đáng bình luận Dart biên dịch sang JavaScript chừng ngơn ngữ cịn tồn tại, với chuỗi cơng cụ tối ưu hóa cho mục đích phát triển sản xuất Nhiều ứng dụng quan trọng biên dịch từ Dart sang JavaScript chạy phiên sản xuất ngày nay, bao gồm công cụ dành cho nhà quảng cáo cho Google Ads Vì Flutter Framwork viết Dart nên việc biên dịch sang JavaScript tương đối đơn giản Tuy nhiên, công cụ Flutter, viết C ++, thiết kế để giao tiếp với hệ điều hành bên trình duyệt web Do đó, cần phải có cách tiếp cận khác Trên web, Flutter cung cấp hồn thiện lại cơng cụ API trình duyệt tiêu chuẩn Chúng tơi có hai tùy chọn để hiển thị nội dung Flutter web: HTML WebGL Ở chế độ HTML, Flutter sử dụng HTML, CSS, Canvas SVG Để hiển thị cho WebGL, Flutter sử dụng phiên Skia biên dịch thành WebAssembly có tên CanvasKit Trong chế độ HTML cung cấp đặc điểm kích thước mã tốt nhất, CanvasKit cung cấp đường dẫn nhanh đến ngăn xếp đồ họa trình duyệt cung cấp độ trung thực đồ họa cao chút với mục tiêu di động gốc Phiên web sơ đồ lớp kiến trúc sau: 32 Có lẽ khác biệt đáng ý so với tảng khác mà Flutter chạy không cần Flutter cung cấp thời gian chạy Dart Thay vào đó, khung cơng tác Flutter (cùng với mã bạn viết) biên dịch sang JavaScript Cũng cần lưu ý Dart có khác biệt ngữ nghĩa ngơn ngữ tất chế độ (JIT so với AOT, địa biên dịch web) hầu hết nhà phát triển không viết dòng mã dẫn đến khác biệt Trong thời gian phát triển, web Flutter sử dụng dartdevc, trình biên dịch hỗ trợ biên dịch tăng dần cho phép khởi động lại nóng (mặc dù khơng tải lại nóng) cho ứng dụng Ngược lại, bạn sẵn sàng tạo ứng dụng sản xuất cho web, dart2js trình biên dịch JavaScript sản xuất tối ưu hóa cao Dart sử dụng, đóng gói lõi khung Flutter với ứng dụng bạn thành tệp nguồn rút gọn triển khai tới máy chủ web Mã cung cấp tệp chia thành nhiều tệp thông qua nhập chậm 33 B Xây dựng ứng dụng minh họa Ứng dụng chia sẻ hình ảnh trực tuyến Halogram Thông tin chung - Tên ứng dụng: Halogram - Môi trường phát triển ứng dụng: + Hệ điều hành: Android + Cơ sở liệu : Firebase + Công cụ xây dựng ứng dụng: Android Studio + Công nghệ sử dụng : Flutter , FlutterFire + Quản lý Source Code : Github Link: https://github.com/uitdevpro1999/halogram Một số package hỗ trợ Chức + Đăng nhập , đăng xuất , tạo tài khoản sử dụng tài khoản Google + Hiển thị gợi ý người chưa theo dõi + Hiển thị danh sách người theo dõi + Nhận thông báo viết ( thả tim , bình luận ) theo dõi + Bài viết: - Tải lên viết ( Hình ảnh , nội dung , địa điểm đăng ) - Xóa viết 34 - Bình luận , Thả tim viết + Người dùng : - Cập nhật thông tin cá nhân - Theo dõi người dùng - Tìm kiếm người dùng Cơ sở liệu - Cơ sở liệu sử dụng: Firebase – Cloud Firestore - Lưu trữ hình ảnh : Firebase Storage 35 Usecase 36 Giao diện Màn hình đăng nhập tạo tên người dùng Màn hình Gợi ý theo dõi Màn hình danh sách theo dõi 37 Màn hình thơng báo Màn hình tìm kiếm người dùng Màn hình Chức tải lên viết 38 Màn hình trang cá nhân chỉnh sửa trang cá nhân Màn hình Bài viết, Xóa viết Bình luận viết 39 ... c Hiển thị điều khiển gốc ứng dụng Flutter? ??….30 d Lưu trữ nội dung Flutter ứng dụng mẹ……………31 Hỗ trợ web flutter? ??……………………………………….32 B Xây dựng ứng dụng minh họa Ứng dụng chia sẻ hình ảnh trực... dụng để xây dựng ứng dụng thương mại phức tạp phù hợp cho ứng dụng tạo mẫu đơn giản Tuy nhiên, tìm kiếm Internet, người ta tìm thấy câu chuyện thành cơng ứng dụng Flutter thực tế 12 So sánh Flutter. .. nhúng điều khiển gốc vào ứng dụng Flutter nhúng Flutter vào ứng dụng có a Platform channels Đối với ứng dụng dành cho thiết bị di động máy tính để bàn, Flutter cho phép bạn gọi vào mã tùy chỉnh thông