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

公開:2021/01/04
更新:2021/01/04
18 min読了の目安(約16700字TECH技術記事

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

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

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

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

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

※都度更新予定

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

はじめに

  • 動機

    • なんとなく動くもの(アプリ)を作って楽しみたい
  • 状況

    • プログラミング言語も初心者向けの本(python, JAVA, C)を昔かじった程度
    • 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. 「お題」:スマホを対象者のみが持ち、画面をタップして確認する

        • 「表示」:プレイヤー1さんが見てください。と記載あり。
        • 「キャンセル or OK」:お題を表示しますかの再度確認
        • 「覚えた!」:お題「xxx」が表示され、確認後にボタンを押して次のプレイヤーに渡す
        • 「表示」:プレイヤー2さんが見てください。と記載あり。
        • ・・・
        • 「ゲーム開始!」ボタンでトークスタート
      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にまとめる