Chúng ta có gì mới trong Flutter 2?

Flutter đã chuyển đổi từ SDK phát triển di động đa nền tảng cho Android / iOS thành một công cụ cho phép bạn chạy cùng một đoạn mã nguyên bản trong trình duyệt trên Windows, Linux và macOS. Với Flutter 2, việc phát triển Flutter không di động đang bắt đầu trở nên khả thi hơn.

Năm ngoái, tôi đã viết hai bài báo ở đây trên Tạp chí Smashing về việc sử dụng Flutter trên nền tảng web và máy tính để bàn. Bài viết đầu tiên là giới thiệu chung về phát triển web và máy tính để bàn, và tập trung vào việc xây dựng giao diện người dùng đáp ứng; bài viết thứ hai nói về những thách thức bạn có thể gặp phải khi cố gắng phát triển một ứng dụng Flutter chạy trên nhiều nền tảng.

Hồi đó, nhóm Flutter chưa coi hỗ trợ của Flutter cho các nền tảng di động là ổn định và đã sẵn sàng sản xuất, nhưng mọi thứ giờ đã thay đổi.

Flutter 2 Là Đây

Vào ngày 3 tháng 3, Google đã tổ chức sự kiện Flutter Engage , nơi Fluter 2.0 được ra mắt. Bản phát hành này thực sự là một bản phát hành 2.0 đúng nghĩa, với nhiều thay đổi hứa hẹn sẽ làm cho Flutter thực sự sẵn sàng để vượt ra khỏi lĩnh vực phát triển ứng dụng dành cho thiết bị di động.

Thay đổi trọng tâm để hiểu tại sao Flutter 2.0 lại quan trọng là việc phát triển web hiện chính thức là một phần của kênh ổn định và hỗ trợ máy tính để bàn cũng sẽ sớm theo sau trên kênh ổn định. Trên thực tế, nó hiện được kích hoạt ở dạng ứng viên phát hành dưới dạng ảnh chụp nhanh bản beta phát hành sớm trong kênh ổn định.

Trong thông báo, Google không chỉ đưa ra gợi ý về tương lai của Flutter sẽ như thế nào. Cũng có những ví dụ thực tế về cách các công ty lớn đang làm việc trên các ứng dụng Flutter để thay thế các ứng dụng hiện có của họ bằng những ứng dụng hoạt động tốt hơn và cho phép các nhà phát triển làm việc hiệu quả hơn. Ví dụ: nhà sản xuất ô tô lớn nhất thế giới, Toyota, hiện sẽ xây dựng hệ thống thông tin giải trí trên ô tô của họ bằng Flutter.

Một thông báo thú vị khác – thông báo này cho thấy Flutter đang cải thiện nhanh như thế nào với tư cách là một SDK đa nền tảng – là thông báo của Canonical rằng, ngoài việc phát triển trình cài đặt Ubuntu mới bằng Flutter, họ cũng sẽ sử dụng Flutter làm tùy chọn mặc định để xây dựng các ứng dụng dành cho máy tính để bàn.

Họ cũng đã phát hành một phiên bản Flutter của chủ đề Yaru của Ubuntu , mà chúng tôi sẽ sử dụng ở phần sau của bài viết để xây dựng một ứng dụng Flutter dành cho máy tính để bàn trông hoàn hảo như ở nhà trong máy tính Ubuntu, cũng sử dụng thêm một số tính năng Flutter mới. Bạn có thể xem qua thông báo về Flutter 2 của Google để có được bức tranh hoàn chỉnh hơn.

Hãy xem xét một số thay đổi kỹ thuật đối với Flutter đã đưa vào kênh ổn định với phiên bản 2.0 và xây dựng một ứng dụng máy tính để bàn mẫu rất đơn giản với Flutter trước khi chúng tôi đưa ra một số kết luận về những loại dự án cụ thể mà chúng tôi có thể và không thể sử dụng Flutter kể từ bây giờ.

Các Thay Đổi Về Khả Năng Sử Dụng Chung Cho Các Thiết Bị Lớn Hơn

Theo thông báo, nhiều thay đổi đã được thực hiện đối với Flutter để hỗ trợ tốt hơn cho các thiết bị không phải là thiết bị di động.

Ví dụ: một ví dụ rõ ràng về thứ cần thiết cho các ứng dụng web và máy tính để bàn và cho đến bây giờ phải được thực hiện bằng cách sử dụng các gói của bên thứ ba hoặc bằng cách tự triển khai nó là thanh cuộn .

Giờ đây, có một phần mềm tích Scrollbarhợp có thể phù hợp ngay với ứng dụng của bạn, tìm kiếm chính xác cách thanh cuộn sẽ trông như thế nào trong nền tảng cụ thể: có hoặc không có rãnh, với khả năng cuộn bằng cách nhấp vào rãnh chẳng hạn, rất lớn. nếu bạn muốn người dùng của mình cảm thấy như ở nhà ngay từ đầu khi sử dụng ứng dụng Flutter của bạn. Bạn cũng có thể chủ đề và tùy chỉnh nó.

Có vẻ như tại một thời điểm nào đó, Flutter sẽ tự động hiển thị các thanh cuộn phù hợp khi nội dung của ứng dụng có thể cuộn được.

Trong khi đó, bạn chỉ có thể bọc bất kỳ chế độ xem có thể cuộn nào bằng tiện ích thanh cuộn mà bạn chọn và tạo một ScrollControllerđể thêm làm controllercho cả thanh cuộn và tiện ích có thể cuộn (trong trường hợp bạn chưa bao giờ sử dụng a ScrollController, bạn sử dụng chính xác như TextEditingControllercho a TextField). Bạn có thể xem ví dụ về việc sử dụng thanh cuộn Material thông thường ở phía dưới bài viết này trong ví dụ về ứng dụng dành cho máy tính để bàn.

Thay Đổi Web Flutter

Flutter cho web đã ở dạng khá khả dụng, nhưng có những vấn đề về hiệu suất và khả năng sử dụng khiến nó không bao giờ có cảm giác bóng bẩy như Flutter dành cho thiết bị di động. Với việc phát hành Flutter 2.0, đã có nhiều cải tiến cho nó, đặc biệt là về hiệu suất .

Mục tiêu tổng hợp, trước đây rất thử nghiệm và khó sử dụng để hiển thị ứng dụng của bạn (với WebAssembly và Skia), giờ được gọi là CanvasKit . Nó đã được tinh chỉnh để mang lại trải nghiệm nhất quán và hiệu quả khi chuyển từ chạy ứng dụng Flutter nguyên bản trên thiết bị di động sang chạy trên trình duyệt.

Bây giờ, theo mặc định, ứng dụng của bạn sẽ hiển thị bằng CanvasKit cho người dùng web trên máy tính để bàn và bằng trình kết xuất HTML mặc định (cũng đã có cải tiến, nhưng không tốt bằng CanvasKit) cho người dùng web di động.

Nếu bạn đã cố gắng sử dụng Flutter để xây dựng các ứng dụng web, bạn có thể nhận thấy rằng nó không đặc biệt trực quan khi có một cái gì đó đơn giản như một siêu liên kết. Ít nhất bây giờ, bạn có thể tạo các siêu liên kết giống như cách bạn làm khi sử dụng HTML, bằng cách sử dụng Linklớp.

Đây thực sự không phải là một bổ sung cho chính Flutter, mà là một bổ sung gần đây cho gói của Googleurl_launcher . Bạn có thể tìm thấy mô tả đầy đủ và ví dụ về cách sử dụng Linklớp trong tài liệu tham khảo API chính thức .

Lựa chọn văn bản đã được cải thiện vì bây giờ điểm xoay tương ứng với nơi người dùng bắt đầu chọn văn bản chứ không phải cạnh trái của SelectableTextcâu hỏi. Ngoài ra, bây giờ các tùy chọn Sao chép / Cắt / Dán đã tồn tại và hoạt động bình thường.

Tuy nhiên, lựa chọn văn bản vẫn không phải là điểm quan trọng hàng đầu vì không thể chọn văn bản trên các SelectableTexttiện ích con khác nhau và văn bản có thể chọn vẫn không phải là mặc định, nhưng chúng ta sẽ nói về điều này cũng như các nhược điểm nổi bật khác của web Flutter (thiếu hỗ trợ SEO, đầu tiên và quan trọng nhất) trong phần kết luận của bài viết này.

Các Thay Đổi Trên Màn Hình Flutter  #

Khi tôi viết về phát triển web và máy tính để bàn với Flutter vào năm ngoái , tôi chủ yếu tập trung vào việc xây dựng các ứng dụng web với Flutter, vì phát triển máy tính để bàn vẫn được coi là rất thử nghiệm (thậm chí không phải trên betakênh). Tuy nhiên, hiện tại, hỗ trợ máy tính để bàn Flutter sẽ sớm tiếp nối hỗ trợ web và sẽ ổn định.

Hiệu suất và độ ổn định đã được cải thiện khá nhiều và những cải tiến về khả năng sử dụng chung cho các thiết bị lớn hơn hoạt động bằng chuột và bàn phím mang lại lợi ích cho các ứng dụng web rất nhiều cũng có nghĩa là các ứng dụng dành cho máy tính để bàn Flutter giờ đây có thể sử dụng được nhiều hơn.

Vẫn còn thiếu công cụ cho các ứng dụng dành cho máy tính để bàn và vẫn còn nhiều lỗi tồn đọng khá nghiêm trọng, vì vậy đừng cố sử dụng nó cho dự án ứng dụng dành cho máy tính để bàn tiếp theo dành cho phân phối công khai.

Ví Dụ Về Ứng Dụng Dành Cho Máy Tính Để Bàn Được Xây Dựng Bằng Flutter

Mặc dù vậy, hỗ trợ máy tính để bàn Flutter hiện khá ổn định và có thể sử dụng được, và nó chắc chắn sẽ trở nên tốt hơn trong tương lai giống như toàn bộ Flutter đã trở nên tốt hơn cho đến bây giờ, vì vậy hãy thử xem nó hoạt động như thế nào ! Bạn có thể tải xuống toàn bộ ví dụ mã trên repo GitHub .

Ứng dụng chúng tôi sẽ xây dựng là ứng dụng rất đơn giản sau đây. Chúng tôi có điều hướng thanh bên cùng với một số mục nội dung cho từng phần điều hướng.

Điều đầu tiên cần làm là tìm ra sự phụ thuộc của bạn .

Trước hết, bạn phải bật tính năng phát triển máy tính để bàn Flutter bằng cách sử dụng lệnh

flutter config –enable-${OS_NAME}-desktop

Sao chép

nơi bạn sẽ thay thế ${OS_NAME}bằng hệ điều hành máy tính để bàn của bạn lựa chọn windows, linuxhoặc macos. Đối với ví dụ này, tôi sẽ sử dụng Linux vì chúng tôi sẽ sử dụng chủ đề Ubuntu.

Ngoài ra còn có các phụ thuộc khác cần thiết để xây dựng ứng dụng gốc cho từng nền tảng, ví dụ: trên Windows, bạn cần Visual Studio 2019, trên macOS, bạn cần Xcode và CocoaPods và bạn có thể tìm thấy danh sách cập nhật các phụ thuộc Linux trên trang web chính thức của Flutter .

Sau đó, tạo một dự án Flutter, chạy:

flutter create flutter_ubuntu_desktop_example

Sao chép

Sau đó, chúng tôi phải lấy chính chủ đề (phần phụ thuộc duy nhất của ứng dụng của chúng tôi) bằng cách thêm yaruvào ứng dụng của bạn dependenciestrong pubspec.yaml(trong phần gốc của cây nguồn):

dependencies:

yaru: ^0.0.0-dev.8

flutter:

sdk: flutter

Sao chép

Sau đó, hãy chuyển đến lib/main.dart, nơi mã của ứng dụng của chúng ta nằm.

Đầu tiên, chúng tôi nhập những thứ chúng tôi cần. Trong trường hợp này, chúng tôi sẽ nhập thư viện Flutter Material Design thông thường và chủ đề Yaru (chúng tôi sẽ chỉ sử dụng chủ đề ánh sáng cho ví dụ này, vì vậy chúng tôi sẽ chỉ showmột đối tượng đó trong gói Yaru):

import ‘package:flutter/material.dart’;

import ‘package:yaru/yaru.dart’ show yaruLightTheme;

Sao chép

Thay vì có một lớp ứng dụng riêng biệt, chúng tôi sẽ gọi MaterialApptrực tiếp các trình cấu trúc mainkhi gọi runApp, vì vậy đó là nơi chúng tôi đặt chủ đề của ứng dụng, sẽ là chủ đề Yaru, cụ thể hơn là chủ đề ánh sáng được gọi là yaruLightTheme:

void main() =>

runApp(MaterialApp(

theme: yaruLightTheme,

home: HomePage(),

));

Sao chép

Điều HomePagesắp xảy ra là a StatefulWidget, nắm giữ dữ liệu mà chúng tôi sẽ hiển thị với điều kiện là nó không thể thay đổi (hãy nhớ rằng các widget luôn bất biến, khả năng thay đổi được xử lý trong Statea StatefulWidget):

class HomePage extends StatefulWidget {

final dataToShow = {

“First example data”: [

“First string in first list item”,

“Second in first”,

“Example”,

“One”

],

“Second example”: [

“This is another example”,

“Check”,

“It”,

“Out”,

“Here’s other data”

],

“Third example”: [

“Flutter is”,

“really”,

“awesome”,

“and”,

“it”,

“now”,

“works”,

“everywhere,”,

“this”,

“is”,

“incredible”,

“and”,

“everyone”,

“should”,

“know”,

“about”,

“it”,

“because”,

“someone”,

“must”,

“be”,

“missing”,

“out”,

“on”,

“a lot”

]

}.entries.toList();

 

@override

createState() => HomePageState();

}

Các Thay Đổi Flutter Khác

Ngoài ra còn có một vài thay đổi cũng ảnh hưởng đến sự phát triển di động với Flutter, và đây chỉ là một số lựa chọn ngắn gọn về một số trong số đó.

Một tính năng mà rất nhiều người trong chúng ta, những nhà phát triển Flutter, mong muốn là hỗ trợ tốt hơn cho quảng cáo Admob và cuối cùng nó đã được đưa vào google_mobile_adsgói chính thức . Một cái khác là autocomplete; có một Autocompletewidget material cho nó , cũng như một RawAutocompletewidget có thể tùy chỉnh hơn .

Việc bổ sung Linkmà chúng ta đã thảo luận trong phần về phát triển web thực sự áp dụng cho tất cả các nền tảng , mặc dù những tác động của nó sẽ được cảm nhận nhiều nhất bởi những người làm việc trên các dự án web Flutter.

CÁC THAY ĐỔI NGÔN NGỮ DART GẦN ĐÂY

Điều quan trọng là phải biết những thay đổi đã được thực hiện đối với ngôn ngữ Dart có ảnh hưởng đến sự phát triển ứng dụng Flutter.

Đặc biệt, Dart 2.12 mang đến hỗ trợ khả năng tương tác ngôn ngữ C (được mô tả chi tiết và có hướng dẫn cho các nền tảng khác nhau trên trang web chính thức của Flutter ); đồng thời, âm thanh null-safetyđã được thêm vào kênh phát hành Dart ổn định.

null-safety

Thay đổi lớn nhất được thực hiện đối với Dart là sự ra đời của âm thanh null-safetycho thấy nó ngày càng được hỗ trợ nhiều hơn từ các gói của bên thứ ba cũng như các thư viện và gói do Google phát triển.

Null safe mang đến tối ưu hóa trình biên dịch và giảm nguy cơ xảy ra lỗi thời gian chạy, vì vậy, mặc dù ngay bây giờ tùy chọn hỗ trợ nó, điều quan trọng là bạn phải bắt đầu ít nhất là hiểu cách làm cho ứng dụng của bạn an toàn.

Tuy nhiên, hiện tại, đó có thể không phải là một lựa chọn cho bạn vì không phải tất cả các gói Pub đều hoàn toàn không an toàn và điều đó có nghĩa là nếu bạn cần một trong những gói đó cho ứng dụng của mình, bạn sẽ không thể tận dụng các lợi ích trên null-an toàn.

 

Rút Ra Kết Luận: Chúng Ta Có Thể Làm Gì Với Flutter 2?

Khi Flutter tiếp tục phát triển, ngày càng có nhiều thứ chúng ta có thể làm với nó, nhưng vẫn không hợp lý khi nói rằng Flutter có thể được sử dụng cho bất kỳ dự án phát triển ứng dụng nào.

Về mặt thiết bị di động, không chắc bạn sẽ gặp phải thứ gì đó mà Flutter không tuyệt vời vì nó đã được hỗ trợ ngay từ đầu và nó đã được đánh bóng. Hầu hết những thứ bạn cần đều đã có sẵn.

Mặt khác, web và máy tính để bàn vẫn chưa hoàn thiện.

Máy tính để bàn vẫn còn một chút lỗi và các ứng dụng Windows (là một phần quan trọng trong quá trình phát triển máy tính để bàn) vẫn đòi hỏi nhiều công việc trước khi chúng trông đẹp. Tình hình tốt hơn trên Linux và macOS chỉ ở một mức độ nào đó.

Web ở một nơi tốt hơn nhiều so với máy tính để bàn . Bạn có thể xây dựng các ứng dụng web phong phú, nhưng hầu như bạn vẫn bị giới hạn ở các ứng dụng một trang và Ứng dụng web tiến bộ. Chúng tôi chắc chắn vẫn không muốn sử dụng nó cho các ứng dụng tập trung vào nội dung, nơi cần khả năng lập chỉ mục và SEO.

Các ứng dụng tập trung vào nội dung có lẽ sẽ không tuyệt vời như vậy vì lựa chọn văn bản vẫn chưa phải là hàng đầu, như chúng ta đã thấy trong phần về trạng thái hiện tại của Flutter cho web.

Tuy nhiên, nếu bạn cần phiên bản web của ứng dụng Flutter của mình, Flutter dành cho web có thể sẽ phù hợp, đặc biệt là vì đã có một lượng lớn các gói tương thích với web và danh sách luôn tăng lên.

Nguồn: https://www.smashingmagazine.com/2021/03/flutter2-stable-mobile-web-desktop-development-native-speed-one-codebase/