Flutter开发 webview_flutter的基本使用

来来走走2025-08-18 20:48

flutter不提供webiew。所以要使用webview_flutter插件。webview_flutter支持ios和android。

申请权限

xml 复制代码

    <uses-permission android:name="android.permission.INTERNET" />

引入插件

yaml 复制代码

dependencies:
  webview_flutter: ^4.13.0

效果

代码

dart 复制代码

class MyState extends State {


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


  @override
  Widget build(BuildContext context) {


    WebViewController   controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setNavigationDelegate(
        NavigationDelegate(
          onProgress: (int progress) {
            // Update loading bar.
          },
          onPageStarted: (String url) {},
          onPageFinished: (String url) {},
          onHttpError: (HttpResponseError error) {},
          onWebResourceError: (WebResourceError error) {},
          onNavigationRequest: (NavigationRequest request) {
            if (request.url.startsWith('https://www.youtube.com/')) {
              return NavigationDecision.prevent;
            }
            return NavigationDecision.navigate;
          },
        ),
      );
    controller.loadRequest(Uri.parse('https://flutter.cn'));

    return Scaffold(
      appBar: AppBar(
        title: Text("登录"),
        centerTitle: true,
        backgroundColor: Colors.blue,
        foregroundColor: Colors.white,
      ),
      body: WebViewWidget(controller: controller),
    );
  }
}