• Không có kết quả nào được tìm thấy

Tìm hiểu Flutter và ứng dụng

Protected

Academic year: 2023

Chia sẻ "Tìm hiểu Flutter và ứng dụng"

Copied!
87
0
0

Loading.... (view fulltext now)

Văn bản

Tìm hiểu website, viết ứng dụng đọc website trên di động, biên dịch hệ thống qua thiết bị iOS và Android. Họ tên sinh viên: Đỗ Điệp Hiệp Chuyên ngành: Công nghệ thông tin Chủ đề tốt nghiệp: Tìm hiểu Flutter và các ứng dụng của nó.

TÌM HIỂU VỀ FLUTTER

Flutter là gì

Điều làm Flutter trở lên độc đáo

Các tính năng của Flutter

Làm mới nóng: Bất cứ khi nào nhà phát triển thực hiện thay đổi đối với mã, những thay đổi đó có thể được nhìn thấy ngay lập tức bằng Làm mới nóng. Đây là một tính năng rất hữu ích, cho phép nhà phát triển sửa lỗi ngay lập tức.

Kiến trúc của Flutter

  • Kiến trúc Flutter
  • Flutter Engine
  • Thư viện nền tảng (Foundation Library)
  • Vật dụng (widget)
  • Thiết kế các widget cụ thể

Điều này có nghĩa là những thay đổi sẽ được phản ánh ngay lập tức trong chính ứng dụng. Các widget trong Flutter về cơ bản là một thành phần UI ảnh hưởng và kiểm soát giao diện của một ứng dụng.

Hình 1.2: Kiến trúc Flutter
Hình 1.2: Kiến trúc Flutter

Giới thiệu về ngôn ngữ lập trình Dart

  • Kiểu dữ liệu
  • Các biến và các hàm
  • Toán tử (Operators)
  • Ra quyết định và các loại vòng lặp
  • Bình luận (Comments)
  • Tiếp tục và Phá vỡ(Continue and Break)
  • Từ khóa Final và Const
  • Lập trình hướng đối tượng

Toán tử logic được sử dụng để kiểm tra tính đúng đắn của một hoặc nhiều biểu thức. Chúng tôi có thể sử dụng từ khóa cuối cùng để giới hạn người dùng.

Một số loại Widgets của Flutter thường gặp

  • Widget Flutter
  • widget hiển thị
  • widget ẩn

TextAlign: Nó được sử dụng để chỉ định cách văn bản của chúng ta được căn chỉnh theo chiều ngang. TextDirection: Nó được sử dụng để xác định cách các giá trị textAlign kiểm soát bố cục văn bản của chúng ta. Tràn: Nó được sử dụng để xác định khi văn bản không vừa với không gian có sẵn.

TextScaleFactor: Nó được sử dụng để xác định tỷ lệ của văn bản được hiển thị bởi tiện ích Văn bản. MaxLines: Điều này được sử dụng để xác định số dòng tối đa được hiển thị trong tiện ích Văn bản. Tiện ích con này được sử dụng để căn giữa tiện ích con có trong nó.

Chúng ta có thể sử dụng thuộc tính căn chỉnh để thay đổi cách căn chỉnh của các widget.

Bảng mô tả các thành phần của widget text:
Bảng mô tả các thành phần của widget text:

Tìm hiểu về bố cụ(layout) giao diện trong Flutter

  • Bố cục
  • Bố cục một widget
  • Các loại widget bố cục

Hãy tìm hiểu cách chúng ta có thể tạo và hiển thị một widget đơn giản. Thành phần bố cục con duy nhất là loại thành phần chỉ có thể có một thành phần trong thành phần bố cục gốc. Sử dụng các tiện ích này đúng cách có thể tiết kiệm thời gian và làm cho mã ứng dụng của bạn dễ đọc hơn.

Vùng chứa: Đây là tiện ích bố cục phổ biến nhất cung cấp các tùy chọn linh hoạt để đặt màu sắc, vị trí và kích thước của tiện ích. Điều này có nghĩa là bạn có thể buộc thành phần con có một ràng buộc cụ thể mà không thay đổi thuộc tính của thành phần con. Nhiều tiện ích là một loại tiện ích có chứa nhiều tiện ích con và bố cục của các tiện ích này là duy nhất.

Nếu chúng ta kết hợp các tiện ích Hàng và Cột thì có thể xây dựng bất kỳ cấp độ nào của tiện ích phức tạp.

Tìm hiểu về Cử chỉ(Gestures) với giao diện trong Flutter

  • Con trỏ
  • Cử chỉ
  • Dò cử chỉ

Có những sự kiện mô tả vị trí và chuyển động của con trỏ như cảm ứng, chuột và bút stylus trên màn hình. Flutter không cung cấp bất kỳ cơ chế nào để hủy hoặc dừng việc gửi các sự kiện con trỏ tiếp theo. Flutter cung cấp một trình nghe widget để nghe các sự kiện con trỏ trực tiếp từ lớp widget.

