Flutterで鳥の画像や動画を投稿できるアプリを作る

2024年11月28日

URLをコピーしました！

Flutter のインストール

cd ~
git clone https://github.com/flutter/flutter.git -b stable

PATH を設定

Flutter のインストール後、Flutter のバイナリディレクトリをシェルの環境変数 PATH に追加します。

echo ‘export PATH=”$PATH:$HOME/flutter/bin”‘ >> ~/.zshrc

設定を反映

PATH の設定を反映させるために、以下を実行します。

source ~/.zshrc

Flutter コマンドを確認

正しく設定されている場合、以下のコマンドで Flutter のバージョン情報が表示されます。

flutter –version

プロジェクトの作成

まず、Flutterの開発環境をセットアップして、新しいプロジェクトを作成します。

flutter create bird_gallery_app
cd bird_gallery_app

必要なパッケージの追加

画像や動画の投稿、保存、表示にはいくつかのパッケージを使用します。pubspec.yamlに以下の依存関係を追加します。

dependencies:
flutter:
sdk: flutter
image_picker: ^0.8.5+3 # 画像や動画の選択
firebase_core: ^2.20.0 # Firebase初期化
firebase_storage: ^11.0.3 # Firebase Storageへのアップロード
cloud_firestore: ^4.10.0 # Firestoreデータベース
video_player: ^2.5.2 # 動画再生
provider: ^6.0.3 # 状態管理

パッケージを取得する

ファイルを保存（Ctrl + S または Cmd + S）した後、以下の方法でパッケージをインストールします。

ターミナルから実行

プロジェクトのルートディレクトリで以下のコマンドを実行します。

flutter pub get

バンドルIDを確認する方法

ios/Runner.xcodeproj/project.pbxproj ファイルを開きます。

PRODUCT_BUNDLE_IDENTIFIER を検索します。以下のような設定が見つかるはずです。

com.example.birdgalleryapp の部分が実際のバンドルIDです。

プロジェクトをデプロイする際や、Firebaseを利用する際には、デフォルトのバンドルIDを変更する必要があります。FirebaseやApp Storeに関連付ける場合は、一意の名前を考える必要があります。

ios/Runner.xcodeproj/project.pbxproj を開く。PRODUCT_BUNDLE_IDENTIFIER の値を新しいバンドルIDに変更。

会社名が「YourCompany」で、アプリ名が「BirdGallery」の場合：

com.yourcompany.birdgallery

Firebaseの設定

Firebaseコンソール にアクセスします。

**「プロジェクトを追加」**をクリック。
プロジェクト名を入力して「続行」。
Google Analyticsを有効にするか選択（基本的には有効化でOK）。
**「プロジェクトを作成」**をクリック。

Firebaseアプリの登録

プロジェクトのダッシュボードで、**「iOS」**アイコンをクリック。iOSアプリのバンドルIDを入力（例: com.example.birdGalleryApp）。

他のフィールド（アプリニックネームやApp Store ID）は任意。入力後、「アプリを登録」。GoogleService-Info.plist をダウンロードして、Flutterプロジェクトの ios/Runner/ フォルダに追加。iOSでFirebaseを使うには、以下の設定を追加:

ios/Podfile の platform :ios を platform :ios, '12.0' に変更。

Flutterプロジェクトで ios/Podfile が見当たらない場合は、以下の手順で Podfile を生成できます。

`Podfile` の役割

Podfile は CocoaPods を使用して、iOSプロジェクトで必要な依存関係（ライブラリ）を管理するファイルです。
Flutterでは、Podfile を通じて Firebase やその他のライブラリをインストールします。

CocoaPodsをインストール

brew install cocoapods

CocoaPodsをインストールしたら、以下を実行

cd /ios
pod init

Androidアプリの場合

プロジェクトのダッシュボードで、**「Android」**アイコンをクリック。
アプリのパッケージ名を入力（例: com.example.birdGalleryApp）。
- パッケージ名はFlutterプロジェクトの android/app/src/main/AndroidManifest.xml で確認可能。
他のフィールド（アプリニックネームやSHA-1）は任意。入力後、「アプリを登録」。
google-services.json をダウンロードして、Flutterプロジェクトの android/app/ フォルダに追加。
AndroidでFirebaseを使うには、以下を追加:
- android/build.gradle:dependencies { classpath 'com.google.gms:google-services:4.3.15' }
- android/app/build.gradle:apply plugin: 'com.google.gms.google-services'

FlutterプロジェクトにFirebaseを追加

Flutterプロジェクトのルートディレクトリで、Firebaseパッケージをインストールします。

flutter pub add firebase_core
flutter pub add firebase_auth
flutter pub add cloud_firestore
flutter pub add firebase_storage

main.dart の初期化コードを変更します。

プロジェクトルート（pubspec.yamlがある場所）のlib/フォルダを開きます。
その中にmain.dartというファイルがあります。

import ‘package:firebase_core/firebase_core.dart’;
import ‘package:flutter/material.dart’;

void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(); // Firebaseの初期化
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text(‘Firebase Setup Complete’)),
body: Center(child: Text(‘Hello Firebase!’)),
),
);
}
}

動作確認

Firebaseプロジェクトの設定が正しいか確認します。
AndroidまたはiOSエミュレータでアプリを実行します。

flutter run

open -a Simulator

cd /Users/haruki/bird_gallery_app