Flutter là gì?

Trong thế giới phát triển ứng dụng, người ta có thể phát triển ứng dụng sử dụng nhiều nền tảng khác nhau. Android và iOS là ví dụ của các nền tảng mà ứng dụng di động có thể được phát triển. Cho đến gần đây, khi một công ty cần xây dựng ứng dụng di động nhắm vào nhiều nền tảng, họ phải thuê hai nhóm phát triển. Một nhóm chuyên về Android và nhóm kia chuyên về iOS. Điều này không chỉ làm tăng thời gian phát triển ứng dụng mà còn tăng chi phí cập nhật, chi phí quản lý, v.v.

Giải pháp hiện nay là gì?

Flutter, React Native và Ionic là các khung làm việc đã giải quyết vấn đề phải phát triển nhiều ứng dụng cho nhiều nền tảng bằng cách sử dụng phương pháp phát triển đa nền tảng. Trong phương pháp này, các ứng dụng được phát triển có thể sử dụng trên nhiều nền tảng.

Flutter là gì?

Flutter là một công cụ cho phép xây dựng các ứng dụng gốc đa nền tảng (cho các thiết bị Android hoặc iOS) với một ngôn ngữ lập trình và mã nguồn duy nhất. Hình 1.1 cho thấy cách Flutter có thể được sử dụng để phát triển các ứng dụng trên nhiều nền tảng.

Flutter sử dụng Dart, một ngôn ngữ tập trung vào phát triển giao diện người dùng (UI). Dart được phát triển bởi Google và là một ngôn ngữ lập trình hướng đối tượng. Cú pháp của Dart là sự kết hợp của JavaScript, Java và C++.

Các tính năng và ưu điểm của Flutter

Các tính năng và ưu điểm của Flutter bao gồm:

• Hot reload: Tính năng hot reload cho phép thấy ngay lập tức các thay đổi trong mã bằng cách làm cho chúng hiển thị trong UI. Điều này tăng tốc quá trình làm việc trên khái niệm ứng dụng; hơn nữa, nó cho phép các nhà phát triển sửa lỗi nhanh chóng, tiết kiệm thời gian và công sức.
• Phát triển đa nền tảng: Flutter cho phép các nhà phát triển viết mã có thể hoạt động trên nhiều nền tảng. Hai ứng dụng riêng biệt có thể sử dụng cùng một mã nguồn. Bên cạnh việc chia sẻ mã UI, chính UI cũng có thể được chia sẻ. Điều này làm cho việc duy trì một mã nguồn dễ dàng hơn so với việc duy trì nhiều mã cho nhiều miền khác nhau.
• Thư viện Widget: Mọi thứ trong Flutter đều được định nghĩa là một widget. Widget có thể là bất cứ thứ gì như padding, màu sắc, hoặc menu. Flutter có khả năng tạo các widget phức tạp và tùy chỉnh theo yêu cầu của ứng dụng. Các ví dụ khác bao gồm gói Cupertino và Thiết kế Vật liệu (Material Design) với các bộ widget mang lại trải nghiệm người dùng liền mạch.
• Hiệu suất gốc: Trong Flutter, Google Fuchsia, iOS và Android cung cấp các widget cụ thể cho từng lĩnh vực. Việc tích hợp các widget này vào ứng dụng Flutter cho nhiều chức năng dựa trên vị trí là có thể. Các mã Swift, Java và Objective-C hiện có có thể sử dụng các tính năng gốc như máy ảnh và định vị. Do đó, Flutter dễ dàng tích hợp với các API bên thứ ba.
• Mã nguồn mở: Flutter là một nền tảng mã nguồn mở do Google phát triển. Để tạo các ứng dụng Flutter, các nhà phát triển có thể khám phá nhiều tùy chọn thiết kế. Các ứng dụng dễ sử dụng có thể được tạo ra với sự trợ giúp của các widget Cupertino và Thiết kế Vật liệu (Material Design). Flutter Form là một cộng đồng của những người yêu thích Flutter, họ cùng nhau trả lời các câu hỏi liên quan đến Flutter và thảo luận về chúng. Flutter hoàn toàn miễn phí và có các hướng dẫn chi tiết cùng cộng đồng hỗ trợ trực tuyến.

Sử dụng Flutter để phát triển ứng dụng mang lại những lợi ích sau:

Kiến trúc và các thành phần của Flutter

Flutter framework gồm bốn thành phần chính:

Thư viện nền tảng (Dart Foundation Library)

Thư viện nền tảng chứa các gói cần thiết để viết các ứng dụng Flutter hoàn chỉnh. Thư viện này cung cấp các công cụ và các thư viện cơ bản để xây dựng ứng dụng Flutter.

Flutter Engine

Flutter Engine là một máy ảo (virtual machine) dựa trên C++, cung cấp hỗ trợ cho Dart runtime và các công cụ cốt lõi khác. Do Flutter Engine có tính di động cao, nó có thể được sử dụng để phát triển các ứng dụng di động chất lượng cao.

Widgets

