🐣

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

2021/09/25に公開

はじめに

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

対象となる読者

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

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

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

https://flutter.dev/docs

環境構築

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

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

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

チュートリアル

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

Cookbook

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

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

Flutterの効率良い学び方

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

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

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

フレームワークで用意されている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 もこちらで紹介されています。

itomeさんのAdvent Calendar 2019

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

https://adventar.org/calendars/4140

網羅的に学べるZenn本

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

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

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

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

Udemyの教材

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

書籍

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

躓きポイント

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

1例だけ取り上げます。

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 の状態管理に何となくの扱いづらさを感じるかもしれません。その場合は下記のフローチャートを参考に状態管理の方法を進めると良いと思います（同ツイートのスレッドにもありますが、導いてくれるメンターがいる場合はそれに従うというのに同意です）。

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

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

まとめ

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