Flutter WebView 4.0 예제

Flutter 에서 WebView를 사용하기 위한 설정이다.

 

Android 설정

android/app/src/main/AndroidManifest.xml 파일에 추가할 사항

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.link2me.flutter.webview">
 
    <uses-permission android:name="android.permission.INTERNET"/>
    
   <application
        android:label="webview"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher"
        android:usesCleartextTraffic="true">

 

IOS 설정

ios/Runner/info.plist 파일 하단에 추가할 사항

    <key>CADisableMinimumFrameDurationOnPhone</key>
    <true/>
    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsLocalNetworking</key>
        <true/>
        <key>NSAllowsArbitraryLoadsInWebContent</key>
        <true/>
    </dict>
</dict>
</plist>

 

pubspec.yaml

name: webview
description: A new Flutter project.
 
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
 
version: 1.0.0+1
 
environment:
  sdk: ">=2.17.6 <3.0.0"
 
dependencies:
  flutter:
    sdk: flutter
 
  cupertino_icons: ^1.0.2
  webview_flutter: ^3.0.0
 
dev_dependencies:
  flutter_test:
    sdk: flutter
 
  flutter_lints: ^2.0.0
 
flutter:
 
  uses-material-design: true
 
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages

 

webview 소스코드

import 'package:flutter/material.dart';
import 'package:webview/screen/home_screen.dart';
 
void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    )
  );
}

 

lib/screen/home_screen.dart

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
 
class HomeScreen extends StatelessWidget {
  WebViewController? controller;
  final homeUrl = 'https://m.naver.com/';
 
  HomeScreen({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('모바일 네이버'),
        centerTitle: true,
        actions: [
          IconButton(
              onPressed: () {
                if(controller != null){
                  controller!.loadUrl(homeUrl);
                }
              },
              icon: Icon(
                Icons.home,
              ))
        ],
      ),
      body: WebView(
        onWebViewCreated: (WebViewController controller) {
          this.controller = controller;
        },
        initialUrl: homeUrl,
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }
}

 

flutter webView 4.0 버전

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  webview_flutter: ^4.4.4

 

main.dart

import 'package:flutter/material.dart';
import 'package:webview/screen/home_screen.dart';
 
void main() {
  // Flutter 프레임워크가 앱을 실행할 준비가 될 때까지 기다린다.
  WidgetsFlutterBinding.ensureInitialized();
 
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    )
  );
}

 

lib/screen/home_detail_view.dart

 
import 'package:flutter/material.dart';
import 'dart:core';
import 'package:webview_flutter/webview_flutter.dart';
 
class HomeDetailView extends StatelessWidget {
  final String Url_path;
 
  HomeDetailView({
    Key? key,
    required this.Url_path,
  }) : super(key: key);
 
  WebViewController controller = WebViewController()
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    ..setBackgroundColor(Colors.blueGrey.shade100)
    ..setNavigationDelegate(
      NavigationDelegate(
        onProgress: (progress) {},
        onPageStarted: (url) {},
        onPageFinished: (url) {},
        onWebResourceError: (error) {},
        onNavigationRequest: (request) {
          if (request.url.startsWith('url')) {
            return NavigationDecision.prevent;
          } else {
            return NavigationDecision.navigate;
          }
        },
      ),
    );
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WebViewWidget(
        controller: controller..loadRequest(Uri.parse(Url_path)),
      ),
    );
  }
}
 

 

- last Update : 2024.1.24일

 

 

GitHub 에 webview 4.0 코드 필요한 것만 발췌하여 올렸다.

https://github.com/jsk005/Flutter/tree/main/webview

GitHub - jsk005/Flutter: Flutter Study