web analytics

มีอะไรใหม่ใน Flutter 1.17

พฤษภาคม 14, 2020 benznest
Off
Flutter
Post Views: 2,762

สวัสดีครับ วันก่อนผมได้เห็นทวิตของ Flutter team ว่า Flutter 1.17 stable มาแล้วนะ หลังจากผมได้เข้าไปอ่าน พบว่าน่าสนใจดีนะ เลยอยากจะสรุปประเด็นหลักๆของอัพเดท stable ครั้งนี้ และลองเล่น Flutter 1.17 ไปด้วยในตัวครับ

ก่อนอื่นใครที่ยังไม่ได้อัพเกรด Flutter 1.17 รันคำสั่งอัพเกรดได้เลยนะ 

flutter upgrade

ประสิทธิภาพที่มากขึ้น

เริ่มต้นด้วยเรื่องสำคัญของ Flutter 1.17 คือ ทีม Flutter ตั้งใจในเรื่องการปรับปรุงเกี่ยวกับประสิทธิภาพของแอปและหน่วยความจำ โดยอัพเดทนี้จะทำให้ animation ต่างๆทำงานได้ดีขึ้น การเปลี่ยนหน้าจะเร็วขึ้น 20%-70% สำหรับเรื่องหน่วยความจำ อัพเดทนี้ช่วยจัดการการใช้หน่วยความจำ อาจลดลงถึง 70% ดังนั้นการเลื่อนจอไวๆ แม้จะมีรูปภาพจำนวนมาก แอปยังสามารถทำงานได้ลื่นไหล อีกทั้งขนาดของแอปก็เล็กลง โดยทางทีมได้ยกตัวอย่าง แอป Flutter Gallery ขนาดลดลงประมาณ 18.5% เรียกว่าของเดิมที่นับว่าดีอยู่แล้วก็ดีขึ้นไปอีก

สวัสดี Metal บน iOS

Metal คือ Graphic API ตัวนึง ที่ Apple แนะนำให้ iOS developer ใช้ในปัจจุบัน ก่อนหน้านี้ Flutter ใช้ OpenGL สำหรับทำงาน graphic ใน iOS และตอนนี้ได้เปลี่ยนมาใช้ Metal แทน OpenGL แล้ว ทำให้ iOS ที่เขียนด้วย Flutter จะ render เร็วขึ้นถึง 50% แต่ก็ไม่ได้รองรับ Metal ทุกเครื่องนะ เช่น เครื่องเก่า CPU ที่เก่ากว่า Apple A7 หรือ iOS ที่เก่ากว่า iOS10 ลงไป หรือก็คือ iPhone 5s โน้นเลยที่จะใช้งาน metal ไม่ได้

Navigation Rail

มี widget เพิ่มเข้ามาตัวนึง ช่วยให้ทำเราทำเมนู navigation สำหรับ Desktop และ mobile ได้ง่ายขึ้น

ผมได้ลองเล่นคร่าวๆแล้ว ใช้งานง่าย ดูน่าสนใจนะ

รู้จักกับ Navigation Rail Widget ใน Flutter

Date picker

ตามเอกสารมีบอกว่า เพิ่มความสามารถให้กับ date picker ผมเลยลอง showDatePicker ดูสิว่ามีอะไรเพิ่มนะ

              showDatePicker(
                context: context,
                initialDate: DateTime.now(),
                firstDate: DateTime.now().subtract(Duration(days: 30)),
                lastDate: DateTime.now().add(Duration(days: 30)),
              );

หลักๆคือ เพิ่ม TextField ให้เราสามารถพิมพ์วันที่ที่ต้องการได้เลย มี validate format ให้ด้วย แล้วก็ปรับปรุงหน้า Year picker ให้แสดงแบบ GridView แทนแบบเดิมที่เป็น ListView

เพิ่มเพิ่มฟีเจอร์ให้เราพิมพ์วันที่ได้เอง ก็จะมี parameter เพิ่มเข้ามาเกี่ยวกับ Text ต่างๆ

Future<DateTime> showDatePicker({
  ...
  DatePickerEntryMode initialEntryMode = DatePickerEntryMode.calendar,
  String helpText,
  String cancelText,
  String confirmText,
  String errorFormatText,
  String errorInvalidText,
  String fieldHintText,
  String fieldLabelText,
})

Material Motion

เพิ่ม Animations package ใหม่ โดยอ้างอิงกับเรื่อง Motion system ตาม Material Design ซึ่งมี Transition patterns อยู่ 4 แบบ คือ
1. Container transform
2. Shared axis
3. Fade through
4. Fade

รายละเอียดเกี่ยวกับ Animations
https://pub.dev/packages/animations

