Flutterでアプリ開発 (Netflix風) その１

2024年6月30日

PCスペック

  • MacOS Monterey
  • バージョン12.7.1
  • MacBook Pro (Retina, 13-inch, Early 2015)
  • プロセッサ　2.7 GHz デュアルコアIntel Core i5
  • メモリ　8 GB 1867 MHz DDR3
  • グラフィックス　Intel Iris Graphics 6100 1536 MB

約9年前に購入したMacBookです．．． 化石だ,, 最新OSへ更新できない。。。

チャットGPT様へ質問

>>> Flutterでアプリ開発したいです。FVMを導入したいです。

Flutterのバージョン管理には、FVM（Flutter Version Management）を使用することができます。FVMは、複数のFlutterバージョンを同時にインストールし、プロジェクトごとに異なるバージョンを使用することができるツールです。以下に、FVMを使用してFlutterプロジェクトを管理する方法を説明します。

FVMのインストール
まずは、FVMをインストールします。FVMはDart SDKを使用して動作するため、事前にDart SDKがインストールされている必要があります。

1. Dart SDKのインストール

まず、Dart SDKをインストールします。以下のコマンドを使って、Dart SDKをインストールします。

・itermを起動

・対象のディレクトへ遷移

[1] brew tap dart-lang/dart
[2] brew install dart

上記コマンドを実施

エラーになりました。

HomebrewがDartをインストールするためにXcode Command Line Toolsを必要としていることを示しています。

==> Installing dart from dart-lang/dart
Error: The following formula cannot be installed from bottle and must be
built from source.
  dart
Install the Command Line Tools:
  xcode-select --install
xcode-select --install

16分くらいかかる模様。。。

実施後に[2]を再実施 >> エラー…

Xcodeがありませんでした。。。　最近容量確保のためにアンインストールしたばかりでした。

AppStoreから再度取得。。このPCスペックではXcode14が対応なのでそれをインストール

Xcode14.2

AppStoreからダウンロードしてそれを展開するのに30分以上かかる．．．

Xcodeインストール後に再度[2]を再実施

$ brew install dart
==> Downloading https://storage.googleapis.com/dart-archive/channels/stable/rele
Already downloaded: /Users/********/Library/Caches/Homebrew/downloads/e8ad1166936569dac6506a4c01a6ebf20cd66c93c3ab6ed00789d431fb8c89ac--dartsdk-macos-x64-release.zip
==> Installing dart from dart-lang/dart
==> Caveats
Please note the path to the Dart SDK:
  /usr/local/opt/dart/li
　　　　　　　　　　　　　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　　　　　　　　　　　　　　・

>> 完了！！

1-1?. エディタの準備

Flutter開発には、Android Studio、Visual Studio Code、IntelliJ IDEAなどのエディタを使用することが一般的です。好みや環境に応じて適切なエディタを選択し、インストールします

>> vs Codeを採用

1-2. FVMのインストール

Dartがインストールされたら、次にFVMをインストールします。以下のコマンドを実行してください。

pub global activate fvm
$ pub global activate fvm
-bash: pub: command not found

1-2-1. パスの設定

FVMをコマンドラインから使用するために、Dartのパスを設定します。以下のコマンドをターミナルに追加します。

export PATH="$PATH":"$HOME/.pub-cache/bin"

これをターミナルの設定ファイル（例：~/.zshrc、~/.bash_profile、~/.bashrcなど）に追加します。追加した後、設定を反映させるために以下のコマンドを実行します。

使用しているのがbashだったためbashに設定を追加

$ vi ~/.bash_profile
$
$
$ source ~/.bash_profile
$

エラーが治りませんでした

Dart SDKのパスの設定

Dart SDKのインストール後、Dartのコマンドが正しく認識されるようにパスを設定します。以下のコマンドをターミナルに追加します。

export PATH="$PATH:/usr/local/opt/dart/libexec/bin"

