Flutter로 WebView 구현 및 JavaScript 활성화
위에서 차례로 인기있는 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의 페이지를 문제없이 표시 확인할 수 있었다.
Reference
이 문제에 관하여(Flutter로 WebView 구현 및 JavaScript 활성화), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/TechAngel/items/3cdc985ac3993f47c523
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
@override
Widget build(BuildContext context) {
return WebView(
initialUrl: 'https://yahoo.co.jp',
javascriptMode: JavascriptMode.unrestricted
);
Reference
이 문제에 관하여(Flutter로 WebView 구현 및 JavaScript 활성화), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/TechAngel/items/3cdc985ac3993f47c523텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)