Flutter UI được cấu thành từ các widget, được phân loại theo ngôn ngữ thiết kế của Google và iOS. Hai loại thiết kế chính là Material Design và Cupertino Style. Widgets là các thành phần giao diện người dùng có thể được kết hợp và tùy chỉnh để xây dựng giao diện của ứng dụng.

Embedder

Embedder là thành phần nền tảng cụ thể, cho phép Flutter chạy trên nhiều nền tảng khác nhau như Android, iOS, Windows, macOS, và Linux. Embedder chịu trách nhiệm giao tiếp giữa Flutter và các API nền tảng cụ thể.

Hình bên dưới minh họa chi tiết kiến trúc của Flutter.

Cài đặt Flutter trong Android Studio

Trước khi cài đặt Flutter, cần đảm bảo một số yêu cầu hệ thống cụ thể cho các hệ điều hành.

Dưới đây là liên kết để biết thêm về các yêu cầu hệ thống: https://docs.flutter.dev/get-started/install

Tải xuống SDK Flutter

Khi đã đáp ứng được các yêu cầu, nhà phát triển cần tải xuống Flutter SDK bằng liên kết sau: Windows: https://docs.flutter.dev/get-started/install/windows

Sau khi tải xuống SDK Flutter, bước tiếp theo là đặt đường dẫn SDK, việc này sẽ được tự động thực hiện khi cài đặt SDK Flutter.

Cài đặt và cấu hình trình soạn thảo

Sau đó, cài đặt một trình soạn thảo để cài đặt và chạy ứng dụng Flutter. Ứng dụng Flutter có thể được xây dựng với bất kỳ trình soạn thảo văn bản nào có công cụ dòng lệnh.

Tuy nhiên, nhóm Flutter chính thức đề xuất sử dụng các trình soạn thảo sau:

Các trình soạn thảo được đề xuất:

• Android Studio
• Visual Studio Code
• IntelliJ IDEA

Dưới đây là liên kết để bắt đầu với từng trình soạn thảo trên Windows:

• Android Studio: https://developer.android.com/studio
• Visual Studio Code: https://code.visualstudio.com/
• IntelliJ IDEA: https://www.jetbrains.com/idea/

Cài đặt Android Studio – Windows

Khi đã đáp ứng các yêu cầu hệ thống và thiết lập Flutter SDK, nhà phát triển cần thực hiện theo các bước sau:

Bước 1: Tải xuống Android Studio

Tải xuống Android Studio bằng liên kết sau: https://developer.android.com/studio. Xem Hình bên dưới.

Bước 2: Cài đặt Android Studio

Chấp nhận giấy phép và nhấp vào Tải xuống. Đợi tập tin tải xuống. Tham khảo Hình bên dưới.

Bước 3: Đi tới nơi tải Android Studio. Hình bên dưới hiển thị tệp đã tải xuống trong thư mục Tải xuống.

Bước 4: Bấm đúp vào tệp exe. Đợi trình khởi chạy xuất hiện và nhấp vào ‘Có’ để hiển thị màn hình Thiết lập Android Studio. Hình bên dưới hiển thị Android Studio Màn hình thiết lập.

Bước 5: Nhấp vào Tiếp theo. Sau khi hoàn tất, trình hướng dẫn thiết lập sẽ yêu cầu chọn các thành phần. Chọn các tùy chọn mặc định đã được kiểm tra trước và nhấp vào Tiếp theo. Hình bên dưới cho thấy màn hình dùng để chọn thành phần

Bước 6: Bước tiếp theo là chọn vị trí chứa Android Studio để được cài đặt. Hình bên dưới cho thấy đường dẫn mà Android Studio sẽ hướng tới Cài đặt.

Bước 7: Sau khi chọn đúng ổ đĩa các bạn chọn Start Menu Folder hoặc phím tắt và nhấp vào Cài đặt. Hình bên dưới hiển thị menu lựa chọn ‘Thư mục Menu Bắt đầu’.

Bước 8: Sau khi cài đặt xong nhấn Next để hoàn tất. Hình bên dưới cho thấy màn hình cài đặt cuối cùng.

Bước 9: Cuối cùng, nhấp vào Hoàn tất và khởi động Android Studio. Tham khảo Hình bên dưới.

Bước 10: Sau khi quá trình cài đặt hoàn tất, hãy thiết lập Trình quản lý SDK. Hình bên dưới cho biết cách điều hướng đến Trình quản lý SDK Android Studio.

Bước 11: Sau khi hoàn tất, hãy cài đặt Plugin – Flutter và Dart. Hình bên dưới cho thấy vị trí để chọn tùy chọn plugin và Hình tiếp theo hiển thị thị trường từ đâu các plugin cần thiết có thể được tải xuống.

Bước 12: Sau khi tải xuống plugin, nhấn Khởi động lại IDE để khởi chạy lại IDE. Hình bên dưới minh họa cách khởi động lại IDE sau khi tải plugin xuống.

Hiện nay. Flutter đã sẵn sàng để sử dụng trong một dự án/ứng dụng. Sử dụng Tệp > Mới > Dự án Flutter mới để tạo một dự án mới.