สวัสดีครับทุกคน เมื่อวันที่ 11 ธันวาคมที่ผ่านมา ที่ New York , USA ทีมงาน Google Flutter ได้จัดงาน Flutter Interact 2019 ซึ่งเป็นงานสัมนาเกี่ยวกับ Flutter Tech ในบล็อกนี้ผมจะสรุปเนื้อหาในงานผ่าน Livestream ครับ หากท่านใดมีเวลาก็สามารถเข้าไปดู Livestream แบบเต็มใน youtube ได้เลยครับ ความยาวเฉพาะเนื้อหาประมาณ 4-5 ชั่วโมง

โดยงาน Flutter Interact 2019 จัดงานในคอนเซ็ป

“A day dedicated to creation and collaboration with the world, inspired by the makers of brilliant experiences.”

Vision

เริ่มจากคุณ Matias Duarte (Vice-President Material Design, Google) กล่าวเกี่ยวกับวิศัยทัศน์ ว่า Google Flutter มาเพื่อช่วยทุกคน ทั้ง designer developer โดย Google เตรียมทั้งทรัพยากร และเครื่องมือมากมาย เพื่อจัดการกับปัญหาต่างๆ เขารู้สึกตื่นเต้นมาก ที่วันนี้ทุกคนจะได้เห็นมีอะไรใหม่ๆสำหรับ Flutter บ้าง และการลงทุนที่ผ่านมาของทีมงาน วันนี้ก็ไม่แปลกใจเลยว่ามันจะสำเร็จสุดๆ สุดท้ายเขาเชื่อว่า เราสามารถสร้างสิ่งที่เราจินตนาการเอาไว้ให้เป็นจริงได้
“we believe we can make our imaginations real. “

Google Font

Google Fonts มี Fonts ที่ถูกเรียกใข้งาน นับตั้งแต่ 2010 มากกว่า 34 ล้านล้านครั้ง

ตอนนี้ทางทีมงาน Google ได้เพิ่ม package สำหรับใช้ Google Fonts ใน Flutter สามารถเรียกใช้ Font ด้วยการ coding ทำให้เราทำ Custom Fonts ได้ง่ายขึ้น

ซึ่งตัว Font จะถูก cache ในแอป และเมื่อแอป build release mode ตัว Flutter จะคัดเฉพาะ font ที่ถูกใช้งานในแอปจริงๆเท่านั้น แม้ว่าแอปจะ cache font ไว้หลายตัว ทำให้แอปขนาดไม่ใหญ่เกินจำเป็น

รายละเอียดการใช้งานดุได้ที่ pub dev
https://pub.dev/packages/google_fonts

Experimental

คุณ Matias บอกว่า กำลังพัฒนาโปรแกรม engine ตัวนึงด้วย Flutter เป็นโปรแกรมที่จะช่วยให้ design และทำ UI responsive ได้ง่ายขึ้น และอาจช่วย generate code อัตโนมัติ ทำให้ UI จากหลากหลายรูปแบบหน้าจออยู่ใน code base เดียว

ตัวอย่าง engine ที่กล่าวถึง

Product

คุณ Time Sneath (Group Product Manager for Flutter) พูดถึง การเติบโตของ Flutter และ Dart จากเว็บไซต์ Octoverse Github ซึ่งมีสถิติในปี 2019 ที่น่าสนใจ 3 อย่าง

Top and trending projects

โปรเจคที่เป็น trending จัด Flutter อยู่อันดับ 3 (อันดับ 1 คือ vs code ตามมาด้วย Azure doc)

Fastest growing open source projects

โปรเจคที่เติบโตไวที่สุดใน opensource โดย Flutter อยู่อันดับ 2 (อันดับ 1 คือ .NET CORE)

Fastest growing languages

ภาษา Dart อยู่อันดับ 1 ของภาษาที่เติบโตไวที่สุดในปี 2019 (ตามมาด้วย Rust , HCL และ Kotlin)

ดูสถิติดังกล่าวนี้ได้ที่เว็บไซต์
https://octoverse.github.com/

Flutter 1.12 มาแล้วนะ

งานนี้เมื่อเห็น คุณ Tim Sneath ท่านนี้ แน่นอนว่ามักจะประกาศเวอชันใหม่ของ Flutter คือ Flutter 1.12 เพิ่มความสามารถใหม่ๆ

