Zenn
🌟

クラウドエンジニアがFlutterを学んでみた【チュートリアル編】

2020/10/19に公開
Flutter
Dart
tutorial
mobile
tech

どうも、スウェーデンでITエンジニアをしているあめぞうです。

現在はAWSを主軸としたクラウドエンジニア(主にインフラ)をしています。terraform/k8s/jenkinsと戯れる機会の多い自分ですがアプリ開発にも興味があり、Flutterと言うのがイケてると聞いたので事前知識なしにどこまで進めるかを「開発 + 記録」を同時並行させながら試してみます。

進め方の方針

知らない技術を学ぶ際に、以下の手順を自分は良く実施します。

  • 公式ドキュメントを読んで環境設定
  • HelloWorldの実施
  • 自分が試してみたい小さな機能を実装

本記事では「Hello World」まで進めれば良いのかな、と考えてます。-> 追記: 最後まで進めました :)

実装環境

  • OS: macOS Catalina v10.15.6
  • ツール群: 以下はインストール済み
    • Xcode v12.0.1
    • Android Studio v4.0.1
    • Visual Studio Code v1.49.2

公式ドキュメントを読んで環境設定

Flutterをインストール、設定

  1. Flutter で検索 -> 公式サイト発見 -> Get startedをポチッとな。
  2. zip版をダウンロードしてインストール。
  3. 作業用フォルダに解凍後のファイルを移し、パスを設定。
  4. チュートリアル通り flutter doctor を試す。
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 1.22.0, on Mac OS X 10.15.6 19G2021, locale en-GB)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 12.0.1)
[!] Android Studio (version 4.0)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.49.2)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available

! Doctor found issues in 3 categories.

お勧めされてる通り「Flutter, Dart」のプラグインを入れます。

  • Android Studio (これをインストールする際にDartプラグインも同時についてくるようです)

  • VS Code -> Pluginページからインストール。

  • 再度 flutter doctor を試す。

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 1.22.0, on Mac OS X 10.15.6 19G2021, locale en-GB)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 12.0.1)
[✓] Android Studio (version 4.0)
[✓] VS Code (version 1.49.2)
[!] Connected device
    ! No devices available

! Doctor found issues in 1 category.

なんだか良さげですね。早速HelloWorldに取り掛かりましょう！っと思ったらXcode, AndroidのSimulatorを設定する必要があるようです。それを先に済ませましょう。

Simulatorの設定(iOS編)

既にSimulatorはインストール済みなのでチュートリアル通り「my_app」を作ってみます。

$ flutter create my_app
$ cd my_app
$ flutter run

Simulatorにデモページが表示されました！感動！

「Deploy to iOS devices」の部分はiPhoneを持ってないのでスキップします。次はAndroidの設定ですね！

Simulatorの設定(Android編)

Simulatorに送る方法じゃ無くてAndroidへ直接送る手順のようなのでスキップします。

HelloWorldの実施

  1. チュートリアルの「Write your first app」へアクセス。
  2. 同ページ内の「lib/main.dart」の部分を先ほど作成した「my_app」のものと入れ替える。

きちんと動いてそうですね！ここまで1時間ほどしか経ってないので少し自分の試してみたい機能を実装してみようかなと思います。例えばボタンをクリックすると次の画面へ遷移するやつとか、作ってみたいですね！

自分が試してみたい小さな機能を実装

  • 目標: ボタンを押したら次の画面へ遷移するものを作る。
  1. サンプル、チュートリアルを眺めてると「Navigate to a new screen and back」を発見
  2. サンプルコードをコピペして動きを確認。

Navigator関数でPushすればページの移動が出来るんですね！

チュートリアル編としてはここまで出来れば十分だと思うので今回はこの辺でお終いです :)

最後に

思った以上につまづきも無く、サクサクと進めてビックリでした。と言うのも恐らくXcode, Android Studioを別の趣味プロジェクト(Adaloコンポーネント開発; こっちはReact Native)で既に設定済だったので大幅な時間短縮が出来たと考えてます。

少し気になったのがDart言語で書くときにネストが大きく育ちやすいな、と言う印象を受けました。コンポーネント？は全てクラスで書いていくのも特徴的で色んな物たちが疎結合の関係を保っているのかな、と思いました。

今後の方針として、取り敢えず一通りの書き方を学んで何かアプリを作って世に送り出してみようかなと考えてます。

ではまた、Vi ses!

Discussion