Flutter初心者の勉強順、Flutterの基礎構造【プログラミング、Widget】

① Flutterの基礎構造を理解

Flutterアプリは基本この形です。



2. import 'package:flutter/material.dart';
4. void main() {
5.   runApp(MyApp());
6. }
8. class MyApp extends StatelessWidget {
9.   @override
10.   Widget build(BuildContext context) {
11.     return MaterialApp(
12.       home: Text("Hello Flutter"),
13.     );
14.   }
15. }

重要なポイント

main()
↓
runApp()
↓
Widget

Flutterは すべてWidgetで作るのが特徴です。

例

Text
Image
Button
Column
Row

② Widgetの概念

Flutterは UI = Widgetの組み合わせです。

例

Scaffold
├ AppBar
└ Body
└ Column
├ Text
└ Button

コード例

2. Scaffold(
3.   appBar: AppBar(title: Text("タイトル")),
4.   body: Column(
5.     children: [
6.       Text("こんにちは"),
7.       ElevatedButton(
8.         onPressed: () {},
9.         child: Text("ボタン"),
10.       )
11.     ],
12.   ),
13. )

③ Flutter初心者の勉強順

おすすめ順

① Dart言語
② Widget
③ レイアウト
④ 画面遷移
⑤ API通信
⑥ データ保存
④ Dart言語を少し勉強

FlutterはDartで書きます。

覚えるのはこれだけでOK。

変数
if
for
class

例

2. int score = 10;
4. if(score > 5){
5.   print("Good");
6. }

⑤ レイアウトを覚える

Flutter UIの8割はこれです。

Column
Row
Container
Padding
Center
Expanded

例

2. Column(
3.   children: [
4.     Text("タイトル"),
5.     Image.network("画像URL"),
6.   ],
7. )

⑥ 画面遷移

アプリでは画面を切り替えます。

例

2. Navigator.push(
3.   context,
4.   MaterialPageRoute(
5.     builder: (context) => SecondPage(),
6.   ),
7. );

⑦ データ管理

アプリでは状態を管理します。

初心者向け

setState

例



2. int count = 0;
4. setState(() {
5.   count++;
6. });

⑧ Flutter初心者が作るべきアプリ

最初はこれを作るのがベスト

①カウンターアプリ

ボタン押す
↓
数字増える

②ToDoアプリ

タスク追加
タスク削除

③メモアプリ

テキスト保存
一覧表示

⑨ 開発環境

Flutterはこの環境で作るのが一般的です。

エディタ

Visual Studio Code

必要

Flutter SDK
Android Studio
Android Emulator

⑩ Flutter勉強ロードマップ（最短）

初心者おすすめ

1日目
Flutter環境構築

2日目
Widget理解

3日目
レイアウト

1週間
簡単アプリ

1ヶ月
本格アプリ

⑪ Flutterのメリット

Flutterが人気の理由

iOS / Android同時開発
UIが簡単
高速