はじめに

初めまして！！
優磨です！

少し、記事を書き始めた経緯を説明させてください！！

僕は、普段、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ライフを！！