穏やかに

英語学習の記録と普通の生活

Flutter入門

こんにちは。2020年です。今年も新しいこと学んでいきましょう。
昨年は作りたいアプリのアイデアを簡単にペーパープロトタイプに落とし込んだのですが、今年はα版まで開発進めたいですね。 まだワイヤーフレームも出来ていません。ぼそぼそ作っていきます。

プロトタイプ作る前に最近注目されているFlutterに入門してみました。

インストールからテスト開発までは公式ドキュメントを参考にしました。 上記サイトからFlutter SDKをダウンロードするところから始めましょう。

Flutter SDKをダウンロードする

作業用のプロジェクトフォルダにダウンロードしたflutterフォルダを移行します。

そしてflutter コマンドを使用するためにパスを通します。

export PATH=$PATH:/Users/[YOUR NAME]/Documents/develop/flutter/bin

[YOUR NAME]のところは各自のユーザ名に変更して、flutterフォルダが位置するフォルダ階層までのパスを書きます。

こうすることで、次に行うコマンドが使用できます。

flutter doctor

doctorコマンドで、flutterが必要とする環境をチェックできます。こんな感じ

[✓] Flutter: is fully installed. (Channel stable, v1.12.13+hotfix.5, on Mac OS X
    10.14.5 18F132, locale en-JP)
[✗] Android toolchain - develop for Android devices: is not installed.
[!] Xcode - develop for iOS and macOS: is partially installed; more components
    are available. (Xcode 11.3)
[!] Android Studio: is not available. (not installed)
[!] VS Code: is partially installed; more components are available. (version
    1.41.1)
[✓] Connected device: is fully installed. (1 available)

Android SDKなど入れていなので、2番目にバツがついています。1番目にチェックがあれば一通り進めるかと。

Xcode をインストールする

つづいて、Xcodeをインストールするために以下の2行を書きます。

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

最初の1行を入れたらパスワードを聞かれると思うので、パスワードを入力。続いて、次のコマンドを書きます。

sudo xcodebuild -runFirstLaunch

そして、iOSのシミュレータを立ち上げます。

open -a Simulator

無事にできたら、iPhone11 Pro Maxが画面の中に出てきます。

シンプルなテストアプリをつくってみる

それでは、事始めにテスト用のアプリを作成していきましょう。

flutter create test_app

ハイフンを入力するとエラーが出てしまうのでアンダーバーを使いましょう。

cd test_appでアプリフォルダに移行して、立ち上げましょう。

flutter run

ヘッダーとフッターと作成してみましょう。こちらの記事を参考にしました。

Flutter でモバイルアプリを作ってみる 入門編① 〜ヘッダーとフッター〜 | apps-gcp.com

つくったコードはこちら。公式サイトにもいろいろデモがあるので慣れるまで試してみたいですね。

github.com