Flutter開発の参考サイト集｜公式ドキュメント・動画・実装例の使い分け
Flutterの資料は、調べたい内容に合わせて選ぶ
Flutterでアプリを作ると、文法を確かめたいとき、画面の部品を探したいとき、保存機能を追加したいときで、必要な資料が変わります。この記事では、学習から実装までに使える10の参照先を、目的別に紹介します。
各サイトの役割と、初めて開いたときの入口を押さえておくと、分からないことが出てきたときに調べ始める場所を選べます。学ぶ順番を確認したい場合は、Flutter未経験者向けの学習ロードマップを使ってください。
学び始めは、この3つを使い分ける
以下の「無料」は資料の閲覧や紹介するツールの利用についての表示です。教材で使う外部サービスや、パッケージが接続するサービスの料金は、それぞれの提供元で確認します。リンクと掲載内容の確認日は2026年9月12日です。
基本・文法・部品の仕様・実装例を調べる
最初の4つは、説明の粒度で使い分けます。概念や進め方はDocs、文法はDart、名前が分かっている部品の詳細はAPI Reference、機能を作る手順はLearning Resourcesで調べます。
Flutter Docs
公式／無料／英語中心／学習を始める段階から
環境構築、画面作成、テストなど、Flutter開発の基本を調べる入口です。初めて知る機能は、ここで役割や使い方の全体像をつかみます。
開く場面：「Flutterをどう始めるか」「画面をどう組み立てるか」を知りたいときに開きます。
最初に見るところ：Flutter learning pathwayから学習の流れを確認しましょう。部品の名前を調べる段階では、トップページのWidget catalogも使えます。
Dart公式ドキュメント
公式／無料／英語中心／文法を学ぶ段階から
Flutterのコードに使う言語、Dartの文法を学べます。変数、条件分岐、関数、クラス、非同期処理など、コードを読むための土台を確認します。
開く場面：「この記号は何を意味するか」「関数に値をどう渡すか」など、文法で止まったときに使います。
最初に見るところ：リンク先のIntroduction to DartにあるHello WorldとVariablesから読みます。詳しく知りたい項目は、Languageメニューの個別解説へ進みます。
Flutter API Reference
公式／無料／英語中心／部品の名前が分かる段階から
画面の部品であるWidget（ウィジェット）などについて、渡せる値、設定や状態、呼び出せる処理を確認するための資料です。APIリファレンスは、コードから使う機能の仕様をまとめたものです。
開く場面：「ListViewにどんな設定を渡せるか」「この設定項目は何のためにあるか」を正確に調べたいときに開きます。
最初に見るところ：ListViewのページで概要とサンプルを読み、必要な設定の説明へ進んでください。
Flutter Learning Resources
公式／教材閲覧は無料／英語中心／基本の画面を作る段階から
チュートリアル、サンプルコード、ワークショップ、実装例を探せる教材一覧です。特定の機能を作る手順を知りたいときに使います。
開く場面：「一覧を表示したい」「入力欄の値を取得したい」など、作りたい機能が決まったときに開きます。
最初に見るところ：一覧画面ならUse listsが入口です。Recipeは課題ごとの実装例、Codelabは手を動かして進める教材を指します。
短いコードを試し、追加パッケージを探す
文法を理解する小さな実験にはDartPadを使い、アプリに追加する機能を探すときはpub.devを開きます。pub.devで見つけたパッケージは、対応する実行先や利用条件まで確認して選びましょう。
DartPad
公式の学習ツール／無料／画面・案内は英語中心／初学者から
ブラウザでDartの短いコードを試すための環境です。文法の説明を読んだ直後に、値や条件を変えて確かめる用途に向いています。
開く場面：「この式の結果を見たい」「繰り返し処理を小さな例で理解したい」ときに使います。
最初に見るところ：公式の使い方にあるサンプルから始めましょう。利用できるパッケージはDartPadが対応するものに限られるため、外部パッケージを使う前に同ページのLibrary supportを確認します。
pub.dev
公式のパッケージ公開サイト／閲覧無料／英語中心／追加機能を使う段階から
Dart・Flutter用のパッケージを探す場所です。パッケージは、保存や通信などの追加機能をまとめて再利用できるようにしたものです。開発元はFlutterチームから個人までさまざまです。
開く場面：自分で作る機能の一部を、公開されているパッケージで実現したいときに調べます。
最初に見るところ：shared_preferencesのページを例に、対応OSと開発元に加え、Readme（概要と使い方）、Example（使用例）、Changelog（変更履歴）、License（利用条件）を確認してみましょう。導入判断では、更新内容・対応するバージョン・データの扱いも読みます。
動画と実践記事で、作り方を掘り下げる
画面の動きや実装の考え方を追いたいときは、動画や第三者の解説記事を組み合わせます。今使っているWidgetや取り組んでいる機能に合わせて選ぶと、自分のコードと結び付けて読めます。
Flutter公式サイトの動画案内
公式が案内する動画／紹介先で無料視聴／英語中心／入門〜発展
Widgetの紹介、実装の考え方、カンファレンスの講演を探せます。Google制作の動画に加え、コミュニティの動画も案内されています。
開く場面：文章とコードだけでは動きを想像しにくいときや、開発者の説明を映像で追いたいときに使います。
最初に見るところ：ページ内のFlutter widget of the weekから、今使っている部品を探しましょう。仕組みを掘り下げたいときはDecoding Flutter、発表や講演を見たいときは公式チャンネルの再生リストへ進みます。
Code With Andrea
第三者の解説サイト／無料記事・有料講座／英語／基礎学習後の実践向け
Andrea Bizzotto氏によるDart・Flutter・Firebaseの解説サイトです。実践的な記事や講座を通じて、状態管理、コードの構成、テストなどを学べます。
開く場面：小さな画面を作った後に、「データや処理をどこへ置くか」「アプリ全体をどう整理するか」を学びたいときに候補になります。
最初に見るところ：まず無料チュートリアル一覧から自分の課題に近い記事を選びます。有料講座の案内では、目次・前提知識・対応バージョンを確認してから受講を検討してください。
動画や記事のコードを使うときは、公開・更新日と対象バージョンも確認します。英語の説明はブラウザ翻訳を補助に使い、Widget名、引数名、エラーメッセージは原文と照合すると、API Referenceや検索につなげやすくなります。
アプリの状態と、報告済みの不具合を調べる
不具合を調べるときは、まず手元のアプリで何が起きているかを把握します。DevToolsの資料で確認方法を調べ、必要に応じて同じ症状の報告をIssuesで探しましょう。
Flutter and Dart DevToolsの公式ガイド
公式／無料／英語中心／アプリを動かす段階から
実行中のアプリを調べる開発ツールの案内です。画面の配置、処理の重さ、メモリ、通信、ログなど、調べる対象に応じたツールを確認できます。
開く場面：「部品の大きさが思った通りにならない」「画面の動きが重い」など、実際のアプリの状態を調べたいときに開きます。
最初に見るところ：画面の配置から学ぶならFlutter Inspectorのガイドへ進みましょう。自分のエディターからDevToolsを開く方法は、入口ページのHow to launch DevToolsで選べます。
Flutter公式リポジトリのIssues
公式リポジトリ・投稿は開発者や利用者／閲覧無料／英語中心／不具合調査の段階
Flutterに寄せられた不具合報告や機能の要望を調べられます。Issueは、問題や提案ごとに経緯を記録する項目です。報告本文と、その後の議論を読み合わせます。
開く場面：自分のコードや設定を確認したうえで、同じ症状の報告や、Flutter側の対応状況を探したいときに使います。
最初に見るところ：リンク先のIssues一覧で、エラーメッセージの特徴的な部分やWidget名を検索します。OS、Flutterのバージョン、再現条件、Open／Closedの状態と終了理由を確認し、自分の状況と照合してください。
追加パッケージに関する問題は、pub.devの該当ページから、そのパッケージのリポジトリやIssue Trackerへ進みます。Flutter本体とパッケージでは、報告先が分かれる場合があります。
「一覧を作りたい」から資料を使い分ける
たとえば学習記録を一覧表示する場合は、次のように資料を使い分けられます。作りたい機能から実装例へ進み、その例に登場した部品を詳しく調べる流れです。
1 作る手順を読む
Use listsで、一覧を組み立てる例を読む。
2 設定の意味を調べる
ListViewのAPI資料で、例に出てきた設定を確認する。
3 実際の配置を調べる
Inspectorのガイドを使い、画面の部品構成を確認する方法を学ぶ。
ブックマークには「Flutter：文法」「Flutter：実装例」のように、用途が分かる名前を付けておくと便利です。まずは今の学習課題に必要な資料を1つ開き、説明を読んでから、自分のコードで変えたい箇所を決めましょう。