728x90
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
Flutter Study. Contribute to jsk005/Flutter development by creating an account on GitHub.
github.com
728x90
'Flutter 앱 > 활용예제' 카테고리의 다른 글
| Flutter QR Code Scan (플러터 QR코드 스캔) (0) | 2024.02.08 |
|---|---|
| flutter 현재 위치좌표 가져오기 (0) | 2024.02.01 |
| flutter 네이버 지도 사용하기 (0) | 2024.01.30 |
| Flutter News App using riverpod (2) | 2024.01.25 |
| Flutter Retrofit GET, POST 예제 구현 (0) | 2023.12.22 |
Link2Me
