본문 바로가기

개발하자

Flowter 웹 보기가 Flowter 웹에 대해 작동하지 않음

반응형

Flowter 웹 보기가 Flowter 웹에 대해 작동하지 않음

웹페이지를 URL로 보여주려고 합니다. 플러그인을 시도해보았지만 브라우저에서 프로젝트를 실행할 때 작동하지 않았습니다.

플러터 웹 애플리케이션에서 웹 페이지를 보여주는 다른 방법이 있나요?




모바일 쪽 로딩 문제에 직면한 사람이 이것을 사용한다면, 그것은 Flotter Android, Ios, Web에서 작동한다:-

EasyWebView(
        height: 400,
        width: 1000,
        isHtml: false, // Use Html syntax
        isMarkdown: false, // Use markdown syntax
        convertToWidgets: true,
        src: Uri.dataFromString('<html><body><iframe allow="camera *;microphone *" height="100%" width="100%"'
            ' frameborder="0" src="$url"></iframe></body></html>', mimeType: 'text/html').toString(),
      ),

당신들은 웹뷰를 사용하여 html의 Url을 사용하여 웹/앱의 웹페이지를 로드할 수 있습니다. 단지 src = "$url" :)




flot_webview_flots는 웹 페이지를 앱 안에 내장하는 것이다. 플러터 웹에서는 위젯을 사용해야 합니다. 대부분의 데모는 웹페이지를 내장하는 데 사용됩니다. 이 패키지는 모바일과 웹 플랫폼을 모두 자동으로 처리하는지 확인할 수 있습니다. 배포의 경우에 따라 내부적으로 및 자동으로 사용됩니다.

몇 가지 예를 이용할 수 있다

onLoad 수신기 추가를 위한 업데이트

IFrameElement iframeElement = IFrameElement()
      ..src = 'url'
      ..style.border = 'none'
      ..onLoad.listen((event) {
        // perform you logic here.
      });

    ui.platformViewRegistry.registerViewFactory(
      'webpage',
      (int viewId) => iframeElement,
    );

    return Directionality(
      textDirection: TextDirection.ltr,
      child: Center(
        child: SizedBox(
          width: double.infinity,
          height: double.infinity,
          child: HtmlElementView(viewType: 'webpage'),
        ),
      ),
    );



2023년 해답

패키지에 웹 지원이 추가되었습니다!

공식 Flower Inapp WebView 문서에서 을 읽을 수 있지만 요약하면 다음과 같습니다:

1. 스크립트 추가

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

2. InApp WebView 위젯 사용

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

WebView 및 Flutter 웹에서 수행할 수 있는 작업에는 몇 가지 제한이 있지만 단순히 콘텐츠를 표시하는 경우에는 이 제한이 적용됩니다.


반응형