ทดสอบรันโปรเจ็ค Demo ของ Flutter ใน Android Studio

เขียนเมื่อ 3 ปีก่อน โดย Ninenik Narkdee
flutter demo project

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ flutter demo project



หลังจากเราได้เตรียมความพร้อมสำหรับพัฒนา
แอปด้วย Flutter ทั้งการเตรียมเครื่องมือต่างๆ ตาม
ที่ได้แนะนำไปในบทความแรกของ Flutter ทบทวน http://niik.in/937
รวมถึงทำความรู้จัก และใช้งานภาษา Dart เบื้องต้นไปแล้วในเนือหา
    ในลำดับต่อไป จะเข้าสู่เนื้อหาเกี่ยวกับการพัฒนา Flutter ตามลำดับ
โดยจะเริ่มต้นที่การทดสอบรัน Demo หรือไฟล์ตัวอย่าง เมื่อทำการสร้าง
Flutter โปรเจ็คโดยใช้งานผ่าน Android Studio เป็นการเรียบเรียงลำดับ
ขั้นตอนในการพัฒนาแอป ตั้งแต่เริ่มต้น และทดสอบรันดูผลลัพธ์ โดยที่ยังไม่
ต้องลงไปในรายละเอียดของโค้ดแต่อย่างไร
    สำหรับแนวทางการแนะนำในบทความ จะพูดถึงเฉพาะในส่วนของการพัฒนาสำหรับ Android
เป็นหลัก โดยเลือกใช้เครื่องมือเป็น Android Studio และใช้ Emulator จาก Virtual Device
 
 

    เริ่มต้น Flutter Project

    เมื่อเราทำการติดตั้งเครื่องมือ และเตรียมความพร้อมทุกอย่างแล้ว ก็ให้ทำการเปิด Android Studio ขึ้นมา 
 
 

 
    จะแสดงหน้า Welcome พร้อมกับมีเมนู "Start new flutter project.." ขึ้นมาให้เราเลือกที่เมนูดังกล่าว  
    หรือกรณีเปิดไว้อยู่แล้ว หรืออยู่ในหน้าโปรเจ็คที่เปิดอยู่ ก็สามารถไปที่เมนู "File" > "New" และเลือก "New Flutter Project.." ก็ได้


 

 
    เลือก Flutter Application แล้วกด Next


 
 
 
    ต่อด้วยหน้าตั้งค่าเบื้องต้น 
        - เป็นชื่อโปรเจ็ค 
        - Path ของ Flutter SDK ที่เราได้ติดตั้งไว้ path
        - Path ตำแหน่งจัดเก็บโปรเจ็คของเรา 
        - และคำอธิบายเกี่ยวกับโปรเจ็ค
    โดยค่าเหล่านี้เราสามารถแก้ไข และปรับแต่งได้ ในที่นี้เราจะใช้ค่าเริ่มต้นทั้งหมด ตรวจสอบและกด Next ต่อไป

 
 
 
    จากนั้นจะมาต่อที่หน้าจัดการ package name
    โดยทั่วไปชื่อ package name จะเป็นชื่อเฉพาะ และส่วนใหญ่ใช้เป็นชื่อโดเมนเนมหรือชื่อเว็บไซต์ของเรา เช่น example.com แล้ว
ตามด้วยชื่อแอป อย่างกรณีข้างต้น ก็เป็น com.example.flutterapp ในที่นี้เราไม่ต้องแก้ไขอะไรใช้ค่าเดิม แล้วกด Finish เพื่อทำการสร้าง
โปรเจ็ค flutter โดยจะต้องทำการเชื่อมต่อกับอินเทอร์เน็ต เนื่องจากจะมีการดาวน์โหลดส่วนต่างๆ ที่เกี่ยวข้องเข้ามาในโปรเจ็ค Demo
และอาจจะใช้เวลาสักพักหนึ่ง รอสักครู่ จะได้หน้าตาเริ่มต้นของโปรเจ็คดังนี้


 
 
    โดยโครงสร้างไฟล์ของโปรเจ็คจะอยู่ด้างด้านซ้ายดังรูป และด้านขวาจะเป็นส่วนของการจัดการโค้ด หรือ Editor เราสามารถเปิดไฟล์
