topWebview
webviewExample
composeWebview
description
- webviewDescriptoin1
- webviewDescriptoin2
yaml
// 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.
flutter_inappwebview: ^6.0.0
visibility_detector: ^0.4.0+2
step1title
step1subtitle
step1-1title
step1-1description
step1-2title
step1-2description
step1-3title
step1-3description
step1-4title
step1-4description{launcherUrl}step1-4description2
dart
// lib/screens/bleepy_screen.dart
class _BleepyLauncherScreenState extends State<BleepyLauncherScreen> {
InAppWebViewController? webViewController;
Widget build(BuildContext context) {
final GlobalKey webViewKey = GlobalKey();
// 웹뷰 옵션
InAppWebViewSettings options = InAppWebViewSettings(
...
javaScriptEnabled: true, // javascript 실행 여부
useHybridComposition: true, // hybrid 사용을 위한 android 웹뷰 최적화
...
);
return InAppWebView(
key: webViewKey,
initialUrlRequest:
URLRequest(url: WebUri({런처 URL})),
initialSettings: options,
onWebViewCreated: (controller) {
webViewController = controller;
}
)
}
}
step2title
step2subtitle
- step2list1
- step2list2
step2description
step2-1title
step2-1subtitle
- step2-1list1
- step2-1list2
step2-1description
dart
// lib/screens/bleepy_screen.dart
class _BleepyLauncherScreenState extends State<BleepyLauncherScreen>
with WidgetsBindingObserver{
...
void initState() {
super.initState();
// 최초 위젯 실행 시 호출
WidgetsBinding.instance.addObserver(this);
}
void dispose() {
// 위젯이 메모리에서 제거될 때 호출
WidgetsBinding.instance.removeObserver(this);
super.dispose();
}
...
}
step2-2title
step2-2subtitle
- step2-2list1
- WebView
pause
- WebView
- step2-2list2
- WebView
resume
- WebView
step2-2description
Interface function | Type | Description |
---|---|---|
key | key | table1item1 |
onVisibilityChanged | void Function(VisibilityInfo) | table1item2 |
dart
// lib/screens/bleepy_screen.dart
Widget build(BuildContext context) {
...
// VisibilityDetector 추가
return VisibilityDetector(
key: const Key("banner-screen-visibility-detector"),
onVisibilityChanged: (visibilityInfo) {
// visibility change event
var visibleFlag = visibilityInfo.visibleFraction.toInt();
if(visibleFlag == 1){
// 화면 보여질 때 실행
webViewController?.resume();
} else {
// 화면 안 보여질 때 실행
webViewController?.pause();
}
},
child: SafeArea(...)
);
}
step3title
step3subtitle
step3description
handlerName | Type | Description |
---|---|---|
BlpLauncher | closeLauncher | table2item1 |
dart
// lib/screens/bleepy_screen.dart
InAppWebView(
key: webViewKey,
initialUrlRequest:
URLRequest(url: WebUri(widget.launcherUrl)),
initialSettings: options,
onWebViewCreated: (controller) {
webViewController = controller;
// 자바스크립트 핸들러 추가
controller.addJavaScriptHandler(handlerName: 'BlpLauncher', callback: (message) {
final data = jsonDecode(message[0]);
final key = data['type'];
switch (key) {
case "closeLauncher":
closeLauncher();
break;
default:
break;
}
});
}
)
step3-1title
step3-1subtitle
dart
// lib/screens/bleepy_screen.dart
// 런처 종료
void closeLauncher() {
Navigator.of(context).pop();
}
step4-title
step4-subtitle
dart
// lib/screens/bleepy_screen.dart
// 화면 고정을 위해 상단에 다음 패키지를 추가
import 'package:flutter/services.dart';
Widget build(BuildContext context) {
// ...
// 세로 위아래 방향 고정
SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]);
return VisibilityDetector(
...
child: SafeArea(...)
);
}
footerTitle
"[Client Admin] footerMessage
v1.0.6