精华内容
下载资源
问答
  • Flutter webview

    2019-10-29 15:28:38
    引入flutter_webview_plugin插件 pubspec.yaml文件中引入: dependencies: flutter_webview_plugin: ^0.3.8 权限配置 Flutter 本身并未集成webview,所以当需要使用webview 的时候,使用flutter_webview_plugin...

    引入flutter_webview_plugin插件

    pubspec.yaml文件中引入:

    dependencies:
       flutter_webview_plugin: ^0.3.8

    权限配置

    Flutter 本身并未集成webview,所以当需要使用webview 的时候,使用flutter_webview_plugin插件,也就是使用的原生webview组件

    flutter_webview_plugin 在使用过程中会iOS出现无法加载HTTP请求的情况, 但是Flutter 却可以加载HTTP请求。这就与两个的框架有关了,Flutter是独立于UIKit框架的。 解决方案:

    在iOS 的info.plist中添加对HTTP的信任。

    <key>NSAppTransportSecurity</key>
        <dict>
            <key>NSAllowsArbitraryLoads</key>
            <true/>
        </dict>

    在Android中

    1. 在D:\work_area\github\01-07-gxj-nss\android\app\src\main\res中添加xml文件夹
    2. xml文件夹下面创建network_security_config.xml,文件内容如下
       <network-security-config>
         <base-config cleartextTrafficPermitted="true">
             <trust-anchors>
                 <certificates src="system" />
             </trust-anchors>
         </base-config>
       </network-security-config>
    3. 修改D:\work_area\github\01-07-gxj-nss\android\app\src\main\AndroidManifest.xml文件
       <application
           // ...
           android:networkSecurityConfig="@xml/network_security_config"

    作用及使用

    在app中打开外部链接地址

    1. 参考网址:flutter_webview_plugin
    2. 使用方式1:

      import 'package:flutter/material.dart';
      import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
      
      void main() => runApp(MyApp());
      
       class MyApp extends StatelessWidget {
         // 直接在routes中使用
         final routes = {
           // 首页nss社区
           "index_nss_community":(_) => WebviewScaffold(
             url: "http://www.cnminer.cn/",
             appBar: AppBar(
               title:Text('nss社区'),
             ),
             // 允许网页缩放
             withZoom: true,
             // 允许LocalStorage
             withLocalStorage: true,
             // 允许执行js代码  
             withJavascript: true, 
           ),
         };
      
         @override
         Widget build(BuildContext context) {
      
         }
       }
    3. 使用方式2:

      import 'package:flutter/material.dart';
      import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
      
      void main() => runApp(MyApp());
      
       class MyApp extends StatelessWidget {
         // 定义路由
         final routes = {
           "index_new_direct":(context, {arguments}) => WebViewPage(arguments:arguments),
         };
      
         @override
         Widget build(BuildContext context) {
      
         }
       }
      // 页面中使用
      import 'package:flutter/material.dart';
      import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
      import 'package:flutter/services.dart';
      import 'package:orientation/orientation.dart';
      
      class WebViewPage extends StatefulWidget {
       final Map arguments;
       WebViewPage({Key key, this.arguments}) : super(key: key);
       @override
       _WebViewPageState createState() => _WebViewPageState();
      }
      
      class _WebViewPageState extends State<WebViewPage> {
       // 当前页面索引
       int currentIndex = 0;
       @override
       initState() {
         super.initState();
         currentIndex = widget.arguments["currentIndex"];
         OrientationPlugin.forceOrientation(DeviceOrientation.landscapeRight);
       }
      
       @override
       void dispose() {
         super.dispose();
         //返回时 设置回竖屏
         OrientationPlugin.forceOrientation(DeviceOrientation.portraitUp);
       }
      
       @override
       Widget build(BuildContext context) {
         // 跳转代码
         return WebviewScaffold(
           url: "https://www.feixiaohao.com/currencies/tickets/",
           appBar: AppBar(
             title: Text('nss新动向'),
           ),
           // 允许网页缩放
           withZoom: true,
           // 允许LocalStorage
           withLocalStorage: true,
           // 允许执行js代码
           withJavascript: true,
         );
       }
      }

    欢迎加群讨论更多flutter相关问题(7天有效)如果失效,可加个人微信拉群

     

    展开全文
  • Flutter WebView

    2020-11-13 15:46:42
    最近用到webview ,在pub.dev中搜索webviewflutter_webview_plugin的使用率比较高 网上大家发的贴子使用率也高,就导入调试,开始未仔细阅读文档, 需要在页面添加一个弹框,出现以下问题,第一张图为正常显示,第...

    最近用到webview ,在pub.dev中搜索webview,flutter_webview_plugin的使用率比较高 网上大家发的贴子使用率也高,就导入调试,开始未仔细阅读文档,  需要在页面添加一个弹框,出现以下问题,第一张图为正常显示,第二张图为显示弹框(popwindow/dialog 都试了),在webview上边沿出露出的部分发现弹框有显示 ,但被webview遮挡了。起初以为是布局问题,试了其他布局都无效,此时才去仔细阅读相关文档发现:

     Warning: The webview is not integrated in the widget tree, it is a native view on top of the flutter view. You won't be able see snackbars, dialogs, or other flutter widgets that would overlap with the region of the screen taken up by the webview.

      WebView并不存在于Widget树中,所以不能在WebView中使用如snackbars、dialogs等这些通知交互Widget

    所以大家在选择webview库的时候 要仔细根据自己的需求做选择

    flutter_webview_plugin:使用文档网上和官网都有很多 不做记录。后改用webview_media

    
     

     

    展开全文
  • <div><p>i have a webview (Flutter WebView Plugin) .when user goes to webview and click a link to download a file nothing is happening. Flutter WebView Plugin : ...
  • flutter webview

    2019-12-16 14:11:11
    child: WebView( key: _key, javascriptMode: JavascriptMode.unrestricted, initialUrl: url)) ], )); } _setTitle(context) { return new AppBar( brightness: Brightness.light, title: new Text...
    //展示网页数据
    class MyWebView extends StatefulWidget {
      String url;
      String title;
    
      MyWebView({Key key, @required this.url, @required this.title});
    
      @override
      createState() => _PageState(url: url, title: title);
    }
    
    class _PageState extends State<MyWebView> {
      String url;
      String title;
    
      _PageState({Key key, @required this.url, @required this.title});
    
      final _key = UniqueKey();
    
      @override
      void initState() {
        super.initState();
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: _setTitle(context),
            body: Column(
              children: [
                Expanded(
                    child: WebView(
                        key: _key,
                        javascriptMode: JavascriptMode.unrestricted,
                        initialUrl: url))
              ],
            ));
      }
    
      _setTitle(context) {
        return new AppBar(
          brightness: Brightness.light,
          title:
              new Text(title, style: TextStyle(color: Colors.black, fontSize: 20)),
          elevation: 1,
          leading: new IconButton(
              icon: new Icon(
                Icons.arrow_back_ios,
                color: Colors.black,
              ),
              onPressed: () {
                Navigator.pop(context);
              }),
          backgroundColor: Colors.white,
          centerTitle: true,
        );
      }
    }
    展开全文
  • WebView与JS互相调用是一个刚需,但是貌似现在大家写的文章讲的都不是很清楚,我这个简易指南简单粗暴地分为两部分:JS调用FlutterFlutter调用JS,拒绝花里胡哨,保证一看就懂,一学就会。 开始之前先简单了解...
  • Flutter webview插件是用来在APP内部加载网页的,它跟Flutter url_launcher插件的不同之处在于:前者只是在app内部打开web网页,而url_launcher则是调用手机默认的功能做事情,例如调用默认的浏览器打开web网页(跳出...

    Flutter webview插件是用来在APP内部加载网页的,它跟Flutter url_launcher插件的不同之处在于:前者只是在app内部打开web网页,而url_launcher则是调用手机默认的功能做事情,例如调用默认的浏览器打开web网页(跳出app了),调用默认的拨号功能打电话,调用手机发邮件功能给某个邮箱发邮件等,后者功能更多一点。

    Flutter webview插件的全称为flutter_webview_plugin(点击进入有官网文档),是Flutter官网开发的网页插件,那么我们如何来使用flutter webview插件呢?

    一:安装Flutter WebView插件

    首先在pubspec.yaml文件里面的“dependencies”下加入webview插件的依赖,如果有新版本请查看官网,代码如下所示:dependencies:

    flutter_webview_plugin: ^0.3.0+2

    在Dart文件顶部导入“flutter_webview_plugin”插件的包,代码如下:import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

    二:Flutter WebView使用简单说明

    Route路由实现:

    Flutter要跳转需要首先理解什么是Route路由,route就是从一个页面跳转到另外一个页面的封装,给这个页面的url取一个“name”标识,然后使用navigator来打开这个路由标识,代码如下:routes: {

    "/webview": (_) => WebviewScaffold(

    url: url,

    appBar: AppBar(

    title: Text("打开的网页"),

    ),

    withJavascript: true,

    withLocalStorage: true,

    withZoom: true,

    )

    },

    Navigator加载网页:

    Route路由定义好之后,我们就可以使用Navigator对象来加载网页了,代码如下:Navigator.of(context).pushNamed("/webview");

    三:Flutter WebView完整代码与效果展示

    此案例就是使用flutter webview插件来打开“TextField”输入框控件里面的网址,点击Button按钮则会执行打开网页的操作,完整代码如下:import 'package:flutter/material.dart';

    import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

    String url = 'http://www.baidu.com';

    void main() => runApp(MyApp());

    class MyApp extends StatelessWidget {

    // This widget is the root of your application.

    @override

    Widget build(BuildContext context) {

    return MaterialApp(

    title: 'Flutter Weview',

    theme: ThemeData(

    primarySwatch: Colors.green,

    ),

    home: MyHomePage(title: 'Webview'),

    routes: {

    "/webview": (_) => WebviewScaffold(

    url: url,

    appBar: AppBar(

    title: Text("打开的网页"),

    ),

    withJavascript: true,

    withLocalStorage: true,

    withZoom: true,

    )

    },

    );

    }

    }

    class MyHomePage extends StatefulWidget {

    MyHomePage({Key key, this.title}) : super(key: key);

    final String title;

    @override

    NewWeb createState() => NewWeb();

    }

    class NewWeb extends State {

    final webviewPlugin = FlutterWebviewPlugin();

    TextEditingController controller = TextEditingController(text: url);

    @override

    Widget build(BuildContext context) {

    // TODO: implement build

    return Scaffold(

    appBar: AppBar(

    title: Text("首页Webview"),

    ),

    body: Center(

    child: Column(

    children: [

    Container(

    padding: EdgeInsets.all(10.0),

    child: TextField(

    controller: controller,

    ),

    ),

    RaisedButton( //按钮点击事件

    child: Text("Open Webview"),

    onPressed: () {

    Navigator.of(context).pushNamed("/webview");

    },

    )

    ],

    ),

    ),

    );

    }

    @override

    void initState() {

    // TODO: implement initState

    super.initState();

    webviewPlugin.close();

    controller.addListener(() {

    url = controller.text;

    });

    }

    @override

    void dispose() {

    // TODO: implement dispose

    webviewPlugin.dispose();

    controller.dispose();

    super.dispose();

    }

    }

    上方代码的效果如图所示:

    6c6780f93cb29742f1211b198a3e232d.gif

    备注说明:

    官网中有介绍FlutterWebviewPlugin的launch()方法,它与flutter url_launcher插件打开网页的效果一样的,都是调用默认的浏览器打开web网页,而不是APP内部打开网页,这点要注意!

    来源网站:太平洋学习网,转载请注明出处:http://www.tpyyes.com/a/flutter/904.html

    展开全文
  • Flutter webview_flutter下拉select组件报错

    千次阅读 2020-01-06 14:16:42
    Flutter webview_flutter下拉select组件报错 Webview加载H5页面,打开select下拉组件,弹框,ios和浏览器都正在,安卓就闪退, 原因分析:Android dialog的context需要传activity,而flutter传的是Application; ...
  • Flutter webview加载视频无法播放 先上个github的链接吧:https://github.com/flutter/flutter/issues/27101#issuecomment-561316755 大体的顺序就是: 1、首先依赖flutter_inappwebview,(pub地址:...
  • Flutter WebView无法加载HTTP请求

    千次阅读 2020-07-02 18:56:27
    插件用的是 webview_flutter: ^0.3.21 看下怎么解决: 1、iOS添加信任 webview_flutter 在使用过程中会iOS出现无法加载HTTP请求的情况, 但是Flutter 却可以加载HTTP请求。这就与两个的框架有关了,Flutter是独立于...
  • 最近公司有项目用flutter+webview的方式开发(我知道这很蠢),其中有好多坑,在这里记录一下。 在这里我用的是flutter官方的webview组件 webview_flutter webview_flutter: ^0.3.13 引入方式如上,pub仓库地址为...
  • h5页面要从cookie里面取数据,所以需要在flutter webview的cookie里面塞一些数据,设置的数据多达十几条;按照网上查的使用方式来设置,通过fiddler抓包发现,只能生效一条,来来回回试了很多次都只有一条,心态崩了...
  • flutter webview 抖动

    2020-12-11 10:35:41
    flutter 1.22 和webview 1.20以后 webview 经常 Unable to acquire a buffer item, very likely client tried to acquire more than maxImages buffers 这是因为渲染异常 可能是1.22引擎和1.20的图层合并引起的...
  • 通过webview 进行flutter 和js 的互调,页面可以放在其他网站 也可以放在本地,我这里放在本地进行测试。 1.引入webview_flutter: ^0.3.5+2 这个是官网推荐用的, 还有一个好像api 里没有互调的操作。 ...
  • 使用的是官方 webview_flutter 库,感觉 flutterwebview 挺多坑的,所以记录一下。路由切换卡顿问题:使用 Navigator.of(context).push(...) 路由切换到一个含有 webview 的 page 时,首次渲染会卡顿,这是因为 ...
  • Flutter WebView加载及加载进度条

    千次阅读 2019-11-05 16:41:08
    Flutter加载Web目前为止体验还是不是很好与JS的交互较弱,目前插件方面推荐两个,webview_flutterflutter_webview_plugin. 我各人觉得flutter_webview_plugin要好一些,webview_flutter加载和显示方面明显差一点...
  • Flutter WebView插件研究

    2020-04-23 17:03:13
    Flutter 出来有几个年头了,目前还有不少问题,业内也在慢慢丰富各种插件来完善功能。 这里详细介绍 FlutterWebView 的坑。 首先介绍下目前pub上常用的两个插件: 1, ...
  • flutter webview 适配

    2020-02-23 09:42:16
    webView.getSettings().setTextZoom(100); webView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL);
  • Flutter Webview页面下弹框

    千次阅读 2019-04-04 21:10:08
    import 'package:flutter/material.dart'; import 'package:redenvelope/constant/colors.dart...import 'package:flutter_webview_plugin/flutter_webview_plugin.dart'; import 'package:font_awesome_flutter/fon...
  • Flutter Webview的使用

    2019-07-02 10:15:38
    安装插件 flutter_webview_plugin: ^0.2.1 跳转页面 Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) { return Web(); })); web页面 import 'package:flutter/material.dart'; import ...
  • flutter webview 与 前端vue通信

    千次阅读 2020-05-28 21:18:38
    flutter有3个比较好的webview插件 webview_flutter : 是官方维护的 WebView 插件,特性是基于原生和 Flutter SDK 封装,继承 StatefulWidget,因此支持内嵌于 flutter Widget 树中,这是比较灵活的; flutter_...
  • Flutter WebView与JS交互

    2020-11-05 16:41:14
    本文采用Flutter官方WebView插件:pub.dartlang.org/packages/we… WebView与JS互相调用是一个刚需,但是貌似现在大家写的文章讲的都不是很清楚,我这个简易指南简单粗暴地分为两部分:JS调用FlutterFlutter调用...
  • Flutter WebView返回

    千次阅读 2019-05-10 14:52:29
    1.使用WillPopScope包裹Scaffold  2.加上onWillPop方法 return WillPopScope( onWillPop: () { Future<bool> canGoBack = _webViewController.canGoBack();...webview使用的是 ...flutter_inappbrowser
  • 如果使用webview_flutter字体被放大了,可以添加如下两个配置 webView.getSettings().setUseWideViewPort(true); webView.getSettings().setLoadWithOverviewMode(true);
  • flutter.png在Flutter中使用webview,在pub.dev中查看,有几个组件都可以使用webviewflutter_webview.png本文使用的是webview_flutter,它是Flutter团队开发的,目前还不是正式版,但已经可以使用。在iOS中底层调用...
  • 本文记录了基于WebViewFlutter数据可视化库echarts_flutter的性能优化。 对于任何基于WebView的小部件,页面的加载始终是性能的关键部分。 echarts_flutter也不例外 ,其基础是使用WebView呈现echarts的本地页面。...
  • 本文记录了基于 WebViewFlutter 可视化库:echarts_flutter的一次优化加载性能的过程。 对于任何基于 WebView 的组件,html 的加载都是关乎性能的一个重要环节。echarts_flutter的基本原理是用 WebView 渲染...
  • 首先介绍下目前 pub 上常用的两个插件: 1,webview_flutter 是官方维护的 WebView 插件,是基于PlatformView实现的,可以放到任何地方,特别灵活;目前版本(0.3.20+2)优点:1.1,因为是基于PlatformV...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 819
精华内容 327
热门标签
关键字:

flutterwebview