0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

お題は不問!Qiita Engineer Festa 2024で記事投稿!
Qiita Engineer Festa20242024年7月17日まで開催中!

おじさんがFlutterで0から開発していく #1 Windows環境構築(デモアプリを起動まで)

Last updated at Posted at 2024-06-24

環境構築

はじめに

Windowsのみしか持っていないため、Windowsでの環境構築になります。

PC構成

・OS Windows11 Home
・CPU AMD Ryzen7 7800X3D
・メモリ 32GB
・SSD 2TB

pcを自作したときにプログラミングにRyzen(しかもゲーム用の)CPUでいいかな?と思いながら自作しましたが、半年使用して困ったことはありません。

では環境構築

ドキュメントは以下を参考にし進めます。

ここにこう書かれていました。

ここに書かれた手順通りにやれよとやらなきゃエラーが起こってもしらないよと。
だとしたらわかりづれーよ。上に手順もってこいよ。

Gitのインストールが書かれていますが、おそらく開発では使いません。
後からでも問題ないかとおもうので早速読み飛ばしました。

IDEのインストール

FlutterチームではVSCodeでの開発をおすすめしているようです。

image.png

がAndroidStadioがすでにPCに入っているのでそちらアップデートして先に進みます。
※無知で後でちょっと焦ります。

Flutter SDKのインストール

VSCodeとその他の方法が書かれています。
今回AndroidStadioを使用したいので以下を選択します。

image.png

ダウンロードしたzipを任意の場所に展開

powershellを使い以下のコマンドを実行

Expand-Archive -Path "【ダウンロードされた場所のファイルパス】\flutter_windows_3.22.2-stable.zip" -DestinationPath "【展開先のファイルパス】\fluttersrc"

公式ではdevになってましたが,fluttersrcにしました。

Pathを更新する

後続の処理でPowerShellを使いFlutterコマンドを実行するために、FlutterをPATH環境変数に追加します。

環境変数の追加方法
  1. システム環境変数の設定を開く:

    • Windowsの検索バーに「環境変数」と入力し、「システム環境変数の編集」を選択します。
  2. 環境変数の編集:

    • 「システムプロパティ」ウィンドウが開いたら、右下の「環境変数」ボタンをクリックします。
  3. PATH変数の編集:

    • 「システム環境変数」セクションの中から「Path」を探し、選択して「編集」ボタンをクリックします。
  4. 新しいパスを追加:

    • 「新規」ボタンをクリックし、Flutter SDKのパス(例:【展開先のファイルパス】\fluttersrc\bin)を入力します。
    • 入力したら「OK」をクリックして、すべてのウィンドウを閉じます。
  5. PowerShellを再起動:

    • 環境変数を更新するために、現在開いているPowerShellウィンドウを閉じて再起動します。

Flutter doctorを実行する

Flutterのコンポーネントが入っている正常にインストールされているか検証します。

PowerShellで以下を実行

PS C:\> flutter doctor

結果がこちら
image.png

  1. Android toolchain - develop for Android devices (Android SDK version 34.0.0):
    → Android開発では必須の設定です。AndoroidStadioを使用しますので後ほど
  2. Visual Studio
    → 使いませんし、入れていないので無視
  3. Android Studio (version 2022.3)
    →  ????なんで

image.png

ここがよくなかったです

原因は古いバージョンのAndroidStadioを削除せずに、アップデートしたことが原因でした。
※古いバージョンと新しいバージョンの共存をしたままでやりたい、後述の問題が解決できる場合は無視していいかと思いますが、私はショートカットからAndroidStadioが起動できなくったため、一度AndroidStadioをアンインストールし、入れなおしました。

Android toolchain

公式ドキュメント

これらのツールがはいっていなければいけないようです。
Andoroid Stadioの初期インストール時にはAndroid SDK Command-line Toolsが有効になっていないので先ほど「!」がついています。

  • Android SDK Platform, API 34.0.5
  • Android SDK Command-line Tools
  • Android SDK Build-Tools
  • Android SDK Platform-Tools
  • Android Emulator
  1. プロジェクト選択画面から「その他のアクション」-「SDK Manager」を選択
    image.png
  2. 「言語&フレームワーク」-「Android SDK」-「SDK Tools」タブを開き、「Android SDK Command-line tool」を選択し、適用
    image.png
  3. flutter doctor --android-licensesをPowerShellで実行
flutter doctor --android-licenses

何かの利用規約に同意させられますので気になる人は内容を読んで「y」を入力
image.png
3. 完了
image.png

AndoroidStadioの設定

Flutterプラグインを入れる

  1. プロジェクト選択画面 から「プラグイン」-「Flutter」を選択

image.png

デモアプリを起動

公式

  1. Flutterプロジェクトを作成
    image.png

  2. Flutter SDKを設定
    image.png (例:`【展開先のファイルパス】\fluttersrc\flutter)

  3. プロジェクト名と対応プラットフォームを選択
     image.png

  4. 実行するデバイスを選択し、再生ボタンを押す
    image.png

  5. 起動
    image.png

画面全体

image.png

おわりに

すでにAndoroid Stadioをインストールしていたこともあり、色々と手順がぬけているかと思いますが、他の方の記事を参考にしてください。
これでようやくスタートラインに立つ前のベットから起き上がった状態になりました。
まだ概要しか知らないので、ディレクトリ構造がめちゃくちゃ謎です。

以降は最初のところFlutterの構造をなんとなく知る→Todoアプリを作るで進めていこうかと思います。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?