Flutter开发 webview_flutter的基本使用

发布于:2025-08-16 ⋅ 阅读:(14) ⋅ 点赞:(0)

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

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

引入插件

dependencies:
  webview_flutter: ^4.13.0

效果
请添加图片描述
代码

class MyState extends State {


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


  
  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),
    );
  }
}

网站公告

今日签到

点亮在社区的每一天
去签到