当前位置 博文首页 > flutter笔记_jcLee95的博客：flutter学习——使用webview

最大化 缩小

    flutter笔记_jcLee95的博客：flutter学习——使用webview

    作者：[db:作者] 时间：2021-09-18 15:46

    1.安装

    flutter pub add webview_flutter

    2.导入

    import 'package:webview_flutter/webview_flutter.dart';

    3.设置android/app/build.gradle

    android {
    defaultConfig {
        minSdkVersion 19
    }
}

    在这里插入图片描述

    然后打开android/app/src/debug/AndroidManifest.xml添加：

         <application  android:usesCleartextTraffic="true">
    </application>

    在这里插入图片描述

    (如果不设置则在调试或编译时会出现版本不兼容错误)

    4. 可以将webView插件写成一个单独的文件

    新建一个dart文件WebPage.dart编辑以下内容

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

import 'package:webview_flutter/webview_flutter.dart';

class WebPage extends StatelessWidget {
  final String _url;
  WebPage(this._url);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: WebView(
          initialUrl: _url,
        ),
      ),
    );
  }
}

    在main.dart中导入和使用：

    import 'package:flutter/material.dart';
import 'pages/WebPage.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'jcstdio',
        theme: ThemeData(
          primarySwatch: Colors.blueGrey,
        ),
        home: WebPage("http://thispage.tech:8001/#/"));
  }
}

    5.解决net::ERR_CLEARTEXT_NOT_PERMITTED网络无权限：

    编辑android/app/src/main/AndroidManifest.xml文件，添加：

    android:usesCleartextTraffic="true"，
    cs
    上一篇：jcLee95的博客：node + ts读取csv文件为二维数组
    下一篇：没有了