วิธีการ start flutter แบบ web server

Sommai Krangpanich
pnpsolution
Published in
Mar 30, 2022
วิธีการ start flutter แบบ web server
วิธีการ start flutter แบบ web server

เนื่องด้วยช่วงนี้มีงานที่ต้องพัฒนาด้วย Flutter หลาย Project อยู่ ซึ่งถึงแม้ว่า Flutter นั้นจะมีความสามารถในการทำ Hot Reload ทั้งบน Emulator, Device ซึ่งในกรณีที่เราต้องการพัฒนาแบบ web นั้นตัว command ของ flutter จะ default เลือก chrome ในเครื่องเรามาทำเป็น device

ซึ่งสิ่งที่พบก็คือถ้านั่งใช้งานไปสักพักจะรู้สึกว่ามันทำงานช้า ถึงขั้นบางทีการ render ไม่ทำงานเลยด้วยซ้ำทำให้ไปลองค้นหาดูวิธีการ start แบบอื่น ๆ ซึ่งก็หาเจอจนได้ เลยเกิดเป็นบทความนี้เพื่อ share ไว้สำหรับคนที่ต้องการพัฒนา Flutter บน web เพื่อทำ application แบบ PWA

รูปแบบคำสั่ง

flutter run -d web-server

ข้อดี

  1. โปรแกรมจะทำงานแบบ web server จะทำงานได้ค่อนข้างเร็ว

ข้อเสีย

  1. ความสามารถ hot reload จะหายไป จำเป็นต้องมากด refresh เองถ้า code มีการเปลี่ยนแปลง

Parameter

ในกรณีที่ต้องการส่ง parameter สำหรับกำหนดค่าบางอย่างในโปรแกรมในการ start แบบ web server สามารถทำได้ดังนี้

flutter run -d web-server --dart-define=_host=127.0.0.1

จากตัวอย่าง จะเป็นการตั้งค่า parameter ชื่อว่า _host มีค่าเป็น 127.0.0.1 เราสามารถดึงค่า _host ไปใช้ในโปรแกรมได้ดังนี้

final _host = const String.fromEnvironment(
'_host',
defaultValue: 'http://localhost:8000/api',
);

จาก code ตัวอย่าง เป็นการดึงค่าที่ส่งมาจากการ start ผ่าน command line โดยมีค่า default เป็น http://localhost:8000/api

สำหรับท่านใดที่ลองทำตามแล้วไม่ได้ หรือว่าติดขัดอย่างไรสามารถเข้ามาพูดคุยแลกเปลี่ยนกันได้ที่ facebook : pnpsolution หรือ web site : www.pnpsw.com ได้ครับ

--

--