เช่น Dark mode ใน iOS , ตั้งค่าโปรเจคให้ support AndroidX เป็น default และมี widget ใหม่ๆเพิ่มเข้ามา

Stadia App

คุณ Roberto Scaramuzzi เป็น Software engineer ของ Google Stadia พูดถึง Stadia App ที่พัฒนาด้วย Flutter

แอปนี้เป็นแอปที่เชื่อมกับ Game Streaming และทั้งหมดพัฒนาด้วย Flutter อย่างลื่นใหล

ebay motors App

แอป ebay motors เป็นแอปเกี่ยวกับขายอะไหล่และขายรถออนไลน์ที่นิยมมาก โดยแอปนี้ทาง ebay ก็ใช้ Flutter ในการพัฒนาแอปด้วยเช่นกัน

Splice

คุณ Angelina Fabbro (Principal Engineer at Slice) เล่าประสบการณ์ของการพัฒนาแอป Slice ด้วย Flutter

Slice เป็นแอปรวมเสียงดนตรีและเสียง effect ต่างๆ ทางทีม Slice พัฒนาแอปด้วย Flutter บอกว่าได้ประสบการณ์ที่ดีมาก ซึ่งเขากำลังพัฒนาเวอร์ชัน Desktop ต่อในอนาคตอีกด้วย

DartPad

คุณ Zoey Fan และ คุณ Chris Sells นำเสนอเว็บไซต์ https://dartpad.dev/ เป็นเว็บที่ช่วยให้เราสามารถทดลองเขียนโปรแกรมภาษา dart ได้บนเว็บและรันได้เลย ตอนนี้อัพเดทให้สามารถรันโค้ด dart ของ Flutter และแสดงผลได้คล้ายกับใน emulator อยู่ แต่จริงๆมันคือพลังของ Flutter Web

นอกจากนี้ DartPad ก็เชื่อมกับ Document สามารถลองกดรัน ใน example code ของ Doc ได้เลยด้วย

Dev Tools

ตัว Flutter Outline ใน Android studio จะสามารถกดที่ widget แล้ว custom สีได้ผ่านหน้า UI ได้ พร้อม hot reload แสดงผลทันที

ตัว Dart Dev Tools เพิ่ม Layout Explore เช่น เวลามี Overflow เกิดขึ้น สามารถกดที่ widget นั้น ดูรายละเอียดว่า มีอะไรตรงไหนที่เป็นปัญหา

เพิ่มให้ Visual Studio Code สามารถรัน debug ตัว Simulator ของ iOS , Android พร้อมกันได้

พร้อมกับโชว์ Flutter Octopus (ฮ่าๆ) ที่เอาอุปกรณ์ต่างๆมา build ด้วยคอมเครื่องเดียว และลองแก้ code แล้ว hot reload ทุกอุปกรณ์ก็จะถูกอัพเดทในทันที

Supernova

คุณ Jiří Třečák (CEO , Founder at Supernova) แนะนำเกี่ยวกับ Supernova ซึ่งมันคือ เครื่องมือสำหรับช่วยออกแบบ UI มีทั้งเวอชันที่เป็นโปรแกรม Supernova studio และแบบ on cloud

โดยช็อตเด็ดของ supernova คือสามารถ export ไฟล์จาก sketch และแปลงเป็น dart ให้เลย ที่เจ๋งคือมันทำ code ส่วน Animation ให้เลยด้วย ซึ่งสามารถ custom ได้จากใน supernova

Adobe XD

คุณ Kerri Scotts นำเสนอ Adobe XD ที่ใช้งาน plugin XD to Flutter

คือสามารถแปลง XD ออกมาเป็น dart ได้ โดยเมื่อติดตั้ง plugin วิธีการง่ายๆคือกดที่ object หรือ screen ใน XD แล้วไปที่เมนู Plugin กดที่ Export selected for Flutter เท่านี้ XD จะแปลง screen ใน XD ออกมาเป็น code widget ให้แล้ว

ทาง Adobe จะเปิดเป็น Early access ก่อน
https://xd.adobelanding.com/xd-to-flutter/

gSkinner

คุณ Grant Skinner (Founder at gSkinner) เล่าเกี่ยวกับ gSkinner เป็นบริษัทที่รับออกแบบและหา Solution ด้านการออกแบบใหม่ๆ ซึ่งในงานนี้ เขาได้รับโจทย์ให้สร้าง UI/UX หรือ Animation ใหม่ๆให้กับ Flutter

