Flutter未経験から始める学習ロードマップ｜最初のアプリを作るまで
Flutterの学習は、小さなアプリの完成を目標にする
Flutterを学び始めると、Dart、Widget、状態管理など、いくつもの用語が出てきます。まずは「画面を作る」「操作に反応させる」「データを保存する」という順番で、必要な知識を身につけましょう。
この記事では、Flutter未経験者に向けて、最初のアプリを作るまでの学習内容と順序、各段階で取り組む課題を案内します。読み終えると、自分がどこから始めて、何ができたら次へ進めばよいかを判断できます。
公式資料や動画、実装例を目的に合わせて探すときは、Flutter開発の参考サイト集も活用してください。各サイトを開く場面と、最初に読むページを案内しています。
FlutterとDartの役割を知る
Flutterは、アプリの画面や操作を作るための枠組みです。Dartは、その処理を書くプログラミング言語です。Flutterでは、共通のコードをもとにモバイル・Web・デスクトップ向けのアプリを開発できます。学習も、Dartの基礎を押さえてからFlutterの画面作成へ進みます。Flutter公式の学習ガイドにも、この順序で教材が用意されています。
最初の練習題材には、日付・タイトル・メモを残せる「学習記録アプリ」を使います。入力した情報を一覧に追加し、編集・削除して、次回の起動時にも読めるところまでを完成範囲にします。
作るもの：学習記録アプリ
一覧画面
記録を読む
追加する記録の入力へ進む
選んだ記録を編集・削除する
入力・編集画面
日付・タイトル・メモを入力
保存して一覧へ戻る
中止して変更前の一覧へ戻る
最初のアプリまでを6段階で進める
公式の学習ガイドは、環境構築、Dart、Flutterのアプリ作成、Flutterの仕組みへと進みます。本記事では、その基礎項目に学習記録アプリの課題を組み合わせ、保存とテストまでを6段階にまとめます。
各項目を選ぶと、このページの解説へ移動できます。
環境を整え、画面と機能を順に作る
サンプルを起動し、表示を変える
記録のデータと処理を扱う
部品を組み合わせて一覧を作る
追加・編集・削除を実装する
次回の起動時にも記録を読む
通常の操作・空欄・0件を確かめる
各段階では、教材の例を動かしたあとに、表示や処理を1つ変えてみてください。「どこを変えると何が変わるか」を説明できたら、次の段階へ進みます。学習時間の長さより、できるようになった操作を進捗の目安にしましょう。
1．開発環境を整え、サンプルを起動する
最初に決めるのは、学習用のアプリをどこで動かすかです。画面作成から始めたい場合は、公式のクイックスタートに沿ってWebで動かす方法があります。AndroidやiOSでの操作を試したい場合は、対象に合わせた開発環境を用意します。
コードを書くエディターと、アプリを実行する環境は役割が異なります。たとえばVS Codeでコードを書き、ブラウザやスマートフォン向けの実行環境で動作を確認します。公式クイックスタートでは使用するパソコンのOSを選べます。実行先に合わせた追加設定は、対象別のセットアップ案内で確認してください。
iOS向けに開発する場合は、macOSとXcodeを使う環境を用意します。iPhoneアプリを目標にする人は、iOS向けの公式セットアップを先に確認してください。
- Flutter SDK：アプリを作って動かすための開発ツール一式。
- エディター：コードを書き、エラーを確認するソフト。公式の導入例ではVS Codeを使います。
- 実行先：ブラウザ、実機、パソコン上でスマートフォンの動作を再現する環境などから選びます。
FlutterをインストールするとDartも含まれます。両方を学ぶ場合は、Flutterの導入ガイドから進めましょう。Dart公式の学習案内も、この導入方法を示しています。
この段階の課題：サンプルを起動し、画面内の文字を自分で決めたタイトルへ変える。変更したコードと表示の対応を確認できたら、Dartの学習へ進みます。
2．Dartでデータと処理の基本を学ぶ
Dartでは、まず「どんなデータを持つか」と「そのデータをどう処理するか」を学びます。学習記録を題材にすると、タイトルは文字列、記録の集まりはリスト、記録を追加する処理は関数、という対応で考えられます。
プログラミングも初めて
下の用語説明を読み、Dart公式の言語入門の「Hello World」「Variables」から始めます。DartPadで文字を表示する例を動かし、文字や変数の値を変更して結果を確かめましょう。
他の言語を使ったことがある
基本文法を確認したら、名前付き引数、nullの扱い、クラスの書き方を重点的に読みます。保存や通信へ進む前に非同期処理も学びます。
Dart公式チュートリアルは、変数や関数、クラス、非同期処理、テストを含み、プログラミングの基本概念を知っていることが前提です。初めて触れる項目は、次の意味と練習例を対応させて押さえます。
- 変数と型：値に名前を付け、文字列や数値などの種類を扱います。記録のタイトルと学習時間を別々の値として持つ練習をします。
- 条件分岐と繰り返し：条件で処理を選んだり、複数の記録を順に処理したりします。タイトルが空なら案内を出す、全記録のタイトルを表示する、といった例で学びます。
- 関数と引数：処理をまとめ、必要な値を渡します。名前付き引数では、値を渡すときに引数名を指定します。
- リストとクラス：リストは複数の値を順番に扱います。クラスは、日付・タイトル・メモなどを1件の記録としてまとめる型を定義するときに使います。
DartPadは、ブラウザ上でDartのコードを動かせる学習用の環境です。文字の表示と変数を試したら、言語入門の「Control flow statements」で条件分岐と繰り返し、「Functions」で関数へ進みます。各見出しの下にある詳しい解説も使い、値を変えたときに処理がどう変わるかを追ってください。
nullは、値が存在しないことを表します。Dartでは、nullを許す型に「?」を付けて区別します。null safetyは、値がない可能性を型で区別し、安全に扱えるかをチェックする仕組みです。空の文字列とnullは、それぞれ別の値として扱います。
この段階の課題：日付・タイトル・メモを持つ記録を作り、リストへ追加する。タイトルの一覧を取り出す処理まで書けたら、Flutterの画面作成へ進みます。非同期処理は、段階5の保存に入る前に学びましょう。
3．Widgetを組み合わせて画面を作る
Flutterの画面は、Widget（ウィジェット）という部品を組み合わせて作ります。文字を表示する部品、ボタン、余白を作る部品、縦や横に並べる部品があり、それらを入れ子にして画面を構成します。公式のWidget入門では、部品の作り方と再利用を学べます。
最初は、固定の記録を表示する一覧画面を作りましょう。タイトルとメモを縦に並べる、記録の間に余白を入れる、長い一覧をスクロールできるようにする、という順に広げます。
- 文字と部品の配置：Text、Column、Rowで、何をどの順番に並べるかを考える。
- 余白と大きさ：PaddingやSizedBoxを使い、部品同士の間隔を整える。
- 一覧：ListViewを学び、複数の記録を表示する。
- 部品の再利用：記録1件分の表示を切り出し、渡すデータを変えて使う。
部品を入れ子にしたときは、外側の部品を「親」、内側の部品を「子」と呼びます。配置では、親から子へ与えられる大きさの条件も学びます。文字がはみ出したときは、公式のレイアウト教材で配置の仕組みを確認し、利用できる幅と内容の長さを見直してください。
画面の構成を調べる練習には、開発用の確認ツールであるFlutter Inspectorを使います。表示している部品とコードを照らし合わせ、どの部品の配置を直すか考えましょう。
この段階の課題：固定の記録を3件並べ、タイトルを長くした場合も表示を確認する。記録1件分の部品が、どのデータを受け取っているか説明できたら次へ進みます。
4．入力・画面更新・画面移動をつなげる
画面ができたら、入力した内容が一覧へ反映されるようにします。ここで学ぶ「状態」は、表示のもとになるデータです。学習記録アプリなら、記録のリストや編集中の内容が該当します。
1 入力を受け取る
タイトルとメモを入力し、追加ボタンを押す
2 データを更新する
記録のリストへ、新しい1件を加える
3 表示へ反映する
更新したリストをもとに、一覧を表示する
まずは1画面の小さな例で、状態を持つためのStatefulWidgetと、状態の変更を画面更新につなげるsetStateを学びます。その後、複数の画面で同じ記録を扱うときに、データの置き場所を検討します。公式の状態管理の解説は、1つの部品で使う状態と、アプリ内で共有する状態を考える入口になります。
画面移動は、一覧から入力画面へ進み、入力結果を持って一覧へ戻る流れで練習します。別の画面へ進んで戻る公式教材を使い、「保存して戻る」と「中止して戻る」の違いも課題に加えましょう。
この段階の課題：記録の追加・編集・削除を実装する。変更を中止した場合には元の記録を保ち、タイトルが空の場合には入力を促せるようにします。
5．データの保存と読み込みを学ぶ
次は、アプリを終了した後も記録を残すための保存です。「操作中に持つデータ」と「次回の起動時に読み込むデータ」を分けて考え、保存するタイミングと読み込むタイミングを決めます。
保存や通信では、結果が返るまで時間のかかる処理を扱います。その前に、Dart公式チュートリアルの非同期処理を学んでください。Futureは後で得られる結果を表し、async・awaitは、その完了を待つ処理を書くために使います。
公式の保存ガイドには、キーと値の組、ファイル、SQLiteというデータベースを使う教材があります。まずは小さなデータの保存と読み込みを試し、その後で記録の追加・更新・削除へ広げます。
保存方法を選ぶときは、アプリの実行先への対応を確認しましょう。追加機能をまとめた部品を「パッケージ」と呼びます。たとえば公式のSQLite教材で使うsqfliteは、Android・iOS・macOSを対象にしています。
Webで小さな保存処理から学ぶなら、Webにも対応するshared_preferencesで、表示設定や消えても作り直せる練習用データを扱う方法があります。失うと困る記録を残す段階では、記録の保存に適したデータベースを選びましょう。保存方法は、対応する実行先と、どの程度確実にデータを残す必要があるかを合わせて決めます。
この段階の課題：記録を保存し、アプリを終了して起動し直した後に読み込む。初回起動で保存データが0件の場合にも、入力を始められる画面を用意します。
6．テストで完成条件を確かめる
機能を1つ追加するたびに、画面を操作して確認します。仕上げでは、いつも使う操作に加えて、空欄の入力や記録が0件の状態も確かめましょう。学習記録アプリでは、次の条件を完成の目安にします。
完成を判断する4つの確認
- 通常の操作：記録を追加・編集・削除できる。
- 空欄と中止：空のタイトルには案内を出し、編集を中止したら元の記録を保てる。
- 表示：記録が0件でも操作でき、長いタイトルを読める。
- 保存：保存した追加・編集・削除の結果が、再起動後にも反映される。
繰り返し確認する処理は、自動テストにもしていきます。Flutter公式のテスト入門では、関数やクラスを確かめる単体テスト、画面部品の表示や反応を確かめるWidgetテスト、アプリの一連の流れを確かめる統合テストを説明しています。
最初は「空のタイトルを入力エラーにする処理」と「追加操作の後に一覧へ表示されるか」など、確認したいことを具体的に決めてテストを作ります。コードを変更した後も同じ条件で確認できるようにしましょう。
アプリ完成後は、作りたい機能から学習を広げる
基本の入力・表示・保存をつなげたら、次に作りたい機能を1つ選びます。目的に合わせて学ぶ項目を増やすと、知識を使う場面がはっきりします。
| 作りたい機能 | 次に学ぶ項目 |
|---|---|
| 外部サービスから情報を取得する | HTTP通信、データ交換形式のJSON、読み込み中と失敗時の表示 |
| 複数の画面で同じデータを扱う | 共有する状態の管理、処理の役割に応じたコードの分割 |
| スマートフォンと大きな画面に対応する | 画面幅に応じた配置、文字サイズ、入力方法への対応 |
| アプリを他の人へ配布する | 対象OSでのテスト、配布用の設定、ストアの申請手順 |
教材の続きは、Flutter公式チュートリアルの目次から選べます。状態管理用の追加パッケージも、共有するデータが増えた段階で検討しましょう。まずデータの置き場所と更新の流れを理解しておくと、各パッケージが担当する役割を追えます。
今日の目標は、サンプルを起動して表示を1つ変えること
学習を始めるときは、公式クイックスタートで自分のパソコンのOSを選び、サンプルの起動まで進めてください。画面内の文字を変え、その変更を確認できたら最初の課題は完了です。
次の学習では、Dartで記録のデータを扱い、Flutterで一覧へ表示します。各段階の課題を1つずつ完成させ、小さなアプリ全体を自分で説明できる状態を目指しましょう。