開発環境をローカルにつくる

これについて言及すべきことは何もない。そう、何もないのだ。なぜならば、公式さんのおっしゃる通りに進めれば私は何の課題もなく導入できたのだ。

https://docs.flutter.dev/get-started/install

ちなみに、私の環境は　Windowsだし、最初に作成したいアプリケーションのタイプはAndroidにした。だって、Androidアプリを作成したかったんだもの。。

判んなくなったら　flutter doctor を実行すれば必要な対応は教えてもらえたよ。何も考えず、頭を空にして言われたとおりに実行すれば導入できたのサ。

統合環境はVSCodeを利用する気で、Flutterをマーケットプレースからインスコ。でも、AndroidSDKが必要で　それを満たすためにもAndroid Studioが必須やったし、Visual Studioの導入が必要やった。いや、VisualStudioはクライアントアプリのためかもしれない･･裏でC++が動いている部分があるとかいう記事を見たけどクライアントアプリのベースがC++とかな気がする。まぁいいか（適当）

Flutterのアプリケーションを作る

ここも特に･･作りたいディレクトリの中で

flutter create myApp

みたいな･･これっぽっちのコードで作れた。神かよ。ちなみに、VSCodeはCtrl+Shift+Pを実行してNew Projectでも行けた。

爆速すぎて･･マジで謝ってもらいたい。← Dockerで苦戦して時間を使ったことを後悔したｗ

ここから先は、順番に画面を編集していく。つまり、劇的に速度が落ちる自信がある。うむ、私はそういうヤツ（（開発環境で力尽きるタイプ

What's Flutter

Googleさんが提供してくれるクロスプラットフォームの開発フレームワーク＼( 'ω')／ 1つのコードベースからAndroid / iOS / Web / デスクトップアプリが作れるらしいという優れもの！

Metaさん提供のReact Nativeとどっちがいいか論争が起こっているので、競合はReact Nativeなのかな。

ホットリロードしてくれるので変更が画面に反映されるのを確認しながら開発できるらしい◎ React Nativeもホットリロードだったはずなので、どっちも即時で反映確認できるのが進めやすそうだと思っているよ。

Flutterさんは、Dartという言語を利用しているので　Web畑の私にはもしかしたらReactNativeのほうが親和性が高いのかも･･。ただ、Dartという言語も趣がJavaに似ているらしくて、Java民の私は現状あまり恐怖心は持っていないよ。

開発環境の構築

Dockerで戦おうとしたんだけど、AndroidStudioのエミュレータが上手く呼べなくて断念･･。 Webでのデバッグ可能状態までは上手く戦えたよ。

FlutterSDKとAndroidSDKはローカルにダウンロードしてコンテナに渡すことで対応した！

【DockerFile】

FROM dart:latest

WORKDIR /user/src

RUN apt-get update -y && apt-get upgrade -y && \
    apt-get install -y --no-install-recommends \
    wget \
    tar \
    gnupg \
    curl \
    git \
    unzip \
    xz-utils \
    zip \
    libglu1-mesa \
    libc6:amd64 libstdc++6:amd64 lib32z1 libbz2-1.0:amd64 \
    openjdk-17-jdk \
    gradle libgtk-3-dev \
    pkg-config clang cmake ninja-build

# 環境変数
ENV FLUTTER_SDK=/opt/flutter
ENV ANDROID_HOME=/opt/android-sdk

# Chrome
RUN wget -q -O - https://dl.google.com/linux/linux_signing_key.pub | gpg --dearmor -o /etc/apt/keyrings/google-chrome.gpg 
RUN echo "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/google-chrome.gpg] http://dl.google.com/linux/chrome/deb/ stable main" > /etc/apt/sources.list.d/google-chrome.list
RUN apt-get update && \
    apt-get install -y google-chrome-stable
RUN rm -rf /var/lib/apt/lists/*

# Flutter SDK
COPY ./local_install/flutter_linux_3.32.2-stable.tar.xz /tmp/
RUN tar -xf /tmp/flutter_linux_3.32.2-stable.tar.xz -C /opt/ && \
    rm /tmp/flutter_linux_3.32.2-stable.tar.xz && \
    git config --global --add safe.directory /opt/flutter

# Android SDK
COPY ./local_install/commandlinetools-linux-13114758_latest.zip /tmp/
RUN mkdir -p ${ANDROID_HOME}/cmdline-tools && \
    unzip -qq /tmp/commandlinetools-linux-13114758_latest.zip -d ${ANDROID_HOME}/cmdline-tools/ && \
    mv ${ANDROID_HOME}/cmdline-tools/cmdline-tools ${ANDROID_HOME}/cmdline-tools/latest && \
    rm /tmp/commandlinetools-linux-13114758_latest.zip

RUN yes | ${ANDROID_HOME}/cmdline-tools/latest/bin/sdkmanager --licenses && \
    ${ANDROID_HOME}/cmdline-tools/latest/bin/sdkmanager "platform-tools" "platforms;android-33" "build-tools;33.0.2"

# Android SDKライセンス認証
RUN mkdir -p "${ANDROID_HOME}/licenses" && \
    echo "8･･･略･･･a" > "${ANDROID_HOME}/licenses/android-sdk-license" && \
    echo "8･･･略･･･c" > "${ANDROID_HOME}/licenses/android-sdk-preview-license" && \
    echo "d･･･略･･･2" > "${ANDROID_HOME}/licenses/android-googlesource-license" && \
    echo "c･･･略･･･2" > "${ANDROID_HOME}/licenses/android-sdk-arm-addon-license" && \
    echo "3･･･略･･･b" > "${ANDROID_HOME}/licenses/android-sdk-google-license"

# ENV PATH の最終設定（全てビルド時に設定）
ENV PATH="${FLUTTER_SDK}/bin:${PATH}:${ANDROID_HOME}/platform-tools:${ANDROID_HOME}/cmdline-tools/latest/bin"

RUN flutter --disable-analytics
CMD ["/bin/bash"]

【docker-compose.yml】

services:
  app:
    build:
      context: ./app
      dockerfile: ./Dockerfile
    volumes:
      - ./app:/user/src
      - dart_node_modules:/node_modules
    ports:
      - "8000:8000"
    command: bash
    tty: true
    stdin_open: true

volumes:
  dart_node_modules:

ディレクトリ構成を下記にしておいて実行したら何か上手くいったよ。

~
├ app ディレクトリ
│  └ DockerFile
└ docker-compose.yml

実行したコマンドは↓↓

# dockerのビルドと実行
docker compose up app --build -d

# コンテナ内に入る
docker exec -it app bash

# Flutterが使えるかを確認
flutter doctor

問題なければFlutterのAppを作成して実行したらできた！（※AndroidStudioのエミュレータは上手く使えなかった。使いたかったので諦めてローカル直入れに変更した）

～初日はココまで！

あとはゆっくり戦うー

時速3歩

亀よりもゆっくり、気が向いたときに更新するかもしれない。勉強しなきゃなとは思っている。間違っていることもあるかもしれない。責任は取れない。

ローカルでプロジェクトを作る

開発環境をローカルにつくる

Flutterのアプリケーションを作る

Flutterの開発構築をしてみる！

What's Flutter

開発環境の構築