PointerDownEvents: Cho phép con trỏ tiếp xúc với màn hình tại một vị trí được chỉ định. PointerMoveEvents: Cho phép con trỏ di chuyển từ vị trí này sang vị trí khác trên màn hình. Kéo theo chiều dọc: Cử chỉ này cho phép bạn di chuyển con trỏ theo hướng dọc.

Trong một số trường hợp, có thể có nhiều trình phát hiện cử chỉ tại một vị trí nhất định trên màn hình và sau đó khung sẽ xác định cử chỉ nào sẽ được gọi.

Quản lý State

  • State (Trạng thái) là gì

Điều này có nghĩa là Flutter xây dựng giao diện người dùng bằng cách phản ánh trạng thái hiện tại của ứng dụng. Trạng thái này còn được gọi là Trạng thái UI hoặc trạng thái địa phương. Ở loại trạng thái này, bạn không cần sử dụng các kỹ thuật quản lý trạng thái.

Hàm tạo gọi hàm setState() để thay đổi các biến trạng thái. Đó là một loại trạng thái mà chúng tôi muốn chia sẻ giữa các phần khác nhau của ứng dụng và chúng tôi muốn duy trì giữa các phiên của người dùng. Nó còn được gọi là trạng thái ứng dụng hoặc trạng thái chia sẻ.

Bạn có thể học ví dụ đơn giản nhất về quản lý trạng thái ứng dụng với gói nhà cung cấp.

Hình 1. 9 Sự khác biệt giữa trạng thái ứng dụng và trạng thái tức thời
Hình 1. 9 Sự khác biệt giữa trạng thái ứng dụng và trạng thái tức thời

Tìm hiểu về Navigator và Routing trong Flutter

  • Tạo routes
  • Điều hướng đến route thứ hai bằng phương thức
  • Quay lại route đầu tiên bằng phương thức Navigator.pop ()

Ở đây chúng ta cần hiểu ba khái niệm chính để sử dụng thư viện này. Nó được sử dụng để làm cho người nghe chú ý đến sự thay đổi. Ở đây chúng ta chỉ sử dụng phương thức tifyListener() để thông báo cho người nghe.

Ở đây, phương thức push() thêm một trang/tuyến vào ngăn xếp và sau đó quản lý nó bằng Bộ điều hướng. Một lần nữa, chúng tôi sử dụng lớp MaterialPageRoute, cho phép chuyển đổi giữa các tuyến bằng cách sử dụng hoạt ảnh dành riêng cho nền tảng. Bây giờ chúng ta cần sử dụng phương thức Navigator.pop() để đóng tuyến thứ hai và quay lại tuyến đầu tiên.

Phương thức pop() cho phép chúng ta xóa tuyến đường hiện tại khỏi ngăn xếp do Bộ điều hướng quản lý.

Tìm hiểu về Database trong Flutter

  • Cơ sở dữ liệu SQLite
  • Firebase – NoSQL lưu trữ online

Thay vào đó, nó cung cấp một plugin sqflite để thực hiện tất cả các hoạt động cơ sở dữ liệu giống như thư viện SQLite. Nó cũng cung cấp một phương thức truy vấn nâng cao để lấy thông tin từ cơ sở dữ liệu SQLite. Gói sqflite cung cấp các lớp và hàm để tương tác với cơ sở dữ liệu SQLite.

Bây giờ chúng tôi đã lưu trữ sách trong cơ sở dữ liệu và bạn có thể sử dụng truy vấn để truy xuất một cuốn sách cụ thể hoặc danh sách tất cả các cuốn sách. Để làm điều này, hãy tạo một hàm lấy id và xóa cơ sở dữ liệu để tìm id phù hợp. Qua các bước làm việc với cơ sở dữ liệu SQLite, chúng ta có thể thấy các bước thêm, xóa và chỉnh sửa cơ sở dữ liệu trong Flutter.

Vì cơ sở dữ liệu trực tuyến nên bạn cần chú ý hơn đến cơ sở dữ liệu trên thiết bị (ví dụ: quyền truy cập).

TÌM HIỂU VỀ WEBSITE

  • Website là gì
  • Cấu tạo của 1 website
  • Các loại website và phân loại Website
    • Phân loại website theo cấu trúc website
    • Phân loại website theo quyền sở hữu
    • Phân loại website theo chức năng
    • Phân loại webite theo lĩnh vực hoạt động
  • Tìm hiểu về Website Hợp Tác Xã Nông nghiệp và Du lịch Cộng