これをターミナルの設定ファイル（例：~/.zshrc、~/.bash_profile、~/.bashrcなど）に追加します。追加した後、設定を反映させるために以下のコマンドを実行します。

echo 'export PATH="$PATH:/usr/local/opt/dart/libexec/bin"' >> ~/.bash_profile  # bashを使用している場合

Flutterのバージョンの管理とプロジェクトの設定

Flutterのバージョンのインストール

FVMを使ってFlutterのバージョンをインストールします。例えば、Flutterの最新安定版をインストールする場合は次のようにします。

FVMのインストール

dart pub global activate fvm
$ dart pub global activate fvm
The Dart CLI developer tool uses Google Analytics to report usage and diagnostic
data along with package dependencies, and crash reporting to send basic crash
reports. This data is used to help improve the Dart platform, Flutter framework,
and related tools.

Telemetry is not sent on the very first run. To disable reporting of telemetry,
run this terminal command:
　　　　　　　　　　　　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　　　　　　　　　　　　　・

+ typed_data 1.3.2
+ uri 1.0.0
+ web 0.5.1
+ win32 5.5.1
+ yaml 3.1.2
Building package executables...
Built fvm:compile.
Built fvm:main.
Installed executable fvm.
Activated fvm 3.1.7.
$

完了！　やっとできた

FVMのインストール確認

$ fvm --version
3.1.7

Flutterのバージョンのインストール

FVMを使ってFlutterのバージョンをインストールします。例えば、Flutterの最新安定版をインストールする場合は次のようにします。

$ fvm install stable

Completion files installed. To enable completion, run the following command in your shell:
source /Users/*********/.bash_profile

Creating local mirror...
 Counting objects:    [████████████████████████████████████████████.... Counting objects:    [██████████████████████████████████████████████████] 100%
 Compressing objects: [██████████████████████████████████████████........ Compressing objects: [██████████████████████████████████████████████████] 100%
 Receiving objects:   [██████............................................] 12%

████] 100%
✓ Clone complete
✓ Flutter SDK: Channel: Stable installed! (22.6s)

完了

Flutterのバージョンの使用設定

特定のFlutterバージョンをプロジェクトで使用するには、プロジェクトディレクトリで以下のコマンドを実行します。

fvm use stable

✓ Flutter SDK: Channel: Stable is setup
You should add the fvm version directory ".fvm/" to .gitignore.
? Would you like to do that now? (y/n) › yes

なんか聞かれた！

FVM（Flutter Version Management）を使用する際には、.fvm/ ディレクトリを .gitignore ファイルに追加することが推奨されます。このディレクトリには、FVMによって管理されているFlutter SDKのバージョンが含まれており、通常はFlutterプロジェクトのルートディレクトリにあります。

>> yesで

Flutterプロジェクトの作成

Flutter SDKがインストールされたら、ターミナルまたはコマンドプロンプトを開き、以下のコマンドで新しいFlutterプロジェクトを作成します。

flutter create my_project
cd my_project

プロジェクトの依存関係を設定

Flutterプロジェクトの pubspec.yaml ファイルで、必要な依存関係（パッケージ）を指定します。例えば、動画再生やUIデザインのための依存関係を追加することがあります。

dependencies:
  flutter:
    sdk: flutter
  video_player: ^2.4.0
  # 他に必要なパッケージを追加

その後、FVMで設定したFlutterのバージョンを使用してプロジェクトを実行します。

fvm flutter run

Flutter初期のカウントアップ画面は立ち上がりましたが、

Chromeでの起動だったのでXcodeのシミュレータにしたいと思います

まとめ

FVMを使用することで、Flutterのバージョン管理を柔軟に行うことができます。異なるプロジェクトで異なるFlutterバージョンを使用したい場合や、新しいFlutterバージョンを試したい場合に特に便利です。FVMの使い方をマスターすることで、より効率的にFlutterアプリの開発を進めることができます。

Flutter,プログラミング

Posted by Teruruswdinc