[flutter] 플러터(Flutter)와 브라우저 연동하기

18 Dec 2023

flutter

플러터(Flutter)는 하나의 코드베이스로 안드로이드와 iOS 모바일 애플리케이션을 개발할 수 있는 크로스 플랫폼 프레임워크입니다. 이제 플러터 애플리케이션에 브라우저와의 연동 기능을 추가해보겠습니다.

웹뷰(WebView)를 이용한 브라우저 연동

플러터에서는 webview_flutter 패키지를 사용하여 애플리케이션 내에서 웹 콘텐츠를 표시할 수 있습니다. 이 패키지를 사용하여 브라우저와 애플리케이션을 연동할 수 있습니다.

다음은 webview_flutter 패키지를 이용하여 플러터 애플리케이션에 웹뷰를 추가하는 예시 코드입니다.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('웹뷰 예제'),
        ),
        body: WebView(
          initialUrl: 'https://www.example.com',
          javascriptMode: JavascriptMode.unrestricted,
        ),
      ),
    );
  }
}

위 코드에서 webview_flutter 패키지를 추가하고, WebView 위젯을 사용하여 애플리케이션에 웹뷰를 표시하고 있습니다.

프로그레시브 웹 앱(PWA) 지원

플러터는 웹 애플리케이션을 모바일 앱으로 변환하는 기능도 제공합니다. 이를 통해 프로그레시브 웹 앱(PWA)을 모바일 플랫폼에서 실행할 수 있습니다.

프로그레시브 웹 앱을 지원하는 플러터 패키지 중 하나인 flutter_webview_plugin을 사용하여 웹 앱을 모바일 플랫폼에서 실행하는 예시 코드는 다음과 같습니다.

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: WebviewScaffold(
        url: 'https://www.example.com',
        appBar: AppBar(title: Text('프로그레시브 웹 앱')),
      ),
    );
  }
}

결론

플러터를 이용하면 웹과 모바일을 효율적으로 연동할 수 있습니다. webview_flutter나 flutter_webview_plugin을 사용하여 플러터 애플리케이션에 브라우저를 통합함으로써, 애플리케이션에 더 다양한 콘텐츠를 제공할 수 있게 됩니다.

이상으로 플러터와 브라우저의 연동에 대한 기초적인 내용을 살펴보았습니다.

참고문헌: