🐣

2021年 - これからFlutterを始める人へ学習方法のススメ

8 min read

はじめに

非常に有り触れたタイトルになっていますが、最近私の周辺でFlutterを始める方が増えてきており(推奨している影響もある)、その都度同じリンクを貼るのが億劫になってきたのでまとめることとしました。ただこの手の内容だと「ただリンクを貼るだけ」みたいな記事も散見されますが、それだけだとつまらないのでそのリンク先で何が学べたか、どう感じたかも一言添えて紹介していきます。私も1年半前からFlutterに出会い1から学習した身ですので、これからFlutterを始める方とも感覚的には近いと認識しています。より再現性が高くなるよう、私が実際に学習で使用した内容を中心に取り扱っておりますので参考にして頂ければと思います。

対象となる読者

  • Flutter SDKも最近インストールした正にこれから始める人
  • 学習するか否か迷っているけど全体像を把握したい人
  • 自分で手を動かしてものを作るのがはじめてな人

何はともあれ公式ドキュメント

おそらくFlutterを軸に生活している人の全員が全員同じことを言うと思います。英語のドキュメントにはなりますが、情報が網羅的に非常に良くまとまっておりFlutterを学ぶ上でこれ以上の最新情報が集まっている媒体はありません。文量が多く多少タフかもしれませんが、文法もスタンダートで読みやすく、最悪翻訳機能を使ってもまずは読むことが重要だと個人的には思います。

https://flutter.dev/docs

環境構築

環境がまだ整っていない方はこちらの手順に沿ってセットアップできます。

https://flutter.dev/docs/get-started/install

レイアウト構築の構造を何となく理解する

Flutterの大きな特徴と言って良いのがWidgetツリーです。このセクションではレイアウトがどのように作られているか、具体的には「テキストに色をつけるにはどうしたら良いか」程度の内容から丁寧に解説されています。初学者にとって「手を動かしてすぐに結果としてフィードバックが得られる」過程が楽しく学習を継続するのに必要な要素だと思っており、レイアウトを組むだけで早い段階で「アプリっぽいものをつくる」体験ができるようになります。余談ですが、私個人のOJTでもこちらを題材に扱いました。

https://flutter.dev/docs/development/ui/layout

チュートリアル

現在だと4セクションが取り扱われておりますが、Building layoutsAdding interactivity to your Flutter appが特に重要で、自分の手元で動かしながら丁寧に行なうと良いです。前者ではWidgetを使って軽快にレイアウトが作られる体験とHot Reloadの快適さが体験できるはずです。前者だけでも最初はタフだと思うので、ここで疲れたら一度中断しても良いと思います。後者は前者で作った画面にインタラクティブな操作(状態を使った)をつけていく内容です。

https://flutter.dev/docs/reference/tutorials

Cookbook

こちらは先程のチュートリアルと比べて、より用途を絞ったユースケースを想定した内容となっています。例えば、「ドロワーを表示したい」や「画像を読み込み完了後にフェードイン表示したい」といった内容です。例の通り、実際にアプリを作る際に必要となったタイミングで参照する形でも丁度よいかもしれません。最初に手を付けずに眺めるだけでも「Flutterを使うとよくあるアプリの機能がこういった手順で実現できるんだ」程度の感覚は持てると思います。

https://flutter.dev/docs/cookbook

公式ドキュメント以外で学ぶなら

Flutterの効率良い学び方

本記事よりも、より詳細かつ広範囲に記載されている記事です。Flutter/iOS界隈で広く知られているmonoさんによって2018年に書かれた記事です(随時更新してあります)。本記事で紹介していない内容も結構あるので、自分にあう学習方法を選択すると良いと思います。同著者のFlutter はじめの一歩もセットでオススメです。英語が苦手で前述した公式ドキュメントが辛いという方は、こちらは日本語記事ですので安心して読めます。

https://medium.com/flutter-jp/flutter-learning-c5640c5f05b9

レイアウトを体系的に学ぶのにオススメ

レイアウトの理解を助ける良記事です。色分けされたWidgetでレイアウトのどの部分を指しているかがわかりやすく、今後「こういったレイアウトを作りたい」と思った時にササッと手が動く程度にはなると思います。また、こちらの内容は動画の解説もついているので助かります。

