flutter_inappwebview | Flutter Package (pub.dev)

flutter_inappwebview: ^5.3.2

1. 安装插件

配置 flutter_inappwebview 插件。

2. 引入依赖

在需要用到的该插件的文件中引入插件包。

import 'package:flutter_inappwebview/flutter_inappwebview.dart';

3. 使用插件

InAppWebView(
    initialUrl: "https://www.baidu.com",
    initialHeaders: {},
    initialOptions: InAppWebViewGroupOptions(
        inAppWebViewOptions: InAppWebViewOptions(
        debuggingEnabled: true,
        )
    ),
    onWebViewCreated: (InAppWebViewController controller) {
 
    },
    onLoadStart: (InAppWebViewController controller, String url) {
 
    },
    onLoadStop: (InAppWebViewController controller, String url) {
 
    },
)

4. 注意事项

1. 如果提示SDK版本太低，请按如下配置进行升级。

 2. 如果提示没有网络权限时，请添加如下配置添加网络权限。

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
 
class DetailPage extends StatefulWidget {
    final Map arguments;
    DetailPage({Key key,this.arguments}) : super(key: key);
 
    @override
    _DetailPageState createState() => _DetailPageState(this.arguments);
}
 
class _DetailPageState extends State<DetailPage> {
 
    // 是否显示加载动画
    bool _flag = false;
    final Map arguments;
    _DetailPageState(this.arguments);
 
    @override
    void initState() {
        super.initState();
    }
 
    @override
    Widget build(BuildContext context) {
        return Container(
            child: Scaffold(
                appBar: AppBar(
                    title: Text("新闻详情"),
                ),
                body: Column(
                    children: <Widget>[
                        this._flag?_getMoreWidget():Text(""),
                        Expanded(
                            // 官方代码
                            child:InAppWebView(  
                                initialUrl: "https://blog.csdn.net/weixin_40629244/article/details/112342422",
                                // 加载进度变化事件
                                onProgressChanged: (InAppWebViewController controller, int progress) {
                                    if((progress/100)>0.999){
                                        setState(() {
                                            this._flag=false;
                                        });
                                    }
                                },
                            ),
                        )
                    ],
                )
            )
        );
    }
    // 加载状态
    Widget _getMoreWidget() {
        return Center(
            child: Padding(
                padding: EdgeInsets.all(10.0),
                child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                        Text(
                            '加载中...',
                            style: TextStyle(fontSize: 16.0),
                        ),
                        CircularProgressIndicator(
                            strokeWidth: 1.0,
                        )
                    ],
                ),
            ),
        );
    }
}