Flutter WebView(flutter_inappwebview)
2022/1/29 23:36:53
本文主要是介绍Flutter WebView(flutter_inappwebview),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
Flutter WebView
WebView在flutter中的实现方法主要有三种,三种的对比可以参考这篇文章
在https://pub.dev/上搜索webview
我们选择的是第三种flutter_inappwebview
官方文档给出了在使用时的要求
使用方法如下
- 添加依赖
dependencies: flutter_inappwebview: ^5.3.2
使用时在对应文件下导包
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
-
把minSdkVersion改为17
-
添加网络权限
<uses-permission android:name="android.permission.INTERNET"/>
-
使用
InAppWebView中有很多属性,这里我们只监听了加载进度onProgressChanged,通过监听加载进度,我们可以在还未加载出网页时显示一个进度圈,加载超过99.9%不显示加载圈显示链接网页内容
import 'package:flutter/material.dart'; import 'package:flutter_inappwebview/flutter_inappwebview.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: const MyHomePage(), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({Key? key}) : super(key: key); @override State<MyHomePage> createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { bool _flag = true; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("WebView"), ), body: Column( children: [ this._flag ? _getMoreWidget() : Text(""), Expanded( child: InAppWebView( //老版本:initialUrl 新版本:initialUrlRequest initialUrlRequest: URLRequest( url: Uri.parse( "https://blog.csdn.net/m0_46527751?spm=1018.2226.3001.5343")), onProgressChanged: (controller, progress) { if (progress / 100 > 0.9999) { 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, ) ], ), ), ); } }
这篇关于Flutter WebView(flutter_inappwebview)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)
- 2024-05-31全网首发!软考2024年5月《软件设计师》真题+解析+答案!(21-30题)
- 2024-05-30【Java】百万数据excel导出功能如何实现
- 2024-05-30我们小公司,哪像华为一样,用得上IPD(集成产品开发)?