จัดการโค้ดหลักชื่อ "main.dart" เพื่อดูตัวอย่างโค้ดของ Demo ที่ Android Stuidio สร้างขึ้นมาให้  ซึ่งในที่นี้เราสมมติว่าเราได้ทำการ
สร้างแอปด้วย flutter มาเรียบร้อยแล้ว 1 แอป และพร้อมที่จะทดสอบรัน Demo นี้ผ่าน Emulator โดยให้เราทำการเลือก Emulator Device
ที่ได้ทำการสร้างไว้ ดังรูป อาจจะแตกต่างกันไปตามแต่ละคนได้กำหนดไว้ อย่างข้างต้นเลือกเป็น Nexus 5X API 29 

 
 

 
 
    เมื่อทำการเลือกแล้ว Emulator ก็จะทำการเปิดขึ้นมา ให้รอสักครู่ ให้เข้าสู่หน้าพร้อมใช้งาน 

 
 

 
 
    แล้วกดปุ่ม รัน ตามขั้นตอนลำดับที่ 3 ในส่วนนี้หน้าต่าง console จะแสดงการทำงาน และทำการสร้างโฟลเดอร์ build ไฟล์ apk สำหรับ
ทดสอบการทำงานผ่าน Emulator ดังรูป

 
 

 
 
    รอจนกระบวนการทำงานแล้วเสร็จ เราจได้หน้าตาเริ่มต้นของ Demo แอปดังรูป โดยมีริปบิ้น debug กำกับว่าเป็นโหมดทดสอบอยู่มุม
บนขวา เป็นแอปแสดงจำนวนครั้งที่เราทำการกดที่ปุ่ม เครื่องหมวยบวก โดยค่าจะเพิ่มขึ้นเรื่อยๆ 

 

 
 
    ทดสอบกดปุ่ม 8 ครั้ง ผลลัพธ์ได้เป็นดังรูป
 
 


 
 
    ลักษณะการใช้งาน Emulator คือ เมื่อเราทำการรันคำสั่ง ก็จะเป็นการสร้างไฟล์แอป จากนั้นก็ทำการติดตั้งลงใน Emulator เปิดขึ้นมา
เพื่อสดงการทำงาน เราสามารถปิดแอปนี้ใน Emulator และเปิดขึ้นมาใหม่ ได้โดยเลื่อนปัดหน้าจอขึ้น จะมี flutter_app ที่เราสร้างไว้ ดังรูป
 
 


 
 
    ตอนนี้เราได้รู้จักลำดับขั้นตอนการพัฒนา Flutter แอปเบื้องต้นไปแล้ว
    เพิ่มเติมการใช้งาน Android Stuido เล็กน้อย เมื่อเราต้องการปิด Project Flutter ที่เพิ่งสร้างไป เราสามารถเลือกปิดเฉพาะตัว Android
Stuido โดยไปที่เมนู "File" > "Exit" การปิดในลักษณะนี้ เมื่อเราเปิด Android Studio ขึ้นมาใหม่ จะเปิดเข้ามาในหน้าโปรเจ็คล่าสุดที่เราเปิด
ไว้และยังไม่ได้ปิดไป ทำให้เราสามารถทำงานต่อในโปรเจ็คนั้นๆ ได้ทันที
    กับอีกวิธี กรณีเราต้องการจบโปรเจ็คนั้นแล้ว และจะยังไม่ได้ใช้งานต่อในทันที ก็สามารถปิดโปรเจ็คโดยไปที่ "File" > "Close Project" ก็จะ
เป็นการปิดโปรเจ็คที่เราใช้งานอยู่ และออกไปยังหน้า Welcome พร้อมกับมีรายชื่อโปรเจ็คที่เราได้สร้างไว้ ให้สามารถเลือกเปิดกลับมาใช้งาน
ต่อได้ดังรูปด้านล่าง ซึ่งหากไม่ได้ต้องการใช้่งานต่อ ก็สามารถกดปิด Android Studio ไปได้เลย
 
 


 
    เนื้อหาเริ่มต้นสำหรับหัวข้อนี้ก็ขอจบเพียงเท่านี้ ในตอนต่อๆ ไปเราได้เริ่มเข้าสู่การโค้ดโปรแกรมตามลำดับ และสิ่งสำคัญคือความรู้ความ
เข้าใจในภาษา Dart เบื้องต้น ซึ่งสามารถทบทวนได้ที่ บทความภาษา Dart เพื่อให้การทำความเข้าใจเป็นไปง่ายขึ้น


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ



อ่านต่อที่บทความ









เนื้อหาที่เกี่ยวข้อง



Tags:: demo project flutter







URL สำหรับอ้างอิง












สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Privacy Policy
Author
2023 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