header-bleepy-logo

DEVELOPERS

KO

topWebview

webview example image

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; @override 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{ ... @override void initState() { super.initState(); // 최초 위젯 실행 시 호출 WidgetsBinding.instance.addObserver(this); } @override void dispose() { // 위젯이 메모리에서 제거될 때 호출 WidgetsBinding.instance.removeObserver(this); super.dispose(); } ... }

step2-2title

step2-2subtitle

  • step2-2list1
    • WebView pause
  • step2-2list2
    • WebView resume

step2-2description

Interface function

Type

Description

key
key
table1item1
onVisibilityChanged
void Function(VisibilityInfo)

table1item2

dart
// lib/screens/bleepy_screen.dart @override 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'; @override Widget build(BuildContext context) { // ... // 세로 위아래 방향 고정 SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]); return VisibilityDetector( ... child: SafeArea(...) ); }

footerTitle

"[Client Admin] footerMessage


v1.0.6