https://medium.com/coding-with-flutter/flutter-layouts-walkthrough-row-column-stack-expanded-padding-5ed64e8f9584

フレームワークで用意されているWidgetを手軽に把握するのにオススメ

こちらはFlutterの公式Youtubeで配信されている Widget of the Weekという再生リストです。1~3分程度の短編動画形式でWidgetが1つずつ紹介されているもので、FlutterフレームワークでどのようなWidgetが提供されているかを網羅的に把握することができます。2021年9月時点で既に100以上のWidgetが紹介されています。前述で紹介したドキュメント類はある程度しっかり時間をとる必要がありますが、こちらはながら見程度でも十分学べる内容となっています。もう少し補足すると、Flutterでの開発において「Widgetの知識」だけで生産性とコードの簡潔さが大きく変わります。
例えば、文字を描画したい時にText Widgetを使うと思いますが、これにタップ操作を追加しようとした場合にはどうするでしょうか?確かにGestureDetectorで包めば要件は満たせそうですが、実はSelectableTextというクラスが既に用意されており、このWidgetを使うだけで済ますことができます。このように知識の有無で開発効率を上げることができるので知っておくに越したことは有りません。
※ちなみにSelectableTextもこちらで紹介されています。

https://www.youtube.com/playlist?list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG

itomeさんのAdvent Calendar 2019

つかもとたけしさんという方が2019年に執筆していたAdvent Calendarで、30弱ほどのエントリがあります。当時、私が学習をはじめた2020年頃には日本語文献が少なく、前述のmonoさんの記事とこちらの記事には大変お世話になりました。2019年時点で書かれた記事ではありますが、大半のエントリは枯れることなく今でも理解に必要な内容になっています。内容も掘り下げて取り扱っている印象で、理解の助けになりました。

https://adventar.org/calendars/4140

網羅的に学べるZenn本

最近知り、Zenn本でいいねが最も多くかつ無料だったので内容を見てみましたが、圧倒的なコンテンツ量でFirebaseやAdmob、CIなども触れており全体像を把握するのには良いかもしれません。内容が広範囲に渡っている分、踏み込んだ内容はやや乏しいかなという印象でしたがこの本に書いてあるチャプターを行なうだけで普通にアプリが作れてしまうほどだなと思いました。私が学習を始めたときにはなかったので実体験でのお話はできないですが、今から学ぶには良いかもと思ったので紹介しました。

https://zenn.dev/kazutxt/books/flutter_practice_introduction

下記の記事も個人的に良いなと思ったので紹介します。

Flutter の素晴らしさは、まず UI 構築で味わおう

特にこの部分は私も同じ意見で、コードの綺麗さはともかく愚直におしゃれなUIを自分の手で作ってみる体験をするのが一歩目には良いと思います。

https://zenn.dev/sugitlab/articles/d0b3858b300b0af64ed9

Udemyの教材

こちらは英語ではありますが、環境構築から一つずつ丁寧に紹介をしてくれるUdemyの動画です。見て頂くと分かりますが、レビューも非常に高くFlutterをUdemyで学ぶならこちら一択?なのかなと思います。ただ、合計で30時間弱あるのである程度時間に余裕がある方が対象だと思います。私もこの講座で学習しましたが、「朝から晩まで動画をみて終わる日が2,3日必要」という感覚を持つと良いと思います。個人的に良いなと思った部分は「async, awaitとは」「Futureをカフェのレシートを例に説明」などFlutterだけの話でなく、一般に必要となるプログラミング知識を懇切丁寧に教えてくれるところです。サムネイルのお姉さんも気さくで明るい方で楽しく学ぶことが出来、気づけば昔からの親友と感じるほどになっているはずです。

https://www.udemy.com/course/flutter-bootcamp-with-dart/

書籍

個人的に書籍類はあまり使いませんでした。有名どころの日本語書籍ですと「基礎から学ぶFlutter」などがあげられ、こちらの書籍は私の本棚に置いてありますがそこまで理解を助けた記憶はありません。序盤のFlutterの歴史やフレームワークの構造などある程度不変な部分であればまだ良いですが、書籍類ですとどうしても情報が古くなってしまい後半のサンプルなどは今ではもう使われない文法などもあります。Flutterの発展は非常に早く、常に新しい情報や書き方で更新されていくので、書籍だとアップデートを追従できずあまりおすすめできません。
2~3年前など、日本語記事が少ない段階ならまだしも、2021年9月現在では非常に多くの日本語記事が発信されその数もかなり増えてきたと思います。FlutterKaigiのようなコミュニティも拓かれ、国内におけるFlutter人口もかなり増えてきたと思いますし、書籍にお金をかけるよりはインターネット上の無料の情報をまずは収集し、それでも足りない部分があれば補う程度でも遅くないではと思います。

