Dart×Flutterでクロスプラットフォーム開発を始める

Flutterは、Googleが開発するクロスプラットフォーム開発フレームワークです。Dart言語で書いたコードを、iOS・Android・Web・Desktopに対して同じUIで配信できます。本記事では、Dart×Flutterで開発を始める基本を解説します。

Flutterの特徴

• 1コードベースでマルチプラットフォーム
• 独自レンダリングエンジンで一貫したUI
• Hot Reloadで開発体験が良い
• Material / Cupertino 両デザインに対応
• Dartは静的型・null安全

環境構築

# Flutter SDKをインストール
brew install --cask flutter

flutter doctor   # 必要な追加ツールを確認
flutter create my_app
cd my_app
flutter run

シンプルなアプリ

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: 'Demo',
      home: Scaffold(
        appBar: AppBar(title: const Text('Hello')),
        body: const Center(child: Text('Hello Flutter')),
      ),
    );
  }
}

状態管理

• setState：単純なStatefulWidget内の状態
• Provider：依存性注入＋シンプルな状態
• Riverpod：Providerの後継、推奨
• Bloc：本格的なリアクティブ状態管理

Riverpod簡易例

final counterProvider = StateProvider<int>((ref) => 0);

class CounterPage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterProvider);
    return Column(
      children: [
        Text('Count: $count'),
        ElevatedButton(
          onPressed: () => ref.read(counterProvider.notifier).state++,
          child: const Text('+1'),
        ),
      ],
    );
  }
}

パッケージ管理

# pubspec.yaml に追加
dependencies:
  http: ^1.2.0
  flutter_riverpod: ^2.5.0

flutter pub get

こんなケースに向く

• iOS / Android両方を少人数で開発
• 独自デザインで統一感あるUIを実現したい
• 個人開発・MVPで素早く検証
• Web・Desktopへも展開する可能性がある

React Native等との違い

• FlutterはネイティブUIを使わず独自描画 → 一貫した見た目
• React Nativeはネイティブコンポーネントを呼び出し → OS標準UIに近い
• パフォーマンスはFlutterが一段安定

まとめ

Dart × Flutterは「1コードで多プラットフォーム展開」を最も実用的に実現する選択肢の1つです。Material/Cupertino + Riverpod + flutter_hooksを使えば、効率的にモダンなアプリを構築できます。まずはflutter create で生成されるサンプルから触ってみるのがおすすめです。