WebView во Flutter for Web не загружает Карты Google или другие - PullRequest
Новая
       12

WebView во Flutter for Web не загружает Карты Google или другие

0 голосов
/ 30 октября 2019

Привет,

У меня проблема с тем, что мой WebView не загружается. Это показывает только загрузочный экран.

Я использую flutter_webview_plugin в Flutter for Web. Я понятия не имею, почему его всегда загружается. Он делает это всегда, с любым веб-сайтом, который я пробовал. 

import 'package:flutter/material.dart';
import 'package:website_aalen_by_night/widgets/info_card.dart';
import 'package:website_aalen_by_night/widgets/nav_bar.dart';

import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AAlen by Night',
      theme: ThemeData.dark(),
      home: WebsiteAalenByNight(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class WebsiteAalenByNight extends StatefulWidget {
  @override
  WebsiteState createState() => WebsiteState();
}

ScrollController controller = new ScrollController();

class WebsiteState extends State {
  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;

    FlutterWebviewPlugin().onHttpError.listen((WebViewHttpError item) {
      print("   WebView    onHttpError.code: ${item.code}");
    });

    return Scaffold(
      backgroundColor: Color.fromRGBO(79, 79, 79, 1),
      body: Stack(
        children: <Widget>[
          Scrollbar(
            child: ListView(
              controller: controller,
              children: <Widget>[
                InfoCard(),
                Image(
                  image: AssetImage("lib/images/map.png"),
                  //height: height,
                  width: width,
                  fit: BoxFit.cover,
                ),
                InfoCard(),
                LimitedBox(
                  maxWidth: width,
                  maxHeight: height,
                  child: WebviewScaffold(
                    url: "https://www.google.com",
                    withZoom: false,
                    withLocalStorage: false,
                    withJavascript: true,
                    withLocalUrl: true,
                  ),
                ),
              ],
            ),
          ),
          NavBar(),
        ],
      ),
    );
  }
}

Цель этого - реализовать карту с маркерами на экране. Таким образом, я полагал, что могу попробовать WebView, но с этим я скоро остановился.

Может быть, есть лучший способ реализовать карту (попробовал несколько других вещей, таких как использование плагина карты вместо этого, но я не сталне найдете ничего, что работает для Flutter for Web).

Очень важно, чтобы оно работало на Flutter for Web, а НЕ на любой другой платформе!

Спасибоза помощь ....

Может быть, в будущем я смогу ответить на такие вопросы другим: D

1 Ответ

1 голос
/ 31 октября 2019

Я не думаю, что https://github.com/fluttercommunity/flutter_webview_plugin работает в Интернете, поскольку использует нативные библиотеки.

ОДНАКО большое преимущество использования браузера для приложения-флаттера в том, что вы можете использоватьHTML, и вам не нужно веб-просмотр там!

проверьте пример использования вложенного проигрывателя YouTube 

void main() {
  ui.platformViewRegistry.registerViewFactory(
      'hello-world-html',
      (int viewId) => IFrameElement()
        ..width = '640'
        ..height = '360'
        ..src = 'https://www.youtube.com/embed/IyFZznAk69U'
        ..style.border = 'none');

  runApp(Directionality(
    textDirection: TextDirection.ltr,
    child: SizedBox(
      width: 640,
      height: 360,
      child: HtmlElementView(viewType: 'hello-world-html'),
    ),
  ));
}

source

Конечно, общение с контентомэто другая история, так как это iframe, а в веб-браузерах включена поддержка CORS, это означает, что вы не можете получить доступ к iframe из флаттера, в случае карт Google они имеют URL api и передают местоположение ваших маркеров. там;)

...