빠른 시작

1라이브러리 추가

프로젝트에 파일 복사

# JavaScript 라이브러리
cp lib/flutter-bridge.js your-project/src/utils/

# TypeScript 사용 시
cp lib/flutter-bridge.d.ts your-project/src/utils/

2웹앱에서 사용

Vanilla JavaScript

<script src="./flutter-bridge.js"></script>
<script>
    const bridge = new FlutterBridge({ debug: true });
    
    async function getLocation() {
        const location = await bridge.getLocation();
        console.log('위치:', location);
    }
</script>

Vue 3

<script setup>
import FlutterBridge from './utils/flutter-bridge.js';

const bridge = new FlutterBridge({ debug: true });

async function getLocation() {
  const location = await bridge.getLocation();
  console.log('위치:', location);
}
</script>

React

import FlutterBridge from './utils/flutter-bridge.js';

const bridge = new FlutterBridge({ debug: true });

function App() {
  const getLocation = async () => {
    const loc = await bridge.getLocation();
    console.log(loc);
  };
  
  return <button onClick={getLocation}>위치</button>;
}

3Flutter 앱 설정

pubspec.yaml 의존성

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.4.2
  flutter_local_notifications: ^16.3.0
  geolocator: ^10.1.0
  permission_handler: ^11.1.0
  image_picker: ^1.0.5
  home_widget: ^0.4.1
  device_info_plus: ^9.1.1
  shared_preferences: ^2.2.2

패키지 설치

cd flutter_project
flutter pub get

AndroidManifest.xml 권한

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.POST_NOTIFICATIONS"/>

4주요 기능 사용

📍 위치 가져오기

const location = await bridge.getLocation();
// { lat: 37.123, lng: 127.456, accuracy: 10 }

📷 사진 촬영

const photo = await bridge.takePhoto();
// Base64 인코딩된 이미지

📢 알림 표시

await bridge.showNotification('제목', '내용');

💾 데이터 저장

await bridge.saveData('user', { name: 'John' });
const user = await bridge.loadData('user');

📱 디바이스 정보

const info = await bridge.getDeviceInfo();
// { platform: 'android', model: 'SM-G991N', version: '13' }

if (bridge.isAvailable()) {
    console.log('Flutter 브릿지 연결됨');
} else {
    console.log('브라우저 모드');
}

const bridge = new FlutterBridge({ 
    debug: true,
    timeout: 20000 // 20초
});