Capacitor vs Flutter 比較

// capacitor.config.ts — 既存のWebアプリをネイティブコンテナに接続
import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'MyApp',
  webDir: 'dist',
  server: {
    androidScheme: 'https',
  },
};

export default config;

// src/camera.ts — ネイティブCameraプラグインブリッジ (JS -> Swift/Kotlin)
import { Camera } from '@capacitor/camera';

export async function capturePhoto() {
  const result = await Camera.takePhoto({
    quality: 90,
    includeMetadata: true,
  });
  return result.webPath;
}

// terminal — ネイティブプラットフォームを追加して同期する
// npx cap add ios
// npx cap add android
// npm run build && npx cap sync

// main.dart — Material 3ベースのシンプルなカウンター画面
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sayac',
      theme: ThemeData(useMaterial3: true, colorSchemeSeed: Colors.indigo),
      home: const CounterPage(),
    );
  }
}

class CounterPage extends StatefulWidget {
  const CounterPage({super.key});
  @override
  State<CounterPage> createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int _count = 0;

  void _increment() => setState(() => _count++);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Capacitor vs Flutter Demo')),
      body: Center(child: Text('$_count', style: Theme.of(context).textTheme.headlineMedium)),
      floatingActionButton: FloatingActionButton(
        onPressed: _increment,
        child: const Icon(Icons.add),
      ),
    );
  }
}