flutter webview 带进度条,加载框

最新推荐文章于 2024-09-29 09:11:42 发布

原创

最新推荐文章于 2024-09-29 09:11:42 发布 · 2.9k 阅读

0 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

文章标签：

#flutter #webview #进度条 #加载框

本文介绍了如何在Flutter应用中创建一个自定义的Webview，以显示网页加载进度条和加载框，解决加载过程中的用户体验问题。详细内容包括相关代码示例和作者的联系方式。

网页加载中,没有进度条,一片空白,实在不雅观,实现的效果如下:

自定义webview,展示进度条和加载框

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

//展示网页数据
// ignore: must_be_immutable
class MyWebViewPage extends StatefulWidget {
  String url;
  String title;

  MyWebViewPage({Key key, @required this.url, @required this.title});

  @override
  createState() => _PageState(url: url, title: title);
}

class _PageState extends State<MyWebViewPage> {
  _PageState({Key key, @required this.url, @required this.title});

  String url;
  String title;
  FlutterWebviewPlugin _webViewPlugin = FlutterWebviewPlugin();

  double lineProgress = 0.0;

  initState() {
    super.initState();
    _webViewPlugin.onProgressChanged.listen((progress) {
      print(progress);
      setState(() {
        lineProgress = progress;
      });
    });