web analytics

สรุป Flutter ในงาน Google I/O 2019

สวัสดีผู้อ่านครับ บล็อกนี้ผมจะสรุป session เกี่ยวกับ Flutter ทั้งหมดในงาน Google I/O 2019 ครับ มีเรื่องที่น่าสนใจหลายอย่างเลยละ

เริ่มต้น

เริ่ม session ที่ชื่อว่า Beyond Mobile: Material Design, Adaptable UIs, and Flutter มี speaker 2 คน คือคุณ Will Larche และ คุณ Anthony Robledo ทั้งคู่เป็น
Flutter Engineering for Material Design มาพร้อมกับสูทจัดเต็ม อธิบายเกี่ยวกับการแต่ง UI ใน Flutter

Theme

เขาแนะนำเกี่ยวกับ class สำหรับจัดการ Theme ของ Widget ช่วยให้ปรับแต่งได้หลากหลายขึ้น ซึ่งจะอยู่ใน ThemeData ของ MaterialApp

ยกตัวอย่างการใช้งาน

สำหรับบาง widget จะสามารถนำ Theme class มา warp ได้ด้วย เช่น Slider

ตัวอย่างการปรับแต่ง Slider

Dark theme

ของใหม่ใน Android Q คือเปลี่ยน dark theme ได้ ซึ่งใน Flutter ก็แค่กำหนด darkTheme ใน MaterialApp ว่าให้แสดง theme ไหน

Reorder ListView

แนะนำ Widget ใหม่ สามารถ ลาก-วาง เพื่อเปลี่ยนลำดับของ item ได้ ชื่อว่า ReorderableListView

BottomNavigationBar

เพิ่ม label ให้กับ BottomNavigationBar จากเดิมที่มีแค่ Icon

Range Slider

Slider แบบใหม่ รองรับการทำ Range

Search Bar

Widget ใหม่สำหรับทำ Search Bar ที่รองรับการแสดง recent , history ด้วย

การใช้งานคือใช้ SearchDelegate

ตัวอย่างการทำ suggestion แสดงใน ListView

Semantics

สามารถใส่ semantic ให้กับ Widget ได้โดยหลาย widget จะมี field ชื่อ semanticsLabel หรือจะใช้ Semantics Widget ก็ได้ โดยจะเป็นการใส่ความหมายให้กับ widget เพื่อนำไปใช้ในเรื่องต่างๆ เช่น ช่วยอ่านออกเสียง สำหรับผู้พิการทางสายตา

Adaptive Component

แนะนำการสร้าง UI ให้สามารถรองรับทุก platfrom เช่น กรณี iOS , Android ในหลาย widget มี constructor ที่ชื่อว่า adaptive ที่จะปรับเปลี่ยน UI สำหรับ platform นั้น

สำหรับ Widget ประเภท content จะต้องออกแบบให้ง่ายที่สุด โครงสร้างใกล้เคียงกันมากที่สุด

เพราะว่า Flutter สามารถนำไปรันบนหน้าจอ TV หรือใน หน้าจอเล็กๆของนาฬิกาได้

ซึ่งในแต่ละอุปกรณ์ ระยะของการดูที่เหมาะสมนั้นแตกต่างกัน แต่ขนาดที่ผู้ใช้มองจะเท่ากันในระยะนั้น

วิธีการนึงคือ การใช้ scaleFactor ที่จะเพิ่มขนาดขยายให้กับ scale ทั้งแอป

กรณีที่ต้องการแยกแยะประเภทของอุปกรณ์ เช่น อุปกรณ์แบบพับได้ (Foldable) เราสามารถใช้ DeviceType

แล้วแอปของเราก็จะรองรับการใช้งานบนอุปกรณ์ Foldable แล้ว

นอกจากนี้เราสามารถนำเรื่อง Adaptive ใช้งานร่วมกับ ML Kit เช่น หากเราไม่ได้ดูหน้าจออยู่ให้แสดงแบบนึง แต่เมื่อเราเข้าใกล้หน้าจอก็จะแสดงอีกแบบ

จากนั้น ก็แนะนำการลองเล่น Flutter กับการแสดงแสงไฟกับปุ่มบนกำแพง โดยแสงปุ่มต่างๆบนกำแพงรันอยู่บน Flutter แอป แล้วก็ก่อนปิดท้าย พี่แกก็เล่นมุกว่า “วันนี้ ผมขอประกาศว่า Flutter…. รองรับการใช้งานบนกำแพงแล้วครับ ล้อเล่นน่ะ 5555”

Flutter for Desktop

Session ต่อมา คุณ Emily Fortuna และคุณ Emily Shack (บังเอิญชื่อเหมือนกัน) อธิบายเกี่ยวกับ Flutter ที่รันบน Desktop ได้แล้ว แต่ก็ยังไม่เปิดใช้งานเต็มรูปแบบนะ

โดยเธออธิบายว่า เราสามารถแยกแยะหน้าจอ โดยการใช้ class ที่ชื่อว่า MediaQuery แล้วเช็คจากขนาดความกว้างของหน้าจอ

Keyboard และ Mouse

บน Desktop นั้นจะไม่มี interaction เกี่ยวการ touch แต่จะใช้ mouse และ keyboard จริงๆ ซึ่งเราสามารถดัก event ของการกด keyboard ได้จาก Widget ที่ชื่อว่า RawKeyboardListener

กรณีของการใช้ mouse เช่นการดัก event mouse over ก็สามารถใช้ Widget ที่ชื่อว่า Listener

