simple-web-system technology

Webに関する技術をシンプルに扱うブログ

【初心者向け】Flutterを最速で入門する3つの方法

Flutterとは

FlutterGoogleが開発しているクロスプラットフォームのUI構築用フレームワークです。
現状多く使われているのはAndroidiOSですが、将来的にはWebやDesktopアプリの制作も可能になるとのことです。
(現在WebはBetaテスト、DesktopはAlphaテスト中です)

公式ページに使っている企業が掲載されています
https://flutter.dev/showcase

言語はDart言語が使われており、こちらもGoogle開発の言語です。
JavaScriptに似た文法ですが、JavaScriptよりも型関連の機能が充実しており、
IDEを使うととても書きやすい言語です。

またFlutterの記法はWebフロントエンドでよく使われる宣言的記法であり、
Webフロントエンド(特にReact)を経験したことのある人は、すぐに書けるようになります。

しかし、新しいフレームワークのため、どこから手をつけていいかわからない方も多いと思われます。
そんな方のために、自分が実際に取り組んだ方法をご紹介したいと思います。

1. 全体の流れを把握する

残念な話ですが、Flutterに関して公式の日本語ドキュメントは存在せず、
情報は英語がメインになります。

特に、最初に流れを把握するのが英語だときついという方は書籍を買うのがおすすめです。
自分にはこの本が良さそうでした。
基礎から学ぶ Flutter

ただ、全体の流れに関してはどの本もあまり変わらないので、
自分がいいと思った書籍を買うといいと思います。

英語でも大丈夫、無料がいいという方は、Flutterの公式チュートリアルがおすすめです。
https://flutter.dev/docs/get-started/install

2. 公式ドキュメントを参照する

全体の流れを把握できたら、実際に自分でアプリを作成すると思いますが
このWidgetはどんな風に使うんだっけとなることが多いです。
このときは、素直に公式のドキュメントで検索すると早いです
https://flutter.dev/docs

ListViewの動きやレイアウト、アニメーション関連はYoutubeの公式動画を見るとわかりやすいです。
https://www.youtube.com/playlist?list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG

また、少し理解するのが難しくなるもしれませんが、IDEWidgetソースコードとコメントを読むと
どんな風に動くかが確実にわかるので、できる人であればおすすめです。

Visual Stuido CodeAndroid Studioは、調べたいクラスをcontrol + clickソースコードを見ることができます。(Macだとcmd + click

3. サンプルアプリを参考にする

実際にWidgetの動作を確認したい場合は、FlutterのWidgetのサンプルが大量に載ってあるアプリがストアにいくつもあるので、それを参考にするといいです。

自分はFlutter Catalogをよく使います。(アプリストアのURLはリンク先にあります)
Firebaseの実装もあって参考になります。
Flutter Catalog - Github

Flutter公式からも同様なアプリが出ています(こちらのストアはAndroidのみ)
Flutter Gallery - Github

まとめ

まとめてみると、英語力が必要そうに見えますが
Googleのページ翻訳でも結構なんとかなる範囲です。

この記事を機にFlutterに触れてみる人が少しでも増えたら幸いです。