アウトプットも兼ねて、永尾 優磨がアプリ開発で
起こったことを書き綴っていきます。
新しい技術を学んでいく過程で起こったことを書いていくので、初めて
Flutterを使う人の参考になると幸いです！！
はじめに
初めまして！！
優磨です！
少し、記事を書き始めた経緯を説明させてください！！
僕は、普段、Notionを使っています。
書き心地がすごく良くて、気持ちいいためです。
エンジニアの方だと、使っている方も多いのではないでしょうか？？
最高に使いやすいNotionなのですが、少し不満があります。
それは、アプリを起動して、メモを始めるまでに、1,2秒ほどかかることです。
Notionは、検索もしやすいし、これまでのメモアプリ史上、最高です。
しかし、1,2秒したら、アイデアを忘れてしまう僕にとっては、
少し、不満です。
既に、Notionと連携して、早くメモを取ることができるアプリは、
何個かあります。
しかし、個人的には、
画面全部でメモができ、設定は裏側にあるUI
がいいなと思っています。
そこで、自分好みのUIを持つアプリを作成しようと考えました。
最終的には、Android、iOS、Mac,Windows,Linux
のそれぞれの環境で、即座に起動できるメモアプリとして
使えるようにしていきたいと思います。
シンプルな環境構築を行います
最終的には、全てのOSに対応した、メモアプリの決定版を作成したいと考えていますが、
最初からそこを目指すと、今までの経験上挫折する可能性が高いです。
そのため、今回は、ChromeとVSCodeを使って、Hello Worldと表示する簡単なアプリを作成します。
- パソコン環境は M1のMacbook Airです。
- OSはmacOS Sonoma 14.1.1を用いています。
環境構築
Flutterの環境構築
まずは、実行環境のFlutterをダウンロードして、
Mac OSでFlutterが使えるようになるところまでをやります。
Flutterの公式サイトから使用する環境をクリックする（著者の環境はMacなので、Macを選択します）
Apple Silicon版なので、右側を選択します。
ダウンロードしたZipファイルを解凍します。
ターミナルを開いて、以下のコマンドを順番に実行します。
（この作業を「パスを通す」と言います。）
mkdir ~/dev
mv ~/Downloads/flutter ~/dev/
echo '\nexport PATH=$PATH:$HOME/dev/flutter/bin\n' >> ~/.zshrc
source ~/.zshrc
実行すると次のイメージのように、
たくさん文章が出てきますが、
気にしなくて問題ありません。
また、展開したflutterのフォルダがダウンロードフォルダから
消えていると思います。
mv ~/Downloads/flutter ~/dev/
こちらのコードで、ダウンロードフォルダから、
~dev
というフォルダに移動したため、ダウンロード
フォルダからいなくなります。
Flutterが正常に動作するかの確認
正常にダウンロードされているかを確認するために、
下記のコードをターミナルに打ち込みます。
flutter --version
最初に、コードを打ち込むと下記のような画面が出てくる。
この画面が出てきたら、Flutterの環境構築は完了です。
2回目に
flutter --version
と入れると、下記のように出力されます！
Cursorの環境構築
公式サイト からダウンロードして起動します。
CursorはVSCode上でAIが使えるようになったIDEです。
Cursorについては、別途こちらの記事を参照してください。
拡張機能をクリックして、「Flutter」と検索します
検索して一番上に出てくるFlutterと書かれているアプリをインストールします。
それで、Cursorの環境構築は終了です。
Chromeのインストール
公式サイト からダウンロードします。
そして、一度クリックしてアプリを起動して完了です。
簡単なアプリの起動
-
Cursor上で、ターミナルから新しいターミナルの起動をクリックします。
-
出てきたターミナルで、
flutter create test_appを実行します
（test_appは他のアプリ名でも大丈夫です。日本語だとエラーが出るので、英語でアプリ名を作成してください） -
作成したアプリから、
libというファイルの中にあるmain.dartを開きます。
-
右下にあるMacOS (darwin)をクリックすると、上にChromeと出てきます。そのChromeを選択します。
-
3行目の
void main()と書かれている所にあるRunをクリックします。
そうすると、下記のような画面がChromeで出てくるはずです。
- 画面が出てこず、下記のようなエラーが発生した場合は、Xcodeで設定を行うことで、エラーが解消されます。
aunching lib/main.dart on macOS in debug mode...
ProcessException: Process exited abnormally:
xcrun: error: unable to find utility "xcodebuild", not a developer tool or in PATH
Command: /usr/bin/arch -arm64e xcrun xcodebuild -list -project Runner.xcodeproj
エラーの解消方法
xcode-select --install
コマンドを実行して、コマンドラインツールをインストールします。
そして、PATH 環境変数にXcodeコマンドラインツールのパスが含まれていない場合は、以下のコマンドを実行して追加します。
export PATH=$PATH:/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin
終わりに
お疲れ様でした！！
こちらで、Flutterを使ったアプリの開発ができるようになったと思います！！
それでは、よきFlutterライフを！！