Day21-ใช้ WebView ในการแสดงผลไฟล์ html5 ด้วย webview_flutter_plus package

3 min readJan 21, 2021

สอนตัวเองเขียน app ด้วย Flutter ใน25วัน (Flutter Self-Learning Challenge in 25 Days)

วันนี้จะมาเขียนตัว app ที่ใช้ WebView ในการแสดงผลไฟล์ html5 ซึ่งเป็น Animation ที่สร้างขึ้นจากโปรแกรม Tumult Hype โดยตัวอย่างของไฟล์ html5 จะเอามาจาก Gallery ของเว็บ https://tumult.com/hype/gallery/ โดยจะเลือกตัวไฟล์ Fanta Ad มาใช้

ก่อนอื่นเราต้องทำการติดตั้ง Package ที่ชื่อ webview_flutter_plus ก่อน ตัวเวอร์ชั่นplus จะเป็นเวอร์ชั่นเพิ่มเติมจาก Package webview_flutter ตรงที่สามารถให้เราโหลดไฟล์ html จากไฟล์ assets โฟลเดอร์หรือจากไฟล์String ได้ แต่ในตัวอย่างนี้เราจะเอาไฟล์จากตัวเว็บไซด์ https://tumult.com/hype/gallery/FantaAd/FantaAd.html มาใช้ก่อน ซึ่งถ้าเราติดตั้ง Pubspec assist เราก็สามารถใช้คีย์บอร์ดพิมพ์ shift+ctrl+p แล้วพิมพ์ pubspec จากนั้นเลือก Pubspec Assist: Add/update dependencies แล้วพิมพ์ webview_flutter_plus ตัว vscode ก็จะทำการเพิ่ม package ให้ในไฟล์ pubspec.yaml อัตโนมัติ

จากนั้นทำการสร้าง main() โปรแกรมที่เรียก runApp(MyApp) โดย MyApp() จะเป็นstateful widget class

ให้ทำการสร้าง MyApp ที่เป็น stateful widget class โดยใน state class จะทำการสร้างตัวแปร String เพื่อเก็บชื่อเว็บไซด์ที่เราจะใช้ซึ่งในที่นี้คือ https://tumult.com/hype/gallery/FantaAd/FantaAd.html และทำการสร้างตัวแปร _controller ที่เป็น WebViewPlusController widget

ในส่วน build method ให้ return ตัว MaterialApp ที่มีค่าhome: Property เป็น Scaffold widget ซึ่งเป็น child: property ของ SafeArea widget อีกที ใน Scaffold widget ก็จะมี floatingActionButton: Property เพื่อให้ผู้ใช้สามารถ refresh การแสดงผลของไฟล์ html5 ได้ และในส่วน body: Property ซึ่งจะมี Container อยู่ 2 ตัว ตัวแรกสำหรับใช้แสดงไฟล์ html5 ด้วย WebViewPlus widget ซึ่งจะมีการกำหนดขนาดความสูงของ Container ไว้ที่ 600 ส่วน Container อีกอันจะใช้แสดงตัวอักษรที่อยู่ด้านล่าง ซึ่งใน Container ตัวนี้เราจะครอบด้วย Extended widget เพื่อปรับขนาดความสูงของ Container ให้ยืดหยุ่นในพื้นที่ที่เหลือจนเต็มหน้าจอ

ใน Container ส่วนแรกที่มีการเรียกใช้ WebViewPlus widget จะมีการกำหนดค่า javascriptMode: ให้เป็น JavascriptMode.unrestricted เพื่อทำให้สามารถเล่นไฟล์ Animation จาก html5 ได้ และกำหนดค่า onWebViewCreated: Property เพื่อกำหนดค่า Controller ให้ทำการแสดงผลไฟล์ html จากตัวแปร String ที่เรากำหนดชื่อเว็บไซด์ไว้ตอนแรก

ส่วน Container อันที่สองที่แสดงตัวอักษรจะทำการกำหนดรูปแบบด้วย TextStyle และ BoxDecoration widget

ในส่วนของ floatingActionButton จะกำหนดค่ารูปไอคอนและสีพื้นหลัง รวมถึงกำหนดค่า onPressed: Property ให้ทำการโหลดตัวไฟล์ ้html5 ใหม่อีกครั้งด้วยคำสั่ง _controller.reload()

เมื่อทำการรันโปรแกรมก็จะได้ app ที่สามารถแสดงไฟล์ html5 ได้ และเมื่อ Animation ของไฟล์ html5 เล่นจบลงผู้ใช้สามารถกดปุ่ม refresh เพื่อทำการโหลดและเล่นไฟล์ html5 ใหม่ได้ ดังรูป