我是新手，我开始通过flutter创建一个web应用程序。我需要一个网页视图打开一个网页。webView适用于ios和android，但不支持web应用。
import 'dart:io';
import 'package:jsonmapper/articlemap.dart';
import 'package:main.dart';
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:webview_flutter/webview_flutter.dart';
class ArticlePage extends StatefulWidget {
final String title;
final String nid;
ArticlePage(this.title, this.nid, {Key key}) : super(key: key);
@override
_ArticlePageState createState() => _ArticlePageState();
}
class _ArticlePageState extends State<ArticlePage> {
ArticleMap _articleMap;
bool _firstnavigate = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
widget.title,
style: styles.textStyle(color: Colors.white),
overflow: TextOverflow.ellipsis,
),
),
body: Platform.isAndroid || Platform.isIOS
? WebView(
initialUrl: url,
javascriptMode: JavascriptMode.unrestricted,
navigationDelegate: (NavigationRequest request) {
if (_firstnavigate) {
_firstnavigate = false;
return NavigationDecision.navigate;
} else {
launch(request.url);
return NavigationDecision.prevent;
}
},
)
: launchURL(url),
);
}
launchURL(String url) async {
if (await canLaunch(url)) {
await launch(url);
} else {
throw 'Could not launch $url';
}
}
}
当我在web应用程序中午餐URL时，我有这个错误。
Expected a value of type 'widget?', but got one of type '_Future<dynamic>'
您期望将Widget传递给Scaffold.body属性，但launchURL(url)返回另一种类型(Future<dynamic>)。为了避免这个错误，你可以让用户点击一个按钮来启动你的url:
Platform.isAndroid || Platform.isIOS
? WebView(
initialUrl: url,
javascriptMode: JavascriptMode.unrestricted,
navigationDelegate: (NavigationRequest request) {
if (_firstnavigate) {
_firstnavigate = false;
return NavigationDecision.navigate;
} else {
launch(request.url);
return NavigationDecision.prevent;
}
},
) : ElevatedButton(
onPressed: () => launchURL(url),
child: Text('Go to Website'),
)
2023年的答案
flutter_inappwebview包刚刚在6.0.0版本中添加了对web的支持!你可以在inappwebview博客上阅读官方发布声明。
新的文档包含web设置说明。以下是摘要:
1。添加flutter_inappwebview依赖项
flutter_inappwebview: ^6.0.0-beta.22
2。添加脚本到
<head>
<!-- ... -->
<script type="application/javascript" src="/assets/packages/flutter_inappwebview/assets/web/web_support.js" defer></script>
<!-- ... -->
</head>
3。使用InAppWebView小部件
Scaffold(
body: SafeArea(
child: InAppWebView(
initialUrlRequest: URLRequest(url:WebUri('https://flutter.dev/')),
)
)
);
请注意，在WebView和Flutter网页中可以做些什么有一些限制，但对于简单地显示内容，这应该可以工作。