この記事では、Flutterをほぼ知識ゼロの状態から始めて、Hello WorldをWebとスマホで動かすまでに、実際に気になったポイントを中心にまとめます。
公式ドキュメントは整っているものの、Webエンジニア視点だと前提知識のズレがあり、余計なところで時間を取られがちです。
とにかく、環境構築で消耗しないことが重要です。
Flutter SDK / Dart SDK の導入
Flutterを始めるにあたって、最初に意識した方がいいのは「Dartを別で意識しなくていい」という点です。
Flutter SDKを入れれば、Dart SDKも同梱されています。
公式サイトからSDKをダウンロードし、
パスを通すだけで基本的には問題ありません。
ここで詰まりやすいのは、インストール作業そのものよりも、その後の
確認工程です。
flutter doctor を実行すると、現在の環境で何が足りていないかを一括で教えてくれます。
Webエンジニア的には、ここが少し親切すぎて逆に油断しやすいポイントでもあります。
表示される警告は、
「今すぐ必要なもの」と「あとで触る時に必要なもの」が混在しています。
最初の段階では、Webとスマホのどちらを動かすかを決めて、必要なものだけを満たすのが重要です。
パスの通し方
Flutterは、ダウンロードしただけでは、コマンドを実行するために、flutterのアプリケーションの実態があるパス（自分の場合は、~/web/flutter/bin/flutter）を、都度記述しないといけなくなるので、flutter命令だけで実行ができるように
パスを通します。
（Mac環境で操作しています）
#シェルの確認
$ echo $SHELL
/bin/zsh
echo export PATH=\"$PATH:$HOME/ダウンロードして解凍した場所/flutter/bin\" >> ~/.zshrc
# 自分の場合
echo export PATH=\"\$PATH:$HOME/web/flutter/bin\" >> ~/.zshrc
# soourceの反映
source ~/.zshrc
上記を実行して、エラーが出なければ、次のコマンドを実行してみましょう、
flutter --version
もし、PATHの書き方が失敗したら、コマンド実行時にエラーが出るようになるので、以下で復旧してから再度パスを通す手順を実行してください。
# ターミナルで以下を実行
export PATH="/bin:/usr/bin:/usr/sbin:/sbin:$PATH"
source ~/.zshrc
アンインストール
ちなみに、Flutterを端末内から削除（アンインストール）したい場合は、
vi ~/.zshrc
を実行して、以下の行をコメントアウトか、削除して、"source ~/.zshrc" を実行します。
export PATH="/Users/あなたのインストールされているパス/flutter/bin:$PATH"
あとは、ダウンロードしたフォルダごと削除してしまえばいいだけですね。
エミュレータ・実機・Webビルドの確認
Flutterの強みは、同じコードを複数プラットフォームで動かせる点ですが、最初から全部やろうとすると確実に迷います。
まずは、Webで動かすのがオススメです。
理由は単純で、ビルドが速く
失敗したときの切り分けが楽だからです。
flutter run -d chrome で、Hello Worldがブラウザに表示されれば、ひとまず安心して先に進めます。
ここで詰まる場合、SDKのパスかChrome周りの設定に問題があることがほとんどです。
スマホについては、
Androidならエミュレータ、iOSなら実機が最短ルートです。
特にmacOS環境では、iOSエミュレータよりも実機の方が安定するケースもあります。
重要なのは、
この段階では「きれいに動かす」ことより「動くことを確認する」ことです。
Web実行手順
# Web を有効化
flutter config --enable-web
# インストール確認ツールを実行（chromeがインストールされていればOK）
flutter doctor
> Chrome - develop for the web
# Chromeブラウザでテスト実行
cd examples/hello_world
flutter run -d chrome
上記のテスト実行で、「Hello World」が表示されれば、環境構築完了です。
新たにブラウザが立ち上がって、文字が表示されます。
プロジェクト作成と最初の違和感
flutterでプロジェクトを作成するときは、任意の階層（パスが通る環境であればどこでも）で以下のコマンドを実行します。
flutter create project_1
すると、かなり多くのファイルが生成されます。
WebやPHPの感覚だと、「最初から重いな」と感じるかもしれません。
ただし、最初に本気で見る必要があるのは多くありません。
実質的に触るのは、
lib/ ディレクトリと pubspec.yaml だけです。
lib/main.dart を開くと、いきなりそれなりに長いコードが書かれていますが、
この時点で理解しようとしなくて大丈夫です。
最初は、
「このファイルがアプリの入口」
「Widgetという単位でUIが組み立てられている」
この2点だけ押さえれば十分です。
pubspec.yaml がすべての起点になる
Webエンジニアにとって一番しっくり来るのが pubspec.yaml かもしれません。
役割としては、package.json や composer.json に近い存在です。
依存ライブラリの管理、アセットの定義、アプリの基本情報がここに集約されています。
Flutterでは、このファイルを起点にプロジェクト全体が構成されるため、
「まずここを見る」という癖を早めにつけた方が楽になります。
Hello World を Web とスマホで動かす
FlutterのHello Worldは、見た目以上に意味があります。
Webとスマホで同じコードがそのまま動く体験は、想像以上にインパクトがあります。
ここでやるべきことはシンプルです。
Webで表示できたら、次にスマホで同じ画面を出す。
デザインや構成はいじらなくて構いません。
（スマホ表示するには、iPhoneやAndroidの開発環境を事前に整える必要があります）
この時点で、
「Flutterはこの感覚で開発するものなんだ」
という肌感覚を掴めれば成功です。
よくある詰まりポイントまとめ
環境構築で一番やってはいけないのは、完璧を目指すことです。
Flutterは対応範囲が広い分、最初から全部を整えようとすると必ず迷います。
このSTEPでは、
・Webやスマホで "Hello World" が出る
・createでプロジェクトを作成できる
これだけ達成できれば合格です。
このステップのあとがき
flutterの環境構築は、sdkについてはインストールというよりも、githubからcloneするか、zipファイルのsdkをダウンロードして解凍するだけなので、非常にお手軽なアプリだということがわかりました。
個人的に気になるのは、このプラットフォームのバージョンアップはどうやるんだろ？という点ですかね？
まあ、今はまだそんなことは考えなくてもいいか！
とりあえず、次のSTEPに進んで、一通りのSTEPを完了させるのが先かな・・・と。
0 件のコメント:
コメントを投稿