รู้จัก Flutter 2.0 กันรึยัง แล้วทำยังไงให้เครื่องเรามีทั้ง 2 เวอร์ชัน?
เมื่อวันพฤหัสบดีที่ 4 มีนาคม 2564 ที่ผ่านมาทาง Google ได้จัดงาน Flutter Engage ขึ้นเป็นปีแรก ซึ่งก่อนจะถึงวันงานก็มีการเค้าท์ดาวน์ล่วงหน้า 30 วันให้ได้ผู้ชมลุ้นกันว่าในงานจะมีประกาศพิเศษอะไรรึเปล่า และเมื่อวันสำคัญนั้นมาถึง Flutter ก็ได้การประกาศว่าจะกลายเป็น 2.0 แล้ว! Flutter 2.0 นี้จะมีอะไรใหม่ๆ บ้าง ทำไมคนถึงตื่นเต้น มาดูกันครับ
Web
Flutter Web จะกลายเป็นตัวเวอร์ชันเต็ม (Full Version) แล้วครับ ไม่ใช่ Beta อีกต่อไป ทั้งนี้ยังไม่ได้มีการรีวิวออกมาว่าเวอร์ชันเต็มสามารถใช้งานได้ขนาดไหน แต่ถ้า Google มั่นใจพอที่จะออกตัวนี้มา ผมคิดว่าเวอร์ชันนี้น่าจะสามารถทำงาน Production ได้แล้วครับ
Sound Null Safety
Flutter 2.0 มาพร้อมกับ Dart 2.12 แต่ Lib จะต้องอัพเกรดตามด้วยจึงจะใช้งานได้ ตัวนี้อาจจะยังไม่แนะนำให้รีบใช้ครับ เพราะว่า Flutter พึ่งพา Lib ค่อนข้างเยอะ ขนาดกล้องยังนับเป็น Lib เลย ทำให้ถ้า Production App ของคุณเป็นอันเก่า อาจจะต้องใช้เวลากว่า 3–4 เดือนกว่าจะอัพเกรดได้ ต้องให้คนพัฒนา Lib ค่อยๆ ทยอยอัพเกรดกันหมดถึงจะได้ครับ
ส่วน Null Safety ดียังไง? ก็ต่อไปเราไม่ต้องมาทำอย่างนี้แล้ว
if (a != null) {
a.method();
}ซึ่งแบบใหม่ตามด้านล่าง ตัว Compiler จะฟ้องให้ตั้งแต่แรกเลยครับ ไม่ต้องไปลอง Crash บน Device
a?.method() Desktop
อันนี้ผมว่าเป็นการเล่นคำของทีม Flutter เพราะยังไม่ได้เป็น Production Grade เขาใช้คำว่า Early Release Flag ซึ่งสำหรับผมก็คือ Beta แหละครับ ปกติจะอยู่ใน Branch Dev แต่ตอนนี้เค้าให้ฟีเจอร์นี้มาอยู่ใน Branch Master แล้ว ตัวที่จะเป็น Production จริงๆ น่าจะออกปลายปีนี้ คงต้องรอรีวิวกันว่าจะไปได้ถึงขนาดไหน
ซึ่งทางทีม Flutter ก็ได้ทำ Demo มาให้ด้วยครับ ตามลิงก์ด้านล่าง
อันนี้เป็นฝีมือของทีม GSkinner ครับ ถ้าทีม Frontend Web น่าจะรู้จัก CreateJS ตัว Animation Lib ของทีม Adobe ทีมเดียวกันครับ เขาเป็นคนทำ Demo ให้ดูเองเลย 😍
Google Mobile Ads เป็น Beta แล้ว
สำหรับแอปสายโฆษณาก็สามารถใช้ Google Mobile Ads ได้แล้ว เพื่อทำโฆษณาเหมือนพวก iOS/Android
Improvement
Add-to-App พัฒนาขึ้น 99% ใช้ความจำน้อยลงเยอะมาก จริงๆ ผมไม่ได้ว้าวมาก เพราะควรจะทำให้ถูกต้องแบบนี้อยู่แล้ว ตอนแรกที่ทำ Memory Leak มาตอนนี้ได้ถูกซ่อมเรียบร้อย ฟีเจอร์นี้ช่วยให้เราสามารถนำโค้ดที่เขียน Flutter ลงไปใน Native ฉะนั้นถ้าใครพัฒนา Native อยู่แล้ว แต่อยากลดค่าพัฒนาแล้วมาใช้ Flutter ก็สามารถเขียน On Top ไปได้ครับ
หากใครที่อยากอ่านเพิ่มเติม สามารถไปต่อได้ที่บล็อกนี้เลย
Flutter 2.0 เหมาะสำหรับคนที่จะขึ้นโปรเจคใหม่ เพราะว่าต้องพึ่ง Lib ที่เป็น Null Safety ซึ่งมีแต่ Lib หลักๆ เท่านั้นที่แก้ไป Lib รองๆ ที่คนทั่วไปทำอาจจะต้องใช้เวลาประมาณ 3–4 เดือนตามที่กล่าวข้างต้น หรือบาง Lib ทางคนพัฒนาเลิกแล้ว ก็ต้องหาวิธีอื่นแทน ซึ่งถ้าใครจะอัพเกรด Production ปัจจุบันไปเป็น 2.0 ผมบอกได้เลย
งานนี้งานหยาบบบบบแน่นอน
แต่แน่นอนว่าเราคนสายเทค ของใหม่มาเราต้องจัด แต่ทำยังไงดีนะ เมื่อ Production ปัจจุบันก็ต้องใช้เวอร์ชันเก่า แต่เราก็อยากไปลองเล่นเวอร์ชันใหม่ด้วย จะมานั่งอัพเกรด/ดาวน์เกรดตลอดเวลาก็ไม่ไหว น่าจะลง 2 เวอร์ชันในเครื่องได้เลยนะ จะได้สลับไปมาได้ ความคิดของคุณจะสมปรารถนาทันทีครับ!!! มาดูวิธีกันว่าทำยังไงให้ลง 2 เวอร์ชันได้ แถมสลับง่ายๆ ด้วย
Set up Flutter 2 เวอร์ชันในเครื่อง
อันนี้จะเป็นวิธีของ VS code นะครับ เพราะผมใช้ VS code 😆
ขั้นตอนแรก เราต้องรู้ก่อนว่าเครื่องเราใช้ shell หรือ zshrc ด้วยวิธีการดังนี้
echo $SHELL- ถ้าเราใช้ Bash จะขึ้น /bin/bash ครับ ผมขึ้น Bash เราก็จะไปแก้ที่ .bash_profile
- ถ้าเป็น zshrc ก็จะแก้ที่ .zshrc ครับ ผมจะเริ่มแก้ที่ .bash_profile
เปิด .bash_profile ด้วย Editor ที่ชื่นชอบ เปิดมาจะเจอ Path แบบนี้อยู่ เพราะเป็น Path ที่เราเคยทำเอาไว้
export PATH=”$PATH:/<Flutter-Directory>/flutter/bin”ให้เราเพิ่มไปที่ด้านล่างตรงไหนก็ได้ครับ
if [ -f ~/.bash_aliases ]; then . ~/.bash_aliases; fiต่อไปเราสร้าง .bash_aliases ขึ้นมาที่ Root เดียวกับ .bash_profile แล้วเอาโค้ดนี้ไปวางครับ
alias flutterd='<Flutter-Directory>/flutter/flutter_2/bin/flutter'
alias flutterm='<Flutter-Directory>/flutter/flutter/bin/flutter'วิธีหา Path Flutter เผื่อคนไหนลืมว่า Path เดิมอยู่ไหน ให้ใช้ Command นี้
which flutterมันจะบอก Path ที่เคย Set up ไว้ ให้ไปที่ Path นั้น เสร็จแล้วเราก็ไปดาวน์โหลด Flutter 2.0 มา จากลิงก์นี้
ดาวน์โหลดมาเสร็จให้ไปที่ Path Flutter เดิมครับ แก้ชื่อ Flutter เดิมเป็น 1.0 ก่อน จากนั้น Unzip ของที่ดาวน์โหลดมา เอาไปใส่ทั้งโฟลเดอร์เดียวกัน ที่แก้ชื่อเพราะเราอยากได้ทั้ง 2 เวอร์ชัน ไม่ต้องการให้ตัวใหม่ไปทับตัวเก่า
ข้อควรระวัง อย่า Copy แต่ด้านในไปนะครับ ต้องเอาไปทั้งโฟลเดอร์ เพราะจะมี Hidden File จำพวก .git ที่เราต้องใช้อยู่
พอ Copy/Paste ไปวางเสร็จ ก็ Rename โฟลเดอร์ใหม่ที่ใส่ลงไป Flutter Directory เป็น Flutter_2 แทนครับ แล้วก็ Rename ตัวเก่าที่เปลี่ยนไปจาก 1.0 เป็น Flutter เหมือนเดิมจะได้ตามนี้
พอเสร็จลองเซฟแล้ว Restart Terminal ดูครับ จากนั้นลองรัน Command
flutterm doctor & flutterd doctorถ้าทำถูกต้อง เครื่องจะทำ Doctor Flutter ทั้ง 2 เวอร์ชันที่อยู่ในเครื่องเราให้ครับ แต่ Flutter Doctor เหมือนเดิมก็ใช้งานได้ครับ ให้ไปที่ตัวเก่าของเรา เพราะเราไม่ได้แก้ Path เดิม
ต่อไปจะ Build ตัวใหม่ก็ Flutterd แทนนะครับ แทนที่จะเป็น Flutter ธรรมดา
เสร็จจากตรงนี้ เราไป Set up ที่ VS Code สำหรับ Debug กัน
ไปที่ VS Code แล้วเลือก Code > Preferences > Settings ครับ
เสิร์ช fluttersdk ในช่องด้านบน
เลือก Edit in settings.json แล้ว Copy ด้านล่างลงไปในไฟล์
"dart.flutterSdkPaths": ["<Flutter-Directory>/flutter","<Flutter-Directory>/flutter_2"],
หลังจากนั้นกดเซฟ กด Restart VS Code แล้วไปที่ด้านล่างของ VS Code ที่บอก Flutter เวอร์ชันอะไรครับ เราจะสามารถเลือก Path ได้ เช่น ถ้ากด Flutter 1.22.6 แบบด้านล่าง จะมี Option ให้เลือก เราสามารถเปลี่ยน SDK แล้วกด Run หรือ Debug ผ่าน VS Code ส่วนวิธีเปลี่ยนก็แสนง่าย ใครที่ปกติ Build ด้วย Command Line ก็เปลี่ยนไปใช้ Flutterd แทนเท่านั้นเอง
เรียบร้อยครับ มาเล่น Flutter 2.0 กันได้เลย
สำหรับชาวเทคคนไหนที่สนใจเรื่องราวดีๆแบบนี้ หรืออยากเรียนรู้เกี่ยวกับ Product ใหม่ๆ ของ KBTG สามารถติดตามรายละเอียดกันได้ที่เว็บไซต์ www.kbtg.tech