โดยผมได้ลองเล่นและเขียนบล็อกเรื่องนี้ไว้ครับ สามารถเข้าไปอ่านเพิ่มเติมได้ครับ

Material Motion ใน Flutter ตอนที่ 1
Container transform
Shared axis
Fade through
Fade

Material Text Theming

ใน Flutter การทำ Text Theming อย่างเช่น พวกกำหนด style ของ header , body , caption จะใช้ class ที่ชื่อว่า TextTheme ซึ่งที่ผ่านมา Flutter จะใช้ชื่อ field ตาม Material Design ที่ออกในปี 2014 แต่ว่าในปี 2018 ตัว Material design ก็มีการเปลี่ยนแปลงเรื่องชื่อ field ต่างๆที่ทำให้ครอบคลุมมากขึ้น ทำให้ Text Theming ของ Flutter และ Material Design ในตอนนี้ไม่สอดคล้องกัน อัพเดทนี้ของ Flutter 1.17 จึงแก้ไขให้ชื่อ field ใน TextTheme ให้เหมือนกับใน Metarial Design 2018

โดยชื่อเก่าจะอยู่ในสถานะ deprecate และให้ย้าย code ไปใช้ชื่อใหม่แทน

Google Font 1.0

Google Font สำหรับ Flutter เดินทางมาถึงเวอชัน 1.0 แล้ว โดยก่อนหน้านี้ได้เปิดตัวที่งาน Flutter Interact 2019 ในเดือน ธ.ค. 2019

ตอนนั้นผมได้เขียนสรุปงานนี้ไว้ด้วย เป็นก้าวที่สำคัญของ Flutter ที่สำคัญก้าวนึงเลย

สรุปงาน Flutter Interact 2019

โดย Google Font 1.0 เพิ่มให้เราสามารถเลือกได้ว่าจะใช้ Font แบบให้ไปดาวน์โหลดมา (http) หรือจะ pre-bundle ตัว Font ไปกับแอป โดยหากเราต้องการ pre-bundle เราจะต้องเพิ่ม code เกี่ยวกับ license ด้วย

void main() {
  LicenseRegistry.addLicense(() async* {
    final license = await rootBundle.loadString('google_fonts/OFL.txt');
    yield LicenseEntryWithLineBreaks(['google_fonts'], license);
  });
  
  runApp(...);
}

Network tracking tool

อัพเดทนี้ เพิ่มฟีเจอร์ใหม่ให้กับ Dev Tool ให้สามารถ track request เมื่อใช้งาน network อันนี้น่าสนใจมากๆ มาลองใช้งานกัน สำหรับวิธีใช้งาน (ผมใช้ใน Android Studio นะ) ให้รันแอปของเราก่อน จากนั้นกดไปที่ Flutter inspector > More actions > Open Dev Tools

จากนั้นกดที่ปุ่มไปคอนรูปขวดทดลอง (บนขวา)

จากนั้นให้เรากดไปที่แท็บ Network แล้วกดปุ่ม record traffic เท่านี้เราก็สามารถดู request จากแอปของเราได้แล้ว สุดยอดเลยใช่มัยล่ะ

หากต้องการให้แอปของเราเปิดใช้งานฟีเจอร์นี้ทันทีที่รันแอป ก็เพิ่ม code ด้านล่างนี้ จะได้ไม่ต้องไปกดปุ่ม record นั่นเอง

void main() {
  // enable network traffic logging
  HttpClient.enableTimelineLogging = true;
  runApp(MyApp());
}

อื่นๆ

ปรับให้ Flutter project เริ่มต้นด้วย AndroidX

คำศัพท์ใหม่วันนี้ ขอเสนอ a11y หรือก็คือคำว่า accessibility โดยอัพเดท Flutter 1.17 แก้บัคเรื่อง a11y mode เพื่อช่วยเหลือผู้พิการใน widget หลายๆตัว เช่น Scrolling, TextField, Switches, Checkboxes, อื่นๆอีกหลายตัว

แก้ไขบัคเรื่องภาษาในแถบเอเชีย โดยเฉพาะภาษาเกาหลี

สามารถอ่านรายละเอียดทั้งหมดได้ที่บล็อกของ Flutter เลยนะครับ
https://medium.com/flutter/announcing-flutter-1-17-4182d8af7f8e

จบแล้ว

ขอบคุณสำหรับการติดตามและอ่านจนจบนะครับ หวังว่าจะมีผลประโยชน์สำหรับคนที่สนใจ Flutter หรือคนที่ใช้ Flutter อยู่แล้วครับ

ขอบคุณครับ (:

ขอขอบคุณ พี่แอมที่ช่วยตรวจอักษรครับ

Flutter
Flutter