CODEWITHSUNDEEP
flutterwebviewflutter-web
Abbas Asadi
Abbas Asadi

Reputation: 344

web view for flutter web application

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?!

Upvotes: 7

Views: 4837

Answers (2)

Code on the Rocks
Code on the Rocks

Reputation: 17794

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.

Upvotes: 3

Marw&#233;n
Marw&#233;n

Reputation: 38

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

Upvotes: 2

Related Questions