Google เปิดตัว Flutter 2: มีอะไรใหม่ในนั้น

เผยแพร่แล้ว: 2021-04-02

Google ได้เปิดตัว Flutter เวอร์ชัน 2.0 ซึ่งเป็นชุดพัฒนา UI แบบโอเพนซอร์สที่ช่วยให้ผู้สร้างแอปสามารถสร้างแอปพลิเคชันข้ามแพลตฟอร์มได้ การอัปเกรดเน้นฟีเจอร์ชุดใหม่ทั้งหมดและการพกพาที่ได้รับการปรับปรุงของ Flutter เพื่อรองรับแอปบนแพลตฟอร์มที่หลากหลาย

วันนี้เราจะมาสำรวจสิ่งที่ Flutter 2 นำเสนอ อ่านบล็อกจนจบ

Flutter 2: ภาพรวมที่สมบูรณ์

การสนับสนุนทางเว็บ

การสนับสนุนเว็บระดับไฮเอนด์ของ Flutter เป็นการประกาศที่สำคัญที่สุดในงานเปิดตัว Flutter 2 ที่ Flutter Engage ก่อนหน้านี้ รากฐานของเว็บนั้นเน้นที่เอกสารเป็นหลัก ขณะนี้ API แพลตฟอร์มที่หลากหลายช่วยอำนวยความสะดวกในการพัฒนาแอปพลิเคชันที่ซับซ้อนโดยใช้ Paint APIs กราฟิก 2D และ 3D ที่เร่งด้วยฮาร์ดแวร์ และรูปแบบที่ยืดหยุ่น

Flutter 2 ให้การสนับสนุนเว็บที่เสถียรซึ่งให้ประสบการณ์บนเว็บเหมือนกับที่สามารถทำได้บนมือถือ ผู้เชี่ยวชาญด้านบริการพัฒนาแอพมือถือสามารถสร้างแอพสำหรับ Android, iOS และเบราว์เซอร์ได้โดยใช้ codebase เดียวกัน เป็นไปได้ที่จะคอมไพล์โค้ด Flutter ที่มีอยู่ซึ่งเขียนด้วยภาษา Dart ให้เป็นประสบการณ์เว็บที่ยอดเยี่ยม เพราะด้วย Flutter 2 เว็บเป็นเพียงอุปกรณ์เป้าหมายอื่นสำหรับแอปของคุณ

รุ่นใหม่มุ่งเน้นไปที่ 3 สถานการณ์ของแอป:

  • แอปหน้าเดียว (SPA)
  • เว็บแอปโปรเกรสซีฟ (PWA)
  • นำแอพมือถือที่ใช้ Flutter ที่มีอยู่มาสู่เว็บและมอบประสบการณ์เดียวกัน

Flutter ไม่ถ่ายโอนไปยังวิดเจ็ต HTML ที่เทียบเท่า ในทางกลับกัน เว็บเอ็นจิ้นของ Flutter มีตัวเลือกระหว่างตัวสร้างภาพสองตัว:

  1. ตัวแสดงภาพ CanvasKit ที่ใช้ WebGL และ WebAssembly เพื่อแสดงคำสั่งระบายสีของ Skia บนผืนผ้าใบของเบราว์เซอร์
  2. ตัวแสดง HTML ที่ได้รับการปรับให้เหมาะสมสำหรับความเข้ากันได้และขนาดในวงกว้าง

การสาธิต Flutter Plasma ยังถูกสร้างขึ้นเพื่อแสดงความสะดวกในการสร้างประสบการณ์กราฟิกบนเว็บที่ซับซ้อนด้วย Dart ที่สามารถทำงานได้อย่างราบรื่นบนมือถือและเดสก์ท็อป

ชุมชนยังได้เพิ่มคุณลักษณะเฉพาะบางอย่างของเว็บ เช่น การป้อนข้อความอัตโนมัติ รายการ PWA และการควบคุม URL การกำหนดเส้นทางและแถบที่อยู่

การสนับสนุนเดสก์ท็อป

มันยังอยู่ในสถานะเบต้า เวอร์ชันเสถียรอาจเปิดตัวในปลายปีนี้ อย่างไรก็ตาม เรามาดูกันดีกว่าว่ามีอะไรให้บ้าง

