flutter笔记:使用flutter webvie

简介: flutter笔记:使用flutter webvie

flutter笔记:使用flutter webvie



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",
目录
相关文章
|
3月前
|
Dart
Flutter笔记:手动配置VSCode中Dart代码自动格式化
Flutter笔记:手动配置VSCode中Dart代码自动格式化
466 5
|
3月前
|
存储 开发者 UED
Flutter笔记:谈Material状态属性-为什么FlatButton等旧版按钮就废弃了
Flutter笔记:谈Material状态属性-为什么FlatButton等旧版按钮就废弃了
76 4
|
3月前
|
开发者 Windows
Flutter笔记:Widgets Easier组件库(9)使用弹窗
Flutter笔记:Widgets Easier组件库(9)使用弹窗
110 3
|
3月前
|
JavaScript 前端开发 Android开发
Flutter笔记:关于WebView插件的用法(下)
Flutter笔记:关于WebView插件的用法(下)
220 5
|
3月前
|
数据安全/隐私保护 Android开发 开发者
Flutter笔记:Widgets Easier组件库-使用隐私守卫
Flutter笔记:Widgets Easier组件库-使用隐私守卫
51 2
|
3月前
|
UED 开发者
Flutter笔记:Widgets Easier组件库(13)- 使用底部弹窗
Flutter笔记:Widgets Easier组件库(13)- 使用底部弹窗
60 2
|
3月前
|
开发者
Flutter笔记:Widgets Easier组件库(5)使用加减器
Flutter笔记:Widgets Easier组件库(5)使用加减器
84 2
|
3月前
|
开发者 容器
Flutter笔记:Widgets Easier组件库(4)使用按钮组
Flutter笔记:Widgets Easier组件库(4)使用按钮组
33 2
|
3月前
|
开发者 容器
Flutter笔记:Widgets Easier组件库(3)使用按钮组件
Flutter笔记:Widgets Easier组件库(3)使用按钮组件
46 2
|
3月前
|
数据采集 API 调度
Flutter笔记:关于SchedulerBinding
Flutter笔记:关于SchedulerBinding
86 1