# Flutter 好用package - webview_flutter 介紹

## webview_flutter

在flutter中開啟網頁

flutter pub add webview_flutter

使用此套件minSdkVersion(android/app/build.gradle)需設置高於19

android {
    defaultConfig {
        minSdkVersion 19
    }
}

[官網](https://pub.dev/packages/webview_flutter)

### 程式範例

class WebviewPage extends StatefulWidget {
  const WebviewPage({super.key, required this.url});

  final String url;

  @override
  State<WebviewPage> createState() => _WebviewPageState();
}

class _WebviewPageState extends State<WebviewPage> {
  late final WebViewController _controller;

  @override
  void initState() {
    super.initState();

    final WebViewController controller =
        WebViewController.fromPlatformCreationParams(
            const PlatformWebViewControllerCreationParams());

    controller
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setNavigationDelegate(
        NavigationDelegate(
          onProgress: (int progress) {
            context.read<WebviewManager>().changeLoadingProgress(progress);
          },
          onPageStarted: (String url) {
            context.read<WebviewManager>().changeLoadingStatus(true);
          },
          onPageFinished: (String url) {
            context.read<WebviewManager>().changeLoadingStatus(false);
          },
          onWebResourceError: (WebResourceError error) {
            context
                .read<DialogManager>()
                .setErrorDialog(error, DialogType.webviewError);
          },
        ),
      )
      ..loadRequest(Uri.parse(widget.url));

    _controller = controller;
  }

  @override
  Widget build(BuildContext context) {
    return WebViewWidget(controller: _controller);
  }
}

## Exception
### WebView.destroy() called while WebView is still attached to window.
此問題發生原因為 webview 尚未載入完全就被移除，若有進行 widget 切換需特別注意此狀況。

###### tags: `flutter`