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

  @override
  Widget build(BuildContext context) {
    return WebviewScaffold(
      appBar: _setTitle(context),
      url: widget.url,
      mediaPlaybackRequiresUserGesture: false,
      withZoom: false,
      withLocalStorage: true,
      hidden: true,
    );
  }

  _progressBar(double progress, BuildContext context) {
    return Container(
      child: LinearProgressIndicator(
        backgroundColor: Colors.blueAccent.withOpacity(0),
        value: progress == 1.0 ? 0 : progress,
        valueColor: new AlwaysStoppedAnimation<Color>(Colors.lightBlue),
      ),
      height: 1,
    );
  }

  _setTitle(context) {
    return AppBar(
      brightness: Brightness.light,
      title: Text(title, style: TextStyle(color: Colors.black, fontSize: 20)),
      elevation: 1,
      leading: IconButton(
          icon: Icon(Icons.arrow_back_ios, color: Colors.black),
          onPressed: () => Navigator.pop(context)),
      backgroundColor: Colors.white,
      centerTitle: true,
      bottom: PreferredSize(
        child: _progressBar(lineProgress, context),
        preferredSize: Size.fromHeight(0.1),
      ),
    );
  }

  @override
  void dispose() {
    _webViewPlugin.dispose();
    super.dispose();
  }
}

更多详解：
喜欢可以加@群号:913934649

简书： https://www.jianshu.com/u/88db5f15770d

csdn：https://me.csdn.net/beyondforme

掘金：https://juejin.im/user/5e09a9e86fb9a016271294a7

踏云归发布了126 篇原创文章 · 获赞 18 · 访问量 5万+ 私信关注

flutter webview 带进度条,加载框

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

相关推荐