โดย Flutter สามารถรันบน Platform ของ Desktop ได้ทั้ง MacOS, Windows และ Linux

สถาปัตยกรรมเบื้องหลัง ยังใช้ C++ Flutter engine ก่อนจะไปเรียก embedder ของแต่ละ Platform

Flutter for Web

จากนั้น โปรเจค Hummingbird ซึ่งคือการรัน Flutter บน Website

สถาปัตบกรรมกคือ สร้างตัว Flutter Web engine ครอบ Dart2js complier

การทำงานของมันคือ จะแปลง dart ของเรา เป็น dart สำหรับ HTML,CSS ก่อน แล้วค่อยให้ dart2js แปลงต่อเป็น javascript

package สำหรับ Flutter Web คือ flutter_web

การทำลิงค์ ก็ใช้ route แบบใน Flutter นี่แหละ แน่นอนว่ารองรับ Responsive อยู่แล้ว

Dart

Seession ต่อมา คือ Dart: Productive, Fast, Multi-Platform โดย spearker คือ คุณ
Kevin Moore และ คุณ Bob Nystrom อธิบายถึงข้อดีและแนวทางของภาษา Dart

ซึ่งที่เลือก Dart ก็เพราะว่าทั้งเขียนง่าย เร็ว ประสิทธิภาพ และ Cross-Platfrom

Flutter 1.5 และ Dart 2.3

จากนั้นก็บอกว่าวันนี้ Flutter 1.5 มาแล้วนะ มาพร้อมกับ Dart 2.3 ด้วยละ

ของใหม่ใน Flutter 1.5 นอกจาก Flutter Desktop and Web แล้วก็คือ Dart 2.3 ซึ่งมันจะเปลี่ยนรูปแบบของการเขียน Flutter ไปอีกแบบ เข้าสู่ UI as Code แบบจริงจัง เพราะมันรองรับ Spread operator (…) การใช้ If และ for ใน collection ทำให้เราสามารถเขียน logic ใน collection ของ Widget ได้เลย

Non-Nullable Type

เรายังสามารถเขียน dart แบบตัวแปร non-nullable type ได้แล้ว แบบใน Kotlin หรือ Swift

Dart DevTools

จากนั้นก็แนะนำการใช้ Dart DevTools ช่วยในการ debug Flutter

State Management

Session ถัดมา คือเรื่อง Pragmatic State Management in Flutter โดย speaker คือ คุณ Filip Hracek และคุณ Matt Sullivan งานนี้พูดถึงเรื่อง State Management แบบจริงจังแล้ว ซึ่งเขาได้เล่าประวัติว่า ก่อนหน้านี้ Flutter แนะนำให้ใช้ ScopedModel ในการจัดการ State ซึ่งจะเห็นว่าในหน้าเว็บ official มีเมนูแนะนำ ScopedModel

ต่อมามีวิศวกรคนนึงของ Google คิดค้น BLoC pattern แต่ทางทีม Flutter ก็ยังไม่ได้มีท่าทีสนับสนุน

ทั้งคู่บอกว่า พวกเขานำ ScopeModel มาปรับใช้เป็นแนวทางใหม่ มีความใกล้เคียงกันมาก แต่ดีกว่า โดยใช้ Notifier Provider

ตัวอย่างนี้ จะเป็นแอปที่มี pie chart และ slider สำหรับเปลี่ยนค่าใน pie chart ทั้งสองเป็น Widget ที่อยู่ใน HomePage

เริ่มต้นจากสร้าง Model ของเรา โดยใช้ mixin ที่ชื่อว่า ChangeNotifier การใช้ mixin จะใช้ keyword ว่า with และที่ method ที่เราต้องการอัพเดทให้เรียก notifyListener()

ที่ parent นำ ChangeNotifierProvider มา warp ครอบ Widget โดยมี field builder ที่จะสร้าง model ที่ mixin ChangeNotifier เมื่อสักครู่

มาที่ Slider ซึ่งเป็น Input วิธีการคือ เราจะเรียก ChangeNotifier ผ่าน Provider.of จากนั้นก็เรียกดูค่าและอัพเดทได้เลย

ทางฝั่งของ Output คือ Pie chart จะใช้ Widget ที่ชื่อว่า Consumer ให้แสดง Widget ของเรากับข้อมูลจาก ChangeNotifier

เรียบร้อยแล้ว State Management ด้วย Notifier Provider

โดยเราสามารถใช้ Notifier Provider ร่วมกับ item ใน ListView

หากเราต้องการ custom method dispose เราสามารถใช้ Provider แทน ChangeNotifierProvider

หากเรามี Notifierprovider หลายอัน เราสามารถใช้ MultiProvider ได้

พวกเขายังแนะนำอีกว่าการเรียก notifyListener นั้น หากเรา เขียน optimized ก่อนจะเรียก notify จะทำให้ประสิทธิภาพแอปดีขึ้นประมาณ 10%

สรุป

จากทั้งหมดของ Flutter ในงาน Google I/O 2019 ตัว Flutter ยังมาแรงและดูเป็น platform ที่มีอนาคตสดใสมากๆ พัฒนาอย่างรวดเร็ว ตอนนี้ Flutter 1.5 แล้ว ซึ่งเพิ่ง 1.0 เมื่อปลายปีที่แล้วนี่เอง มาพร้อมกับ Dart 2.3 และ Widget ใหม่ๆ อีกทั้งยังขยายไปยัง Flutter Desktop และ Flutter Web อีกด้วย หากผู้อ่านสนใจ Flutter ยังไม่สายไปนะที่จะเรียนรู้ด้วยกัน (: