Zenn
🐡

動くものを作ってみたいなと思いFlutterを1年学んだ振り返り

2021/01/04に公開
Android
Flutter
Dart
tech

Flutter(Dart言語)を始めて約1年ほど学んだ情報をまとめます。

個人的に模索しながら、学んだ振り返りとなります。※ベストな方法の記事ではありません。

冗長ですが、時系列に記載しています。

各段階での学習内容や、気付きが何かのご参考になれば幸いです。

一部過去記事「情報収集と開発のためのブラウザ環境」と重複します。

※都度更新予定

Flutter(Dart言語)を学んだ振り返り

はじめに

  • 動機

    • なんとなく動くもの（アプリ）を作って楽しみたい

  • 状況

    • プログラミング言語は初心者向けの本（python, JAVA, C）を読み、業務で2,3年程度
    • Android Studioも触ったことがない

  • 大きな目標（学びだす前）

    • 数ヶ月間Flutterに関するインプットを行い、単純なアプリなら何も見ずに、 複雑なアプリでも都度調べながら作れる自信をつける。
      • 【振り返り】→過去の自分のコードからコピペが多い、Android Studioの補助機能が便利、使いやすかったり・安定したアプリづくりにはまだまだ勉強が必要

まとめ

期間 工程 内容
2週間 初期調査 Dart Padを動かす。公式ドキュメントを知る。初心者向け個人ドキュメントを知る。
4週間 Flutterとは何かを無料教育動画で手を動かしながら学習 Udacity：Build Native Mobile Apps with Flutterを実施。
1週間 Dart Padで遊ぶ 1ファイルの小さな動くものをDart Padで作成。（数百行程度）
1週間 開発環境作成 Flutter環境導入。
2週間 FlutterとDartの基礎知識学習 公式サイトの練習問題を実施。
2週間 Dart Padで遊ぶ 1ファイルの中くらいの動くものをDart Padで作成。（数千行程度）
4週間 アプリを作ることを包括的に手を動かしながら学習 Udemy：Complete Flutter App Development Bootcamp with Dartを実施。
2週間 Android Studioで遊ぶ 複数ファイルに分割した中くらいの動くものをAndroid Studioで作成。（数千行程度）
4週間 Firebaseを利用したSNSアプリの作り方を学習 Udemy：Build a Social Network with Flutter and Firebase
2週間 Android Studioで遊ぶ 複数ファイルに分割し、Firebaseを利用した中くらいの動くものをAndroid Studioで作成。（数千行程度）
8週間 これまでの振り返りと基礎知識学習を蓄積 zennにまとめる。

※期間はざっくり（平日1時間程度、週末4時間程度）

スキル進捗

  • 変化を感じたときに記載
能力
Helloを出す初歩アプリをリアルタイム入力で作成可能
Flutterをウィジェットのツリー構造と理解し、ウィジェットを追加するコード記載を修得
ボタンや文字出力等の組み合わせで、自分が楽しめるものをシンプルに（1000行以下）作成可能
Android Studioを利用し、適宜リファクタリングしながら、簡単なものを作成可能（簡単なボドゲを4hほどで作れた）
そのアプリに必要な情報はAndroid Studioとgit hubを利用しメモを残し（READMEファイル、コミットメッセージ、TODOコメント）、そのほかの知識情報はZennに残すことを習慣化

今後

  • 基礎知識学習
  • 大きな動くもの作成
  • 小さくても、アプリを公開

以下、細かい内容

※リンク先の自分のコードは問題だらけです

DartPadを知る

公式ドキュメントを知る

初心者向け個人ドキュメントを知る

Udacity：Build Native Mobile Apps with Flutter

アプリを作り出す過程を学ぶ

  1. 作りたいものをレイアウトとしてイメージする（Goal）
  2. どんなファイル、ウィジェット、関数が必要か書き出す（Steps）
    →ここまでは、何となくで進められる
  3. 要件を決める（Specs）
    →具体的なイメージが出来ていないと書けない
  4. ウィジェット配置（Widgets）
    ※アプリはウィジェットのツリー構造で出来る：Flutter＝ウィジェット
    1. 必要なウィジェットが既存で存在すれば利用
    2. 無ければオリジナルウィジェットを作成
  5. 機能を実現させるための、クラス作成（Functions）
    1. 必要な機能が既存のパッケージに存在すれば利用
    2. 無ければ追記やオリジナルクラスや関数を作成
  • 上記を学んだが、下に行くほど正解がハッキリするため、スキル不足だと手が動かなくなる
    • オリジナルウィジェットの作成や、新しい機能を実現する関数のコードがパッと浮かばないと、かなり試行錯誤しながらの進め方となりそう

