如何在 Flutter 中使用 WebView?- 小女 Android 工程師實驗筆記

Chloe Hsu
5 min readMar 11, 2019

--

在開發 APP 的時候,很常會需要開啟網頁。想像你在點擊 APP 中任何一個按鈕,並開始開啟你的瀏覽器再開啟網頁,那不是有點….

Android Webview 不負責任簡易介紹

先來看看,在 Android 裡怎麼做一個 Webview 出來

取自:Android WebView TutorialPoint

在 Android 世界中,要先在 Layout 檔(XML檔) 中 ,放入Webview這個元件。

取自:Android WebView TutorialPoint

再從相對應的 Activity 或是 fragment 或是 Custom view 等中,嵌入 Layout 和宣告 Layout 檔中各種的 findViewById…

相信 Android 工程師懂我這邊在說什麼 (這邊不多提了拉

在 Flutter 中要如何實作 Webview 呢?

Google Flutter Team 已經有做好的 Package 可以直接用了。剛開始搜出來的時候會找到三個 Package。

Flutter Packages 直接搜尋 webView 就會找到以上的 Packages

取自:webview_flutter

webview_flutter 是由 Google Flutter Team 做的 webView package。現在還在開發階段,不過已經可以用了,只是還不是正式版。之後可能還會有更新要一起更新上去 :D

實作

Step1

和用任何一個 Package 一樣,到 pubspec.yml 的 dependencies 下加入 webview_flutter 的 package。AS 上會出現提醒你說要 Get Dependencies 或者可以在 command line 輸入:Flutter package get

Step2

建了一個 WebViewWidget。

再來是重要要用的兩個 name parameters:

initialUrl :把要開的網址放在這裡。

javascriptMode : 將值設為 JavascriptMode.unrestricted.

來看成果吧!

Dala ! 是不是超簡單!(影片中,是點第三個選項開啟)

處理 IOS 裝置

根據文件,別忘了要在 IOS Runner 裡的 info.plist 檔中加入:

不然這個 package 沒辦法在 IOS 裝置上使用,而在 build 的時候會看到Flutter 給你報錯

<key>io.flutter.embedded_views_preview</key>
<string>YES</string>

為什麼推薦用 webview_flutter ?

從 Flutter packages 搜尋 webView 的 Package 大概有三、四個。Google 自行開發前,雖然都推用 flutter_webview_plugin 0.3.0+2,但因為同事使用後,用起來怪怪的。相較於 flutter_webview_plugin 0.3.0+2,我更喜歡用 Google team 自行開發的 webview_flutter他們將 Webview 直接做成一個 Widget ,用起來比較直觀單純。 和 Android 相比來說也更簡易快速!

另外,推薦看 Flutter channel 。這集在講使用這webview_flutter 這個 packgage。雖然說是 “Boring” ,但看他們 debug的過程和 murmur 實在太有趣了!

Incorporating Web View into Your App (The Boring Flutter Development Show, Ep. 14)

或是你也想看看 Flutter Team Emily 如何教你用 webview_flutter :D

--

--

Chloe Hsu
Chloe Hsu

Written by Chloe Hsu

Mobile Engineer | Flutter | Android @ Berlin

Responses (2)