Flutter로 WebView 구현 및 JavaScript 활성화

4876 단어 webViewDartFlutter
우선은 부 b. 에서 v 에서 "webview"를 검색해 본다.

위에서 차례로 인기있는 WebView 플러그인이 표시되었으므로 webview_flutter을 사용해보십시오. Updated도 새로운 날짜이므로 선택으로 좋을 것 같다.

Android Studio에서 New Flutter Project를 신규 작성.
Flutter Application을 선택합니다.

WebView plugin을 도입하는 순서가 설치 에 기재되어 있으므로 순서대로 진행한다.

pubspec.yaml의 dependencies: 부하에 webview_flutter: ^1.0.7의 기재를 추가.

pubspec.yaml
dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.1
  webview_flutter: ^1.0.7

main.dart 파일의 시작 부분에 아래의 import 문을 추가.

main.dart
import 'package:webview_flutter/webview_flutter.dart';

클래스 _MyHomePageState 중 아래 initState를 추가.
"Undefined name 'Platform'."이라는 경고가 표시되므로 import 'dart:io';
main.dart
@override
void initState() {
  super.initState();
  // Enable hybrid composition.
  if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
}
return Scaffold(...); 부분을 아래 코드로 대체.

main.dart
@override
Widget build(BuildContext context) {
  return WebView(
    initialUrl: 'https://flutter.dev',
  );

이것만으로 쉽게 WebView를 시작할 수있었습니다.



초기 설정 URL 변경 · JavaScript 사용


https://flutter.dev 의 부분을 임의의 URL로 재작성해 봅니다.https://yahoo.co.jp 를 표시시켜 보았을 때 "JavaScript가 무효입니다"라고 표시되었으므로 아래의 순서로 JavaScript를 유효화한다.
javascriptMode: JavascriptMode.unrestricted 의 기재를 URL 초기 지정의 직후에 추가.

main.dart
@override
Widget build(BuildContext context) {
  return WebView(
      initialUrl: 'https://yahoo.co.jp',
      javascriptMode: JavascriptMode.unrestricted
  );



위의 경고가 더 이상 표시되지 않습니다.

iOS 시뮬레이터에서도 설정한 초기 URL의 페이지를 문제없이 표시 확인할 수 있었다.

좋은 웹페이지 즐겨찾기