躓きポイント

私が実際に躓いたポイントを記載しようと思ったのですが、執筆している途中によく遭遇するエラーがまとまっているページを見つけましたので、こちらを紹介しておきます。ここに記載されている内容は、学習の初期段階でほぼ100%遭遇するであろうエラーですので、困った時に見に行けるようにブックマークなどしておくと良いと思います。

https://flutter.dev/docs/testing/common-errors

1例だけ取り上げます。

A RenderFlex overflowed…

https://flutter.dev/docs/testing/common-errors#a-renderflex-overflowed

The error often occurs when a Column or Row has a child widget that is not constrained in its size.

これはドキュメント記載の通り、ColumnやRowを使う際にサイズを持たない子Widgetを指定する際によく発生します。下記が例です。

Row(
  children: [
    Column(
      children: const [
        Text(
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed"
          " do eiusmod tempor incididunt ut labore et dolore magna "
          "aliqua. Ut enim ad minim veniam, quis nostrud "
          "exercitation ullamco laboris nisi ut aliquip ex ea "
          "commodo consequat.",
        ),
      ],
    ),
  ],
),

“To perform layout, Flutter walks the render tree in a depth-first traversal and passes down size constraints from parent to child… Children respond by passing up a size to their parent object within the constraints the parent established.” – Flutter architectural overview

こちらの通り、Flutterは親から子へサイズの制約を受け渡し、子から親へは自身のサイズを返してツリーを構成します。つまり、自身の制約を持たないColumnやRowの子Widgetに同様のColumnやRowを指定するとその子要素は制約がなくなり、長文なTextが画面に収まらなくなった結果、本エラーを返します。これを解消するには子WidgetをExpanded classで包むなどし、子のサイズを制限してあげれば良いです。

setStateの状態管理に煩わしさを感じたら

ある程度学習が進んできたら、StatefulWidget/setStateの状態管理に何となくの扱いづらさを感じるかもしれません。その場合は下記のフローチャートを参考に状態管理の方法を進めると良いと思います(同ツイートのスレッドにもありますが、導いてくれるメンターがいる場合はそれに従うというのに同意です)。

https://twitter.com/_mono/status/1170516947970097152?s=20

実践的な観点でいうと、現在はRiverpodを扱う開発者や記事が多く、効率的に学べる環境が整っているのでいきなりそれを選択するのも全然ありだと思います(このフローチャートには無いですが、書くとしたら一番下に当たる)。有料ではありますが良くまとまっていると評判ですので、私はよくこちらのBookを紹介しています。

https://zenn.dev/riscait/books/flutter-riverpod-practical-introduction

ただ、Riverpodのread/watchも元はProviderread/watch、さらにはlistenというboolプロパティに遡り、そのbool値によってdependOnInheritedWidgetOfExactTypegetElementForInheritedWidgetOfExactTypeが使い分けられているなどの背景が分かると、全体構造をイメージしやすくなるのではないかと思います。2番煎じではありますがInheritedWidgetを学ぶにはこちらの記事がおすすめです。

https://medium.com/flutter-jp/inherited-widget-37495200d965

まとめ

何かをはじめるには誰しも最初は初心者です。私も約1年半前にFlutterに出会い、学習をしてきましたが今ではある程度のアプリケーションは不自由なく作れるようになりました。人によって学習の方法や必要な時間は当然異なると思いますが1つのまとまった記事のみに頼るのではなく、本記事で紹介したリンク先のようないろいろな角度から言及している情報を収集して、自分の中で咀嚼すると効率良く学べるのではないかなと思っています。もちろん、本記事で紹介した内容以外にも良質なコンテンツはたくさんあると思いますので、ぜひご自身にあう学習方法を探してみてください。これからFlutterをはじめる人が楽しく学習できるよう、なにかのヒントとなれば幸いです。

Discussion

ログインするとコメントできます