flutter_webview_plugin 与dart页面跳转使用

使用flutter_webview_plugin 加载一个H5页面,是从dart页面中跳转h5页面,h5页面中可返回dart页面,也可跳转到其他dart页面。
经测试,在Android上可正常使用,但在ios上关闭web页面时显示白屏,web页面并没有close,还没找到原因。。。

import 'dart:io';
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:nav_router/nav_router.dart'; // 路由插件
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import 'class_room.dart'; // dart文件

class ClassRoomWebView extends StatefulWidget {
  ClassRoomWebView({this.url}) : super();
  final String url; // 外部传入的URL

  @override
  _ClassRoomWebViewState createState() => _ClassRoomWebViewState();
}

class _ClassRoomWebViewState extends State<ClassRoomWebView> {
  BuildContext _context;
  FlutterWebviewPlugin flutterWebviewPlugin = FlutterWebviewPlugin();
  double _navBarHeight = 27;// 刘海高度

  @override
  void initState() {
    super.initState();

    flutterWebviewPlugin.onUrlChanged.listen((loadUrl){
      //WebviewScaffold 加载的url变化时触发此方法
      // print('===>>当前 url:$loadUrl');

      // h5 点退出按钮,关闭webView
      if (loadUrl.endsWith('/backapp')){
        flutterWebviewPlugin.close();
        pop();
      }
      // 跳转到dart页面
      else if (loadUrl.endsWith('/policy')){
        // 因为flutter_webview_plugin 是浮在flutterUI上的一层视图,它不在widget树中,跳转到dart页面时,需要隐藏掉web页面,再跳回来时再显示web页面
        flutterWebviewPlugin.hide(); 
        routePush(ClassRoomPage()).then((value) {
          flutterWebviewPlugin.show();
          flutterWebviewPlugin.reloadUrl(widget.url);
        });

//跳转到dart页面时,也可以关闭掉web页面,再跳回来时再创建一个web页面
        // flutterWebviewPlugin.close();
        // routePush(ClassRoomPage()).then((value){
        //   flutterWebviewPlugin.launch(widget.url,
        //     rect: new Rect.fromLTWH( // 设置web页面的尺寸
        //       0.0,
        //       _navBarHeight,
        //       MediaQuery.of(_context).size.width,
        //       MediaQuery.of(_context).size.height-_navBarHeight,
        //     ),
        //   );
        // });
      }
    });

    //加载错误时监听
    // flutterWebviewPlugin.onHttpError.listen((error){
    //   print('加载错误:${error.code}  ${error.url}');
    // });

    //加载状态变化监听
    // flutterWebviewPlugin.onStateChanged.listen((state){
    //   print('状态监听:${state.type.toString()}');
    // });
  }
  @override
  void dispose() {
    flutterWebviewPlugin.dispose(); // 页面退出时销毁flutter_webview_plugin
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    _context = context;
    _navBarHeight = MediaQuery.of(context).padding.top; //屏幕刘海高度

    return WebviewScaffold(
// 导航栏是H5页面的,这里需要留出刘海的高度
      appBar: PreferredSize(
          child: Container(
            color: Colors.white,
          ),
          preferredSize: Size.fromHeight(0)
      ),
      url: widget.url,
      initialChild: Container(
        color: Colors.green,
        child: Center(
          child: Text('加载中...',style: TextStyle(fontSize: 14, color: Colors.black),),
        ),
      ),
    );
  }

}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容