🍀 Flutter WebView 도입기 (1) 플러터 웹뷰 어플리케이션

Flutter WebView 2편

지난학기 캡스톤 디자인에서 WebView를 통해 어플리케이션 기획을 하였지만,, 일정상의 문제로 하지 못했습니다. 그 못한 일을 이번 학기에는 해냈습니다..

어디씀?

어쩌다보니 팀 구성원 중 앱 개발 스택 보유자는 없었고, 웹 개발은 많았습니다. (react) 어찌저찌하여 플러터를 통해 앱 빌드를 지원해보려 합니다.

packages

우선 사용된 패키지들의 버전입니다.

  cupertino_icons: ^1.0.2
  webview_flutter: ^4.2.0
  path_provider: ^2.0.15
  get: ^4.6.5
  webview_flutter_wkwebview: ^3.4.3
  webview_flutter_android: ^3.7.0
  flutter_native_splash: ^2.3.0
  

Flutter의 버전은 아래와 같습니다.

  Flutter 3.10.1 • channel stable • https://github.com/flutter/flutter.git
  Framework • revision d3d8effc68 (10 days ago) • 2023-05-16 17:59:05 -0700
  Engine • revision b4fb11214d
  Tools • Dart 3.0.1 • DevTools 2.23.1

flutter도 react와 같이 패키지 버전마다 코드가 많이 변경되는것 같아. 유의해야 합니다.

WebView Controller

우선 제일 중요한 WebView 입니다.

// webview_controller.dart

//GetX라는 전역 상태 관리 라이브러리를 통해 컨트롤러 활용
class WebviewMainController extends GetxController {
//WebviewMainController 클래스의 인스턴스를 반환
  static WebviewMainController get to => Get.find();

  //controller 객체 선언
  final WebViewController controller = WebViewController()
  
  //자바스트립트 사용 여부
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    //웹뷰 관련 이벤트들
    ..setNavigationDelegate(
      NavigationDelegate(
        onProgress: (int progress) {
          debugPrint('progressing $progress');
        },
        onPageStarted: (String url) {
          debugPrint(url);
        },
        onPageFinished: (String url) {
          debugPrint('Page Finished');
        },
        onWebResourceError: (WebResourceError error) {},
      ),
    )
    //접속한 [URL]을 삽입
    ..loadRequest(Uri.parse([URL]));

// 다른 파일에서 controller를 불러오기 위함
  WebViewController getController() {
    return controller;
  }
}

Main

//main.dart
void main() {
// Flutter 애플리케이션의 위젯 바인딩을 초기화
  WidgetsFlutterBinding.ensureInitialized();

  // 반응형 상태 관리 controller 등록
  Get.put(WebviewMainController());
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
  //WebviewMainController의 controller를 호출
    late final controller = WebviewMainController.to.getController();

    return MaterialApp(
      home: Scaffold(
        appBar: PreferredSize(
        //앱 바는 필요하지 않았기에 0으로
            preferredSize: const Size.fromHeight(0),
            // elevation = 필요하지 않은 그림자 효과 
            child: AppBar(elevation: 0)),
            //WebViewWidget에 controller를 parameter로 넘겨준다
        body: WebViewWidget(controller: controller),
      ),
    );
  }
}

이렇게하면 기본적인 웹뷰 어플리케이션은 완성하게 됩니다.
하지만,, 어플리케이션처럼 보이게 하기 위해선. 다양한 기능들이 추가되어야 하는데,
그 중 중요한 것은 Flutter - Web 간의 통신이 이뤄져야 합니다.
이는 다음 포스팅에서 다뤄보도록 하겠습니다.