Flutter Web 应用程序的 Web 视图

Question

我是 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>'

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

Answer 1

您应该将 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'),
)

Flutter Web 应用程序的 Web 视图

web view for flutter web application

webview

flutter

flutter-web