以下、上記の詳細や例

Udacity動画の例：（Goal-Steps-Specs）

Goals

  • Add user input so that a user can convert an amount from one unit to another.

Steps

  • 1. Fill out the TODOs in converter_route.dart using the specs below.
  • 2. Use the helper function provided to aid in the conversions. You'll likely have to add more. Remember to set the state!
  • 3. Update the Theme in main.dart, and the colors in category.dart.

Specs

  • The 'input' group is composed of a TextField and a Dropdown for the 'From' unit. This group has a Padding of 16.0.
  • Users should only be able to enter numbers.
  • The input TextField should be styled with its label in the border (see screenshot). Hint: Use the OutlineInputBorder widget.
  • An error style with error text should show up when invalid values are entered.
  • The 'output' group is composed of an output Text with the conversion result, and a dropdown for the 'To' unit. It likewise has an overall Padding of 16.0.
  • The output text should also be wrapped inside a border.
  • Dropdowns have a vertical 8.0 Padding.
  • Add a 'Compare Arrows' icon between the dropdowns. This is the Material Icon named 'compare arrows'. The arrows are sized 40.0.
  • The entire user input section is wrapped in 16.0 Padding.
  • A Category's highlight and splash colors should be retrieved from its ColorSwatch.
  • Set the ThemeData's textTheme to have a body color of black, and a display color of Colors.grey[600].
  • The ThemeData's primaryColor should be Colors.grey[500].

Customizations

  • Style the input/output boxes and dropdowns. Consider colors, border radius, padding, text themes, etc.

小さな動くものを作成

  • Dart Padですぐ動かせるようなもの

    • FlutterでMTGライフカンター

      • 要件を適当に決めてさくっと

        • 要件チェック
          • 必須
            • 2人分初期値20のカウントを用意する
            • プラスもマイナスも可能
            • リセットボタン
          • 欲しい
            • ＋5や－5のボタン
            • ゼロになると何か反応
            • 人数変更
            • サイコロ
            • コイントス
          • レイアウト
            • 利用に適し、見やすい
            • かっこいい画像や、背景でおしゃれに（オリジナル画像等）

Flutter環境導入（Android Studio）

公式サイトの練習問題

中くらいの動くもの作成①

※この時期でもAndroid Studioは使い方がよくわからず、DartPadから抜け出せずにいた

  • Dart Padですぐ動かせるようなもの

    • DartPad > WordWolf

    • 画面のイメージを確認後に作成（別途、Google Slide等で画面を適当に書く）

      1. 「タイトル画面」

        • 「始める」ボタンで次に進む

      2. 「プレイヤー設定」：プレイヤー人数と名前設定（デフォルト3人）

        • 人数のプラスとマイナスボタン
        • 「ゲーム設定へ」ボタンで次に進む

      3. 「ゲーム設定」：デフォルトwolf1人、カテゴリーはすべて、時間は3分

        • プラスマイナスボタン3種類：wolfの人数構成、お題カテゴリー、時間
        • 「設定OK！お題表示へ」ボタンで次に進む

      4. 「お題」：スマホを対象者のみが持ち、画面をタップして確認する

        • 「表示」：プレイヤー１さんが見てください。と記載あり。
        • 「キャンセル or OK」：お題を表示しますかの再度確認
        • 「覚えた！」：お題「xxx」が表示され、確認後にボタンを押して次のプレイヤーに渡す
        • 「表示」：プレイヤー２さんが見てください。と記載あり。
        • ・・・
        • 「ゲーム開始！」ボタンでトークスタート

      5. 「トーク」

        • 時間の1分増減ボタン
        • 「ストップ」：ゲーム終了ボタン
        • 「話題1,2,3」：ヒントボタン

      6. 「投票」

        • プレイヤーのラジオボタンでwolfと思う人を選択

      7. 「結果発表」

        • 投票結果で市民または、狼の勝ちかを表示（例：狼（少数派）の勝ち！）

        • だれがどのお題で、何役職だったのか表示

      8. 「戻る」

        • スタート画面に戻る


Udemy：Complete Flutter App Development Bootcamp with Dart

中くらいの動くもの作成②

  • Android Studioを利用し、適宜リファクタリングしながら、簡単なものを作成
    • （簡単なボドゲを4hほどで作れた）
    • ※非公開の個人利用としてのみ作成





Udemy：Build a Social Network with Flutter and Firebase

中くらいの動くもの作成③

  • 作っていたワードウルフを修正
    • リファクタリング（ファイル分け）
    • Firebase（Firestore）をワード利用（ワードを追加・削除、お題に利用）として追加



zennにまとめる

Discussion