web view for flutter web application
Asked Answered
K

2

7

I'm new in flutter and I start to create a web application via flutter. I need a web view for opening a internet page. webView is worked for ios and android but not support web application.

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';
    }
  }
}

when I lunch URL in web application I have this error.

Expected a value of type 'widget?', but got one of type '_Future<dynamic>'

do you have any idea or better solution for this problem?!

Kana answered 23/2, 2021 at 7:24 Comment(1)
this trick worked for me: I hope to be usefulKana
E
3

Answer for 2023

The flutter_inappwebview package just added support for the web in version 6.0.0! You can read the official release statement on the inappwebview blog.

The new docs contain web setup instructions. Here is the summary:

1. Add the flutter_inappwebview dependency

flutter_inappwebview: ^6.0.0-beta.22

2. Add script to

<head>
  <!-- ... -->
    <script type="application/javascript" src="/assets/packages/flutter_inappwebview/assets/web/web_support.js" defer></script>
  <!-- ... -->
</head>

3. Use the InAppWebView Widget

Scaffold(
    body: SafeArea(
      child: InAppWebView(
        initialUrlRequest: URLRequest(url:WebUri('https://flutter.dev/')),
       )
    )
);

Note that there are some restrictions on what can be done in a WebView an Flutter web but for simply displaying content, this should work.

Eristic answered 13/2, 2023 at 20:49 Comment(0)
R
2

You are expected to deliver a Widget to the Scaffold.body property but launchURL(url) is returning another type (Future<dynamic>). To get rid of the error you can for example let the user click on a button to launch your 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'),
)
Raspy answered 23/2, 2021 at 9:36 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.