เริ่มต้นกับ Flutter ง่ายๆ เพียง 5 นาที

Flutter คืออะไร?

Flutter คือ Framework ที่ใช้ในการสร้างแอปพลิเคชั่นแบบ HYBRID NATIVE ซึ่งถูกพัฒนาขึ้นโดย Google และจุดประสงค์คือช่วยให้แอพพลิเคชั่นที่เรากำลังพัฒนา(แบบ HYBRID NATIVE)อยู่นั้นมีประสิทธิมากขึ้นจนเหมือน NATIVE จริงๆ (เขาว่ามาอย่างงั้นนะ) สามารถเข้าไปอ่านเพิ่มเติมได้ที่ https://flutter.io/docs/resources/technical-overview

การใช้งาน Flutter

สิ่งที่ควรมีในเครื่องก่อนจะเริ่ม
1. Xcode
2. Android Studio
3. Visual Studio Code

ในกรณีนี้จะเป็นการลง Flutter ใน mac os ซึ่งของฝั่งวินโดว์ หรือ ลีนุกซ์ นั้นสามารถเข้าไปศึกษาต่อได้ที่ https://flutter.io/docs/get-started/install

ขั้นตอนแรก ให้เราเข้าไปยังเว็ปไซต์ https://flutter.io/docs/get-started/install

จะเห็นหน้าแรกว่ามีอยู่ 3 ระบบปฏิบัติการ ให้เราเลือก macOS

ให้เราทำการดาวน์โหลดไฟล์ sdk ของ flutter ลงมาในเครื่อง ซึ่งมีขนาดประมาน 400 mb

หลังจากนั้นให้เรา unzip ไฟล์ออกมา จะได้โฟลเดอร์ที่มีชื่อว่า flutter ซึ่งในโฟลเดอร์นี้จะมี sdk ของ flutter อยู่ จากนั้นให้เราทำการตั้งค่า PATH ของ flutter

เปิด Terminal ขึ้นมาละรันคำสั่ง sudo vim $HOME/.bash_profile ตามรูป

คำสั่งนี้จะเป็นการสร้างไฟล์ .bash_profile ขึ้นมาเพื่อตั้งค่า PATH ของ flutter แต่ถ้าเราได้ทำการไฟล์นี้ขึ้นมาแล้ว ระบบจะเตือนเราว่ามีไฟล์นี้อยู่แล้ว ให้ทำการเลือก edit แทนและเราจะสามารถเข้ามาแก้ไข PATH ในไฟล์นี้ได้

ซึ่งผมได้ตั้งค่า PATH ของ android sdk ไว้อยู่แล้ว ก็จะมี PATH ในไฟล์นี้อยู่ ให้เราเพิ่ม PATH ของ Flutter โดยการเพิ่ม

export PATH=$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin

ซึ่ง PATH_TO_FLUTTER_GIT_DIRECTORY ก็คือโฟลเดอร์ของ sdk ที่เราโหลดมาตอนแรกนั่นเอง ตัวอย่างของผมคือเก็บไว้ที่ Users

ในการแก้ไขไฟล์ .bash_profile นั้น ให้เราทำการกดปุ่ม i เพื่อเป็นการเพิ่ม PATH เข้าไป และทำการเซฟ โดยกดปุ่ม esc ก่อน เพื่อเป็นการออกจากการ insert เสร็จแล้วให้ทำการพิมพ์ :w และ enter เพื่อเป็นการเซฟไฟล์ และ :q! เพื่อเป็นการออกจากไฟล์นั้น และทำการปิดและเปิด Terminal ขึ้นมาใหม่ แล้วเช็คดูว่า flutter ถูกเรียกใช้งานได้จริงโดย พิมพ์ flutter ใน Terminal ถ้าเราตั้งค่า PATH ถูกแล้ว จะมีผลลัพธ์ดังรูป

การสร้าง Project Flutter ผ่านทาง Visual Studio Code

ให้ทำการ เปิด Visual Studio Code ขึ้นมา และ ดาวน์โหลด extension Flutter และ reload

ต่อมาให้เรากดปุ่ม command + Shift+ P และทำการเลือก Flutter: New Project และทำการใส่ชื่อโปรเจคใหม่ที่เราจะสร้าง (ชื่อโปรเจคของเราต้องเป็นภาษาอังกฤษ ห้ามมีตัวพิมพ์ใหม่และสามารถใช้อักขระพิเศษได้เพียง _ ตัวเดียวเท่านั้น เช่น hello_world)

และเมื่อรันเสร็จจะได้ไฟล์โปรเจคมาดังรูป

ต่อไปให้ทำการรันแอปใน Terminal ของ Visual Studio Code โดยการรันคำสั่ง flutter run แต่ก่อนที่เราจะรันให้ทำการเปิด simulator ขึ้นมาก่อน

เท่านี้ เราก็สามารถรันได้แล้ว !!

การสร้าง Project Flutter ผ่านทาง Android Studio

ให้ทำการดาวน์โหลด Plugin เสริมของ Flutter โดยเข้าไปที่ Preferences -> Plugins -> Browse repositories แล้วทำการค้นหา Flutter แล้ว Install

ต่อมาให้ทำการสร้างโปรเจค Flutter ใหม่ โดยเข้าไปที่ File -> New -> New Flutter Project

ให้ทำการเลือก Flutter Application และทำการใส่ชื่อโปรเจค แล้วกด Finish

เมื่อเสร็จแล้ว จะได้โปรเจค Flutter มา โดยที่ชื่อคือ hello_world

เมื่อต้องการที่จะรันโปรเจคให้ทำการ กดปุ่ม run ข้างบนขวา หรือทำการกดปุ่ม control + r

เมื่อกดปุ่มรันเสร็จแล้ว แอปเราจะไม่สามารถรันได้ เพราะไม่มี device เชื่อมต่ออยู่หรือไม่มี simulator ในเครื่อง ให้เราทำการเปิด simulator หรือ ต่อโทรศัพท์เข้าเครื่องของเรา แล้วทำการรันใหม่

เพียงแค่นี้ เราก็สามารถรันโปรเจคของ Flutter ได้แล้ว

ก็จบลงไปแล้วสำหรับการ Install + Run Flutter Project แบบง่ายๆ นะครับ ครั้งต่อไปเราจะมาพูดถึงการทำหน้า Login สำหรับ Flutter และ ความแตกต่างระหว่าง Flutter และ React native ว่าเราต้องเรียนรู้อะไรเพิ่มเติม หรือมีสิ่งไหนที่สองอย่างนี้คล้ายกันบ้าง ฝากติดตามพวกเรา I GEAR GEEK ต่อไปด้วยนะครับ