Flutter Web 应用程序的 Web 视图答案

【问题标题】：web view for flutter web applicationFlutter Web 应用程序的 Web 视图
【发布时间】：2021-05-25 11:11:14
【问题描述】：

我是 Flutter 的新手，我开始通过 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>'

你对这个问题有什么想法或更好的解决方案吗？！

【问题讨论】：

this 技巧对我有用：我希望有用

标签： flutter webview flutter-web

【解决方案1】：

您应该将Widget 传递给Scaffold.body 属性，但launchURL(url) 正在返回另一种类型（Future<dynamic>）。为了摆脱错误，您可以例如让用户单击一个按钮来启动您的网址：

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'),
)

【讨论】：