📘 Flutter / Dart の基本文法とアプリ開発の超入門
私がDartの言語が読んでどんなことをしようとしているか分かるために必要そうだなと思う知識をまとめてみました。
1. Flutter = Widget の積み木で画面を作る
Flutter の画面は 全部 Widget（ウィジェット） という部品でできている。
- Text → 文字
- Image → 画像
- ElevatedButton → ボタン
- Column / Row → 並べる箱
- Scaffold → 画面の土台
積み木を重ねるように 入れ子構造（ツリー構造） で画面を作る。
2. Dart の基本文法（必要最小限）
var name = "Penginfly"; //var → 変わる
final age = 20; // final → 変わらない
const pi = 3.14; // const → ガチの定数
関数：
void hello() {
print("こんにちは");
}
クラス（Flutterの画面はクラスで作る）：
class Person {
final String name;
Person(this.name);
}
3. StatelessWidget と StatefulWidget
Flutter の画面を作る時は 2種類のWidgetを使い分ける。
📌 StatelessWidget
→ 値が変わらない画面
例：タイトル画面、固定テキスト
📌 StatefulWidget
→ 値が変わる画面
例：カウンター、入力フォーム、ログイン、API読み込み
アプリ開発では StatefulWidget を使うことがめちゃ多い。
4. StatelessWidget
class MyTitle extends StatelessWidget {
const MyTitle({super.key}); // ← コンストラクタ
@override
Widget build(BuildContext context) {
return Text("こんにちは");
}
}
5. StatefulWidget の仕組み
StatefulWidget は 1つの画面が “2つのクラスでできている”。
class MyCounter extends StatefulWidget {
const MyCounter({super.key});
@override
State<MyCounter> createState() => _MyCounterState();
}
class _MyCounterState extends State<MyCounter> {
int count = 0;
@override
Widget build(BuildContext context) {
return Column(
children: [
Text("$count"),
ElevatedButton(
onPressed: () {
setState(() {
count++;
});
},
child: Text("増やす"),
),
],
);
}
}
■ (1つ目) StatefulWidget 本体
＝「設計図の部分」
class MyCounter extends StatefulWidget {
const MyCounter({super.key});
@override
State<MyCounter> createState() => _MyCounterState();
}
ここでやることは 「この画面は状態を持ちます」と Flutter に宣言するだけ。
- ここには変数を書かない
- ロジックも書かない
- 値も持たない
ただの 枠・準備・入口。
■ (2つ目) State クラス
＝「実際の画面」「数字や入力など、変わる部分を持つクラス」
class _MyCounterState extends State<MyCounter> {
int count = 0;
}
ここに “この画面の状態（State）” を全部書く。
- 表示する数字
- ボタンが押された回数
- 入力された文字
- APIの結果
- Firebaseの情報
全部この中に入る。
🎯 2つに分かれている理由（超大事）
設計図（StatefulWidget）→ 不変
中身（State） → 変わる
Flutter が画面を賢く更新できるように
「変わるところ」と「変わらないところ」を分けている。
これが分かるだけで Flutter の世界が一気にクリアになる。
setState の役割（画面が更新される理由）
カウンターで「数字が増えたのに画面が変わらない…なんで？」
→ 初心者が必ずここでつまずく。
Flutter はこう考えている：
“値が変わっただけでは画面を書き換えない”
つまり、自動では反映されない。
そこで使うのが setState()。
setState(() {
count++;
});
setState の内部でやっていること
- count を変更
- 「値が変わったよ！」と Flutter に報告
- Flutter が画面を作り直す（再描画）
6. よく使うウィジェットまとめ
- Text
- Center
- Column / Row
- ElevatedButton
- ListView
- TextField
- Scaffold（AppBar + body）
アプリの8割はこれで作れる。
7. よく使うWidgetまとめ（最低これだけでOK）
文字
Text("Hello")
中央に置く
Center(child: Text("Hello"))
ボタン
ElevatedButton(
onPressed: () {},
child: Text("押す"),
)
入力欄
TextField(
controller: textController,
)
ListView（縦スクロール）
ListView(
children: [
Text("A"),
Text("B"),
],
)
8. 画面遷移（Navigator）
基本の遷移：
Navigator.push(
context,
MaterialPageRoute(builder: (context) => NextPage()),
);
意味：
- “Navigator” は ページを重ねて管理する人
- push → 新しい画面を上に積む
- pop → 上の画面を取り除いて戻る
スマホの「戻る」ができるのはこの仕組みのおかげ。
9. async / await（時間のかかる処理の書き方）
API通信・Firebase・DBは全部これを使う。
Future<void> fetchData() async {
final res = await http.get(url);
}
用語の意味を激簡単に：
- Future → “未来に返ってくる値”
- async → “この関数は時間がかかるよ”
- await → “結果が返るまで待つよ”
例えば：
- ネット通信
- 画像読み込み
- Firebaseログイン
- データベース読み込み
全部「すぐ終わらない」から async/await が必要。
10. Flutter 全体のまとめ（初心者向け最重要ポイント）
- Flutterは Widget の積み木
- 変わる画面 → StatefulWidget
- 中身は State クラスに書く
- 値が変わったら setState
- 画面遷移は Navigator.push/pop
- API, Firebase は async/await