และคนที่มาด้วยกับคุณ Grant คือคุณ Yoon Lee ที่เป็น Designer ของ gSkinner (น่ารักมาก) เธอเล่าเกี่ยวกับการออกแบบ UI/UX ที่เธอออกแบบ มันทำได้โดย Flutter

ซึ่ง UI Animation ที่ gSkinner ทำนั้นเจ๋งมาก เรียกว่าเทพเลยก็ได้ มีให้ลองเล่นหลายตัว น่าสนใจมากๆ สามารถเข้าไปดูได้ที่ https://flutter.gskinner.com/

ตัวอย่างที่ทาง gSkinner ออกแบบและพัฒนา

Material Theming

คุณ Yasmine Evjen (Senior Design Advocate at Google) เล่าถึง Material Design ไม่ใช่แค่ UI จะรวมถึง UX และ User ด้วย ซึ่งประกอบด้วย 3 ส่วนหลัก
Material Principles คือ พวกสี พวก font และการจัดวาง
Content and Context คือการออกแบบอิงตามที่ user ใช้งานจริง
User Intention คือ ความตั้งใจ ความคาดหวังของผู้ใช้งาน

นอกจากนี้ Material design แบ่งลักษณะ UI เป็น 3 กลุ่มคือ small , medium , large

จากนั้นเธอก็ demo เว็บตัวอย่าง ที่ช่วยให้เราเลือก font และทำ generate code ของ text theme ได้

เสร็จแล้วก็ copy code ไปใช้ใน Flutter ได้เลย แน่นอนว่ามันใช้งานร่วมกับ Google Fonts package จึงไม่ต้องยุ่งกับไฟล์ Font ให้ยุ่งยากอีกแล้ว

Rive

คุณ Luigi Rosso และคุณ Guido Rosso (Founder and Co-Founder at Rive) แนะนำ โปรเจค Rive ซึ่งแต่เดิมมันคือ Flare เปลี่ยนชื่อใหม่เป็น Rive นั่นเอง โดยบริษัทเดิมชื่อเก่าคือ 2Dimension ตอนนี้เปลี่ยนมาใช้ชื่อ Rive ชื่อเดียวกับ Product จะได้ไม่สับสน

Rive คือเครื่องมือที่ช่วย design animation vector และ สร้าง asset ไปใช้ใน Platform ต่างๆ ถ้าใครเคยใช้ Flare มาก็คืออันเดิมนั่นแหละ ซึ่งสามารถสร้าง Animation ได้ในเว็บไซต์ของ Rive และ export ไฟล์ไปใช้งานได้เลย

โดย Rive เราจะต้องทำส่วนส่วนคือ เขียน animation ใน Rive Editor จากนั้นก็ไปเรียกใช้งานใน project นั่นเอง

ในตัวอย่างเขาได้แสดงการทำ animation ของห่านจะขยับคอไปตาม cursor ใน Text Field ซึ่งรายละเอียดค่อนข้างเยอะอยู่เหมือนกันนะ เรียกว่า ต้องเข้าใจศิลปะ และหลักสรีระร่างกายเลย

Flutter Desktop

คุณ Time Sneath อธิบายเกี่ยวกับ Flutter Desktop ว่าตอนนี้ Flutter Desktop อยู่ใน Dev channel แล้ว โดย Desktop App จะต้องการ 3 อย่าง
1. Tool chain สำหรับ build ใน OS นั้นๆ
2. Input mechanism เช่น mouse pointer , keyboard
3. UI responsive

สำหรับ MacOS สามารถ build release mode ได้แล้ว

Flutter Web

คุณ Time Sneath เล่าภาพรวมของ Flutter Web ว่าเราจะสามารถใช้ Skill เดิมของ Flutter มาเขียน Flutter Web ได้เลย มันจะเป็น code base เดียวกับ Mobile และทุกอย่างจะถูกแปลงเป็น javascript ที่ optimize มาอย่างดี

ในตอนนี้ Flutter Web เข้าสู่ Beta channel แล้ว

