🦴 Flutter WebView 하이브리드 앱 구현

Intro

Java & Spring 백엔드 서버와 Flutter 프론트 엔드 앱 개발을 목표로 최근 Flutter를 공부하고 있다. Dart 언어에 대한 기초 학습을 마치고 Flutter에 적용해 보며 간단한 어플을 만들어 보는 중 메인 프로젝트를 WebView 형태의 하이브리드 앱을 구현 하였다😲

webview_flutter 4.0.4 최신 라이브러리를 활용하여 구현 하였으며, 뒤로가기, 앱 종료 등 간단한 Navigation 기능을 추가 하였다.

Android Studio로 작업, 초기 프로젝트 설정은 생략

Implement

🕹️ Android & IOS Config

• HTTP 통신 설정

  • ios/Runner/Info.plist <dict> 태그 하단에 추가

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

  • android/app/src/main/AndroidManifest.xml <manifest> 태그 상단 추가

        <uses-permission android:name="android.permission.INTERNET"/>

• webview_flutter 라이브러리를 사용하기 위해 minSdkVersion 설정
  • android/app/src/build.gradle 의 defaultConfig 추가

        defaultConfig {
        	applicationId "com.Tutordiff.tutordiff_webview"
        	minSdkVersion 20
            ......
        }

🛠️ Dart

• main.dart

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

  • WidgetsFlutterBinding.ensureInitialized()
    • 플랫폼(Android, ios)과 Flutter는 별개의 환경이기 때문에, Flutter의 코드를 MethodChannel을 통한 통신을 위해 위젯의 안정성을 보장해야한다. 그래서, 정적 바인딩을 하는데, Flutter에서 WebView 위젯은 비동기적으로 동작하며 WebView 위젯의 바인딩을 보장하기 위해 추가 해준다.

• home_screen.dart

  import 'package:flutter/material.dart';
  import 'package:flutter/services.dart';
  import 'package:webview_flutter/webview_flutter.dart';
  
  final homeUrl = Uri.parse('https://tutordiff.site');
  
  class HomeScreen extends StatelessWidget {
    WebViewController controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(homeUrl)
      ..setUserAgent('userAgent');
  
    HomeScreen({Key? key}) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return WillPopScope(
        onWillPop: () {
          var future = controller.canGoBack();
          future.then((canGoBack) => {
                if (canGoBack)
                  {controller.goBack()}
                else
                  {
                    showDialog(
                      context: context,
                      builder: (context) => AlertDialog(
                        title: Text('앱 종료'),
                        content: Text('앱이 종료됩니다.'),
                        actions: [
                          TextButton(
                            onPressed: () {
                              Navigator.of(context).pop();
                            },
                            child: Text('아니오'),
                          ),
                          TextButton(
                            onPressed: () {
                              SystemNavigator.pop();
                            },
                            child: Text('예'),
                          ),
                        ],
                      ),
                    ),
                  }
              });
          return Future.value(false);
        },
        child: SafeArea(
          child: Scaffold(
            body: WebViewWidget(controller: controller),
          ),
        ),
      );
    }
  }

  • SafeArea
    • 상단 상태바와 하단 홈바를 제외한 페이지 View를 위해 Wrap.
  • WillPopScope
    • 안드로이드의 경우 네비게이션 핸들링을 위한 위젯 Wrap
    • controller.canGoBack() 컨트롤러에서 히스토리를 받아 확인 후 뒤로가기 기능 구현
  • ..setJavaScriptMode(JavaScriptMode.unrestricted)
    • 바인딩 할 웹 페이지에서 JavaScript를 사용한다면, 설정 해줘야 함.
  • ..setUserAgent('userAgent')
    • 바인딩 할 웹 페이지에서 Google OAuth 로그인을 구현 해 뒀는데, Google 정책으로 허용 브라우저가 아니면 403: disallowed_useragent 응답을 받는다. 임시 방편으로 WebView를 구현하기 위해 UserAgent 값을 바꾸어 우회 하여 로그인 하도록 하였음.