Giống như các sản phẩm khác trên thị trường, website cũng bao gồm nhiều loại để đáp ứng tốt nhất các nhu cầu khác nhau của người dùng. Phân loại trang web theo cấu trúc cũng có thể hiểu là loại dữ liệu và cách thức hoạt động của trang web. Đây là lý do tại sao các trang web tĩnh ngày nay không được sử dụng phổ biến.

Loại website này sử dụng HTML, CSS, Javascript, PHP hoặc ASP.NET... Quản trị viên của website động có thể tự do cập nhật thông tin, thêm bớt module, v.v. trên trang một cách đơn giản và nhanh chóng. . Loại website này bao gồm các website thương mại điện tử tổng hợp hoặc các trang bán hàng của một đơn vị, cá nhân cụ thể. Chủ sở hữu trang web này trực tiếp điều hành hoạt động kinh doanh của mình hoặc có thể cho các cửa hàng khác thuê.

Ngày càng có nhiều trang giải trí khác nhau ra đời, nhằm phục vụ nhu cầu thư giãn, giải trí của người dùng và mục tiêu kinh doanh của chủ sở hữu.

Hình 2.1: Mô hình cơ bản về hoạt động của một website trên Internet  Các bước cơ bản để truy cập một trang web trên Internet:
Hình 2.1: Mô hình cơ bản về hoạt động của một website trên Internet Các bước cơ bản để truy cập một trang web trên Internet:

BẢN HƯỚNG DẪN SỬ DỤNG VÀ ỨNG DỤNG

Bản hướng dẫn sử dụng

  • Bản hướng dẫn sử dụng trên hệ điều hành Windows
  • Bản hướng đẫn sử dụng trên hệ điều hành Mac OS

Nhưng để có thể chạy lệnh rung từ Dấu nhắc lệnh, bạn cần cập nhật đường dẫn. Việc bổ sung liên kết này là để khi truy cập từ dấu nhắc lệnh, bạn có thể kiểm tra xem công cụ rung đã được cài đặt đầy đủ hay chưa. Hoặc bạn có thể cài đặt 2 plugin này sau khi cài đặt thiết bị máy ảo cũng như hoàn thiện đầy đủ các công cụ bằng cách truy cập vào cài đặt android studio để cài đặt.).

Chuyển đến menu Cấu hình và chọn Trình quản lý AVD để truy cập phần thiết bị. Với Cửa hàng Play, bạn có thể chọn kích thước, độ phân giải và thiết bị xây dựng của điện thoại, ngoài việc chọn hệ điều hành cho thiết bị Android của mình. Vì Android Studio có thể chạy trên nền tảng Windows và MacOS.

Nó được sử dụng để xây dựng các ứng dụng web, máy chủ, máy tính để bàn và thiết bị di động.

Hình 3.2: Truy cập Advanced system settings
Hình 3.2: Truy cập Advanced system settings

Xây dựng ứng dụng thực nghiệm

  • Webview
  • Splash screen
  • Checking Internet
  • Cấu hình và một số lỗi

Vì vậy mình sẽ xây dựng ứng dụng này để nó có thể chạy trên cả hai thiết bị trên. Màn hình giật gân là gì: đó là trải nghiệm và là thứ đầu tiên người dùng nhìn thấy đối với bất kỳ ứng dụng nào. Hộp thoại này chứa tiêu đề, nội dung, hành động, tiêu đề và nội dung thể hiện các thông tin như lỗi kết nối và không vào được mạng. Action là một widget FlatButton (cho phép người dùng sử dụng nút phẳng). Nhấn Thoát sẽ đóng ứng dụng.

Truy cập android>app>src>Androidmanifest.xml - Thay đổi tên ứng dụng android:label. Lệnh này giúp các ứng dụng cần truy cập mạng. Sau khi được xây dựng, chúng sẽ chạy bình thường và kết nối với mạng. Nếu không, ứng dụng sẽ mất mạng hoàn toàn [8]. Lưu ý: khi cài đặt bạn cần truy cập vào phần quản lý thiết bị để thiết lập độ tin cậy để thiết bị iPhone có thể cài đặt ứng dụng bình thường.

Ngoài ra, tôi đã xây dựng một ứng dụng hoạt động trên cả nền tảng Android và iOS.

Hình ảnh minh họa :
Hình ảnh minh họa :

Hình ảnh

Hình 1.1: Các tính năng của Flutter
Hình 1.2: Kiến trúc Flutter
Hình 1.3: Bảng kiểu dữ liệu trong ngôn ngữ Dart
Bảng mô tả các thành phần của widget text:
+7

Tài liệu tham khảo

Tài liệu liên quan

Giải quyết vấn đề và sáng tạo: Vận dụng kiến thức, hiểu biết, kĩ năng tìm kiếm thông tin để giải ô chữ về an toàn lao động ở các làng nghề; tìm hiểu và đưa ra các cách