คุณ Ferhat Buyukkokten (Manager Tech Lead, Google) และคุณ Liam Spradlin (Designer Material Design, Google) อธิบายเกี่ยวกับ Flutter Web ที่ในตอนนี้ Flutter Web กำลังจะเข้าใกล้ ระดับที่นำไปทำ Production ได้แล้ว

ข้อดีของการทำเว็บที่ต่างจาก Mobile App ก็คือ User ไม่ต้องติดตั้งอะไรก่อนการใช้งาน และเราสามารถอัพเดทตัวแอปบนเว็บได้ทันที เขาเล่าว่าปกติการพัฒนาเว็บที่ผ่านมา เราจะยุ่งกับส่วน HTML CSS แล้วปล่อยให้ browser นำไปวาดหน้าจอเพื่อแสดงผล

แต่ Flutter จะปรับแนวคิดใหม่ คือ developer จะสามารถทำทุกอย่างทั้งหมดจนถึงขั้นตอนการ render หน้าจอ โดย Flutter ได้เตรียม API rendering ไว้ให้ ดังนั้นเราจะสามารถทำสิ่งต่างๆในเว็บได้มากขึ้น

เขามักจะเจอคำถามว่า Flutter Web code จะใหญ่ขนาดไหน , ตัว library ของ Material App จะใหญ่ขนาดไหน เพราะกลัวจะทำให้เว็บโหลดช้า เขาบอกว่า ตัว Material App ใน Flutter มีขนาดประมาณ 300 kB และกำลังหาทางทำให้เล็กกว่านี้ และตอนนี้กำลังพัฒนาให้ Flutter Web performance ให้ดีขึ้น เขายังอธิบายอีกด้วยว่าเมื่อเราอัพเดท State หรือเรียก setState ตัว Flutter Web จะหาทางให้หลีกเลี่ยงการอัพเดท DOM element บนหน้าจอ แบบไม่จำเป็น หรือในกรณีของ Dynamic ListView ก็เช่นกัน

และตอนนี้ Flutter Web ก็มี plugin ที่ support Web อยู่ 6 ตัว

Building Accessibility

คุณ Dan Field (Software Engineer, Flutter team) และคุณ Victor Tsaran (Accessibility Material Design) โดยคุณ vector เป็นผู้พิการทางสายตาที่ช่วยทำให้ Material Design สามารถใช้งานกับผู้พิการ

ซึ่งเขาก็ได้แนะนำนักพัฒนาให้ทำแอปให้รองรับผู้พิการ เช่น การใช้ Semantic Widget และ ExcludeSemantics เพื่อให้แอปแสดงผลเหมาะสมกับผู้พิการ

Build Clock with Flutter

ช่วงสุดท้าย คุณ Jack Jessup (Software Engineer) และคุณ Kim Tran (Visual Designer) เป็นการพูดคุยเกี่ยวกับการทำแอปนาฬิกา ซึ่งเป็น challenge การทำ UI นาฬิกาซึ่งจะถูกนำไปใช้ใน Lenovo Smart Clock ผู้ชนะจะได้รางวัลเป็น iMac Pro https://flutter.dev/clock

โดยสามารถนำ Animation ที่ทำด้วย Rive มาใช้เป็นตัวเลขของนาฬิกาได้ ใครมีไอเดียก็สามารถส่งผลงานไปร่วมแข่งได้นะ

ช่วงสุดท้ายจะเป็นการ coding แสดงนาฬิกาแบบง่ายๆ

สรุป

จบงานแล้ว สำหรับ Developer และ Designer น่าจะได้อะไรหลายอย่างเกี่ยวกับงานนี้ ที่ผมรู้สึกได้จากการดู Live คือ ได้เห็นอนาคตเกี่ยวกับ Flutter มากขึ้น ทั้ง Mobile , Web และ Desktop มีเครื่องมือหรือฟีเจอร์ใหม่ๆที่ช่วยให้เรา Design App และนำมาใช้ใน Flutter ได้ น่าจะทำให้เขียน Flutter สนุกขึ้นไปอีก ส่วนตัวผมแม้จะทำงานประจำที่ต้องใช้ Flutter อยู่ ตอนนี้รู้สึกสนุกกับการเรียนรู้ Flutter มาก (:

ขอบคุณทุกท่านที่เข้ามาอ่านบล้อกนี้ครับ รูปอาจจะเยอะไปนิดนึงต้องขออภัยครับ

คุณ Yoon น่ารักจริงๆนะ