Flutter中使用flutter_inappwebview加载远程的html文件

越陌度阡

发布于 2021-01-13 10:42:36

2.4K0

发布于 2021-01-13 10:42:36

文章被收录于专栏：大前端（横向跨端 & 纵向全栈）大前端（横向跨端 & 纵向全栈）大前端（横向跨端 & 纵向全栈）

1. 安装插件

配置 flutter_inappwebview 插件。

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  date_format: ^1.0.6
  flutter_cupertino_date_picker: ^1.0.26+2 
  flutter_swiper: ^1.1.6
  fluttertoast: ^7.1.6
  http: ^0.12.2
  dio: ^3.0.10
  flutter_html: ^1.1.0

  # 加载远程HTML插件
  flutter_inappwebview: ^4.0.0+4

在pubspec.yaml中配置保存后，在VS Code环境中会自动下载依赖包。

如果无法正常下载，执行 flutter pub get 。

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. 完整示例

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

以下是加载远程页面的效果图。