สำหรับเบราว์เซอร์เดสก์ท็อป ชุมชนได้เพิ่มแป้นพิมพ์ลัด แถบเลื่อนแบบโต้ตอบ รองรับโปรแกรมอ่านหน้าจอเพื่อให้เข้าถึงได้ง่ายบน Chrome OS, Windows และ macOS และปรับปรุงความหนาแน่นของเนื้อหาเริ่มต้นในโหมดเดสก์ท็อป

Google ได้ทำการปรับปรุงหลายอย่าง โดยนำเดสก์ท็อป Flutter มาสู่คุณภาพที่ยอดเยี่ยม ทำให้มั่นใจได้ว่าการแก้ไขข้อความจะมอบประสบการณ์การใช้งานแบบเนทีฟบนแต่ละแพลตฟอร์มที่รองรับ ผสานรวมคุณสมบัติพื้นฐาน เช่น จุดเปลี่ยนการเลือกข้อความ ฯลฯ นอกจากนี้ยังเพิ่มเมนูบริบทในตัวไปยัง TextField และ วิดเจ็ต TextFormField สำหรับภาษาการออกแบบ Cupertino และ Material เพิ่มจุดจับในวิดเจ็ต ReorderableListView

วิดเจ็ตแถบเลื่อนที่อัปเดตมีคุณสมบัติที่น่าสนใจมากมายที่คุณอาจใช้บนเดสก์ท็อป Flutter 2 ยังอนุญาตให้มีการจัดการอาร์กิวเมนต์บรรทัดคำสั่งสำหรับแอพ Flutter ด้วยวิธีนี้ สิ่งต่างๆ เช่น การดับเบิลคลิกที่ไฟล์ข้อมูลใน Windows File Explorer สามารถใช้เปิดไฟล์ในแอปได้

Flutter Fix

Flutter Fix เป็นคอลเลกชั่นของสิ่งต่าง ๆ มีบรรทัดคำสั่งพิเศษของเครื่องมือ Dart CLI ที่เรียกว่า Dart Fix ช่วยในการค้นหารายการ API ที่เลิกใช้แล้วและอัปเกรดโค้ดด้วยสิ่งเหล่านี้ นอกจากนี้ยังอนุญาตให้เข้าถึงรายการการแก้ไขที่สามารถเข้าถึงได้ซึ่งบรรจุด้วย Flutter SDK

นอกจากนี้ยังมีชุดส่วนขยาย Flutter ที่อัปเดตสำหรับ Android Studio IDE, VScode และ IntelliJ ที่สามารถแสดงรายการโซลูชันที่เข้าถึงได้ที่คล้ายกันและช่วยให้นักพัฒนาเปลี่ยนรหัสเพียงแค่ใช้เมาส์

พกพาสะดวก

Google ไฮไลท์ 3 ทีมล่าสุดที่นำเสนอความสามารถในการพกพาสูงสุดของ Flutter

ประการแรก Microsoft จะขยายการสนับสนุน Flutter นอกเหนือจากความร่วมมือล่าสุดในการนำเสนอการสนับสนุน Windows คุณภาพระดับพรีเมียมใน Flutter แล้ว Microsoft ยังจะสนับสนุนกลไก Flutter ที่ช่วยอำนวยความสะดวกในการพัฒนาแอปสำหรับอุปกรณ์ Android แบบพับได้

ประการที่สอง Canonical ร่วมมือกับ Google เพื่อนำ Flutter มาสู่เดสก์ท็อป จะสนับสนุนการพัฒนาแอพและการปรับใช้บน Linux Canonical สัญญาว่าจะมอบประสบการณ์ที่ยอดเยี่ยมในการกำหนดค่าฮาร์ดแวร์หลายอย่าง

สุดท้ายนี้ Toyota ผู้ผลิตรถยนต์ชั้นนำได้ประกาศใช้กลยุทธ์ที่แปลกใหม่เพื่อนำเสนอประสบการณ์ดิจิทัลยุคหน้าแก่รถยนต์ด้วยการสร้างระบบสาระบันเทิงต่างๆ ที่ Flutter เปิดใช้งาน โตโยต้าพยายามจ้างนักพัฒนา Flutter เนื่องจากระบบสัมผัสระดับสมาร์ทโฟนของ Flutter การทำซ้ำอย่างรวดเร็ว การยศาสตร์ของนักพัฒนา และประสิทธิภาพสูงที่สม่ำเสมอ API แบบฝังตัวของ Flutter จะช่วยให้ Toyota ปรับแต่ง Flutter และตรงตามข้อกำหนดของการสร้างระบบสาระบันเทิงที่ทันสมัย

Add-to-App

Flutter 2 มุ่งหวังที่จะลดภาระงานของนักพัฒนาในหน่วยงานพัฒนาแอพทุกแห่งในขณะเดียวกันก็รับประกันผลลัพธ์คุณภาพสูง Add-to-App เป็นอีกคุณสมบัติหนึ่งที่เน้นเป้าหมายนั้น

นักพัฒนาสามารถเพิ่ม Flutter ลงในแอพ Android หรือ iOS ที่มีอยู่ได้ คุณลักษณะ Add-to-App เป็นวิธีที่ยอดเยี่ยมในการนำโค้ด Flutter มาใช้ซ้ำในทั้งสองแพลตฟอร์มในขณะที่จัดเก็บฐานข้อมูลดั้งเดิมในปัจจุบัน ด้วยการเปลี่ยนแปลงนี้ Google แนะนำให้รวม Flutter engine ในแอปที่มาพร้อมเครื่อง

Flutter Folio

ดังที่เราได้กล่าวไปแล้ว Flutter รองรับ 3 แพลตฟอร์ม – Android, iOS และเว็บ และอีก 3 รุ่นในรุ่นเบต้า – Windows, Linux และ macOS เป็นไปได้อย่างไรที่จะสร้างแอปที่เปลี่ยนรูปแบบต่างๆ (หน้าจอขนาดเล็ก ขนาดใหญ่ และขนาดกลาง) สำนวนต่างๆ (เว็บ มือถือ และเดสก์ท็อป) และโหมดป้อนข้อมูลหลายโหมด (แป้นพิมพ์ เมาส์ และการสัมผัส)

Flutter Folio ให้คำตอบสำหรับคำถามนี้

Flutter Folio เป็นแอปสมุดภาพที่ได้รับการออกแบบมาเพื่อแสดงความสามารถของ Flutter ในการสร้างแอปพลิเคชันที่ทำงานได้อย่างราบรื่นบนทุกแพลตฟอร์มและอุปกรณ์: Android, iOS, Mac, Windows, Linux และเว็บ เป็นตัวอย่างที่สมบูรณ์แบบของแอปที่ปรับเปลี่ยนได้ ซึ่งสร้างขึ้นโดยความร่วมมือกับ gskinner และทีม Flutter

Flutter DevTools

Flutter DevTools ใช้สำหรับดีบักแอพ Flutter มีการแนะนำคุณลักษณะใหม่ที่มุ่งเน้นไปที่ปัญหาใดๆ แม้กระทั่งก่อนที่จะเปิดตัว DevTools คือความสามารถของ IntelliJ, Android Studio หรือ Visual Studio Code เพื่อสังเกตเมื่อใดก็ตามที่มีข้อยกเว้นและเสนอให้นำเสนอใน DevTools เพื่อเริ่มต้นกระบวนการดีบัก

ขณะเรียกใช้ DevTools ป้ายแสดงข้อผิดพลาดใหม่บนแท็บจะช่วยติดตามปัญหาต่างๆ ในแอป

ใน DevTools มีการเพิ่มฟังก์ชันใหม่ที่ช่วยให้มองเห็นภาพได้อย่างง่ายดายด้วยความละเอียดสูงกว่าที่เป็นจุดเด่น ช่วยลดการใช้หน่วยความจำเพิ่มเติมและขนาดแอป นักพัฒนาสามารถอนุญาตให้ Invert Oversized Images ใน Flutter Inspector เปิดคุณสมบัตินี้ได้

Google ยังได้เพิ่มความสามารถในการแสดงรูปแบบคงที่ ซึ่งช่วยให้นักพัฒนาแก้ไขข้อบกพร่องของเลย์เอาต์ประเภทต่างๆ ได้

คุณสมบัติอื่นๆ ที่มีใน Flutter DevTools 2 มีดังต่อไปนี้:

  • มุมมองประสิทธิภาพถูกเปลี่ยนชื่อเป็น CPU Profiler แล้ว ในทำนองเดียวกัน มุมมองไทม์ไลน์จะเปลี่ยนชื่อเป็น ประสิทธิภาพ การเปลี่ยนแปลงจะเน้นถึงฟังก์ชันการทำงานที่มีให้
  • แผนภูมิมุมมองหน่วยความจำใหม่มีขนาดเล็กลง ใช้งานง่ายขึ้น และเร็วขึ้น รวมโฮเวอร์การ์ดใหม่ที่อธิบายกิจกรรมในเวลาที่กำหนด
  • ฟังก์ชันการค้นหาและการกรองจะถูกเพิ่มลงในแท็บการบันทึก
  • ข้อมูล FS เฉลี่ยและการปรับปรุงความสามารถในการใช้งานต่างๆ รวมอยู่ในแผนภูมิ Flutter Frames
  • ตารางเวลาจะรวมอยู่ในแผนภูมิเปลวไฟของ CPU Profiler
  • แบบฟอร์ม Tracklogs เริ่มต้นขึ้นเพื่อให้นักพัฒนาสามารถตรวจสอบประวัติการบันทึกทั้งหมดเมื่อเริ่มต้น
  • คำขอเครือข่ายที่ไม่สำเร็จจะถูกเรียกออกมาในตัวสร้างโปรไฟล์เครือข่ายเพื่อทำการแก้ไขทันที

โฆษณา Google Mobile สำหรับ Flutter

Google ประกาศเปิดตัว Google Mobile Ads สำหรับ Flutter รุ่นเบต้า SDK ใหม่ทำงานได้ดีกับ AdMob และ AdManager ในการนำเสนอรูปแบบโฆษณาที่แตกต่างกัน โดยผสมผสานโฆษณาแบนเนอร์ เนทีฟ โฆษณาคั่นระหว่างหน้า และโฆษณาวิดีโอที่มีการให้รางวัล

Google ยังได้ประกาศการอัปเดตต่างๆ ของปลั๊กอิน Flutter สำหรับบริการ Firebase ที่สำคัญ เช่น Cloud Messaging, Cloud Firestore, Cloud Function, Authentication, Cloud Storage, Crashlytics, การรวมความช่วยเหลือเพื่อความปลอดภัยที่เป็นโมฆะของเสียง ตลอดจนการอัปเดต Cloud Messaging Package

โผ2.12

นี่เป็นอีกหนึ่งการเปิดเผยที่สำคัญของ Google Dart 2.12 รองรับความปลอดภัยที่เป็นโมฆะ มีศักยภาพที่จะลบข้อยกเว้นการอ้างอิงที่เป็นโมฆะ วิธีนี้จะช่วยให้มั่นใจได้ในการพัฒนาและรันไทม์ว่าประเภทสามารถมีค่าว่างได้หากนักพัฒนาเลือกอย่างชัดแจ้ง

การอัปเดตนี้ยังรวมถึงแอปพลิเคชันที่สอดคล้องกันของ FFI (Foreign Function Interface) ช่วยให้นักพัฒนาสามารถใช้ไลบรารี dart:ffi เพื่อเรียกใช้ C API แบบเนทีฟ

ถึงเวลาสรุป

อย่างที่คุณเห็น Flutter 2 กำลังนำการเปลี่ยนแปลงครั้งสำคัญมาสู่ขอบเขตของการพัฒนาแอพ เส้นแบ่งระหว่างการใช้เว็บและแอปบนอุปกรณ์เคลื่อนที่กำลังค่อยๆ จางหายไป เพื่อสนับสนุนประสบการณ์ผู้ใช้ที่ยอดเยี่ยมของแพลตฟอร์มและอุปกรณ์ที่หลากหลาย หากคุณต้องการให้เข้ากับกระแส ได้เวลาสร้างแอปด้วย Flutter 2 แล้ว!