実践編④：Flutter × AIを活用したクロスプラットフォーム開発

これまでの実践編では、

  • ChatGPTを活用したチャットアプリ
  • 画像生成AIを使った写真加工アプリ
  • 音声認識AIを活用したメモアプリ

をそれぞれ単体で作ってきました。

しかし実際のアプリ開発では、複数のAI機能を1つのアプリに統合するケースが増えています。
そこで今回は、Flutterを使ってクロスプラットフォーム（iOS / Android対応）のAIアプリを効率的に開発する方法を紹介します。

1. Flutter × AI 開発のメリット

FlutterはGoogleが開発したクロスプラットフォームフレームワークで、1つのコードベースでiOSとAndroid両方に対応できます。

AI開発と組み合わせるメリットは以下の通り：

  • 一度の実装で両OS対応：工数削減＆リリースがスピーディー
  • UIの柔軟性：チャット画面・写真ビューア・音声UIを統一したデザインで構築可能
  • 豊富なライブラリ：http、image_picker、recordなどAI API連携に必要なプラグインが揃っている

2. 実装するアプリの概要

今回のサンプルアプリは「AIマルチアシスタント」です。

  • チャット機能：ChatGPT APIで会話
  • 写真加工機能：DALL·E APIで背景差し替え
  • 音声メモ機能：Whisper APIで音声を文字起こし

これらをFlutterアプリに統合し、シンプルなUIから切り替えて利用できるようにします。

3. プロジェクト構成

4. API呼び出しの共通化

AIごとに処理を分けるとコードが散らかるため、サービス層を作って共通化します。

openai_service.dart

import 'dart:convert';
import 'dart:io';
import 'package:http/http.dart' as http;

class OpenAIService {
  final String apiKey = "YOUR_API_KEY";

  Future<String> chatWithGPT(String message) async {
    final response = await http.post(
      Uri.parse("https://api.openai.com/v1/chat/completions"),
      headers: {
        "Content-Type": "application/json",
        "Authorization": "Bearer $apiKey",
      },
      body: jsonEncode({
        "model": "gpt-4o-mini",
        "messages": [
          {"role": "system", "content": "You are a helpful assistant."},
          {"role": "user", "content": message}
        ],
      }),
    );
    final data = jsonDecode(response.body);
    return data["choices"][0]["message"]["content"];
  }

  Future<String> editImage(String filePath, String prompt) async {
    var request = http.MultipartRequest(
      'POST',
      Uri.parse("https://api.openai.com/v1/images/edits"),
    );
    request.headers['Authorization'] = 'Bearer $apiKey';
    request.files.add(await http.MultipartFile.fromPath('image', filePath));
    request.fields['prompt'] = prompt;
    request.fields['size'] = "512x512";

    final response = await request.send();
    final respStr = await response.stream.bytesToString();
    final data = jsonDecode(respStr);
    return data["data"][0]["url"];
  }

  Future<String> transcribeAudio(String filePath) async {
    var request = http.MultipartRequest(
      'POST',
      Uri.parse("https://api.openai.com/v1/audio/transcriptions"),
    );
    request.headers['Authorization'] = 'Bearer $apiKey';
    request.files.add(await http.MultipartFile.fromPath('file', filePath));
    request.fields['model'] = 'whisper-1';
    request.fields['language'] = 'ja';

    final response = await request.send();
    final respStr = await response.stream.bytesToString();
    final data = jsonDecode(respStr);
    return data['text'];
  }
}

5. UI設計

メイン画面

  • BottomNavigationBarで「チャット」「写真」「音声」を切り替え

各機能ページ

  • チャット：吹き出し形式で会話表示
  • 写真：ギャラリーから選択して加工結果を表示
  • 音声：録音ボタンと文字起こし表示エリア

6. 応用アイデア

  • マルチモーダル対応：音声＋画像＋テキストを組み合わせた入力
  • クラウド保存：FirebaseやSupabaseでデータ同期
  • 課金モデル導入：一定回数以上の利用は有料化
  • UI改善：Material Design＋カスタムテーマで洗練された見た目に

7. まとめ

Flutterを使えば、1つのアプリで複数のAI機能を統合できます。

  • コードベースは1つでiOS / Android両方対応
  • サービス層を設ければAPI処理を共通化できる
  • チャット、画像加工、音声認識を組み合わせれば「万能AIアシスタントアプリ」が作れる

個人開発でも十分実現可能なので、ぜひ挑戦してみてください。