[flutter] get_it을 활용한 웹뷰 연동

14 Dec 2023

flutter

이번 포스트에서는 플러터(Flutter) 앱에서 웹뷰(Webview)를 사용하는 방법을 살펴보겠습니다. 특히, get_it 패키지를 활용하여 웹뷰를 관리하는 방법을 다룰 것입니다.

웹뷰란?

웹뷰는 앱 내에서 웹 콘텐츠를 표시하기 위한 컴포넌트입니다. 플러터에서는 webview_flutter 패키지를 통해 웹뷰를 구현할 수 있습니다.

get_it 패키지 소개

get_it은 플러터에서 의존성을 관리하기 위한 패키지로, 싱글톤 인스턴스를 만들고 필요한 곳에서 사용할 수 있도록 해줍니다.

먼저, pubspec.yaml 파일에 get_it 패키지를 추가합니다.

dependencies:
  get_it: ^7.1.3

이제 flutter pub get 명령을 실행하여 패키지를 가져옵니다.

get_it을 사용한 웹뷰 관리

다음은 get_it을 사용하여 웹뷰를 관리하는 예제 코드입니다.

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:get_it/get_it.dart';

void main() {
  GetIt sl = GetIt.instance;
  sl.registerLazySingleton<WebViewController>(() => WebViewController());
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: WebView(
          initialUrl: 'https://www.example.com',
          onWebViewCreated: (WebViewController webViewController) {
            GetIt.instance.registerLazySingleton<WebViewController>(() => webViewController);
          },
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            GetIt.instance<WebViewController>().reload();
          },
          child: Icon(Icons.refresh),
        ),
      ),
    );
  }
}

이 코드에서는 get_it 패키지를 사용하여 WebViewController를 싱글톤으로 등록하고, 웹뷰를 생성할 때마다 해당 컨트롤러를 get_it에 등록하는 방식을 보여줍니다.

결론

이렇게 get_it 패키지를 활용하여 플러터 앱에서 웹뷰를 관리하는 방법에 대해 알아보았습니다. get_it을 사용하면 의존성을 효율적으로 관리할 수 있어 앱의 성능과 유지보수성을 향상시킬 수 있습니다.

더 많은 정보는 get_it 공식 문서를 참고하세요.