Flutter学習ガイド｜フリーランスとしてモバイルアプリ開発で稼ぐ方法

2026年4月5日

中村美咲

この記事のポイント

✓Flutterの学習方法をフリーランスモバイルアプリ開発者が解説
✓Dart言語の基礎からWidget設計
✓iOS/Android両対応のクロスプラットフォーム開発スキルまで

モバイルアプリ開発を始めたいなら、今からやるべきはFlutter。これが3年間フリーランスでアプリ開発をしてきた私の結論だ。

元々はAndroid専門のエンジニアで、Kotlinで開発していた。問題は、クライアントから「iOSも対応してほしい」と言われるたびに断るか、外注するしかなかったこと。Swiftも覚えようとしたが、同じアプリを2つの言語で書いて保守するのは現実的ではなかった。

そこでFlutterに移行したのが3年前。1つのコードベースでiOSとAndroidの両方に対応できるFlutterは、フリーランスにとって最高の選択だった。今ではWeb版も出力できるので、対応範囲はさらに広がっている。

この記事では、ゼロからFlutterを学んでフリーランスとしてアプリ開発案件を獲得するまでの道筋を解説する。

Flutterとは何か

FlutterはGoogleが開発したクロスプラットフォームフレームワーク。Dart言語でコードを1つ書けば、iOS、Android、Web、デスクトップ向けのアプリを生成できる。

クロスプラットフォームの比較

フレームワーク	言語	パフォーマンス	UI品質	案件数
Flutter	Dart	高い	非常に高い	急増中
React Native	JavaScript	中程度	高い	多い
Swift (iOS)	Swift	最高	最高	iOS限定
Kotlin (Android)	Kotlin	最高	最高	Android限定

FlutterとReact Nativeの比較でよく議論になるが、フリーランス視点ではパフォーマンスとUI品質でFlutterが優位。React Nativeは既存のReact経験を活かせるメリットがあるが、ネイティブブリッジの問題で苦労することが多い。

Flutterは独自の描画エンジン（Skia / Impeller）を使っているため、OS間のUI差異が少なく、「iOSで見たら崩れていた」という事故が起きにくい。

Dart言語の基礎（目安：1〜2週間）

FlutterはDart言語で書く。「新しい言語を覚えるのか…」と構えるかもしれないが、JavaやC#、JavaScriptの経験があれば数日で慣れる。

Dartの特徴

// 変数
String name = "田中";
int age = 30;
double height = 175.5;
bool isActive = true;

// 型推論（varで宣言可能）
var message = "Hello"; // String型と推論される

// Null Safety（nullの安全な扱い）
String? nullableName; // nullを許容する
String nonNullName = "必須"; // nullは入れられない

Dartの最大の特徴はNull Safety。変数がnullになる可能性を型レベルで管理できるため、実行時の「Null Pointer Exception」を未然に防げる。

非同期処理

Future<String> fetchData() async {
  final response = await http.get(Uri.parse('https://api.example.com/data'));
  return response.body;
}

JavaScriptのasync/awaitとほぼ同じ書き方。

クラスとコンストラクタ

class User {
  final String name;
  final int age;

  User({required this.name, required this.age});
}

final user = User(name: "田中", age: 30);

required キーワードで必須パラメータを指定できる。

Flutter学習ロードマップ

Phase 1：環境構築と基本Widget（2〜3週間）

環境構築

Flutter SDKのインストールと、開発用エディタ（VS Code or Android Studio）のセットアップ。公式の「Get started」ガイドに従えば30分〜1時間で完了する。

iOS開発にはXcodeが必要なので、Macユーザーが有利。Windowsユーザーは最初はAndroidエミュレータで開発して、iOS対応は後から考えればいい。

Widgetの基本概念

Flutterでは、UIのすべてが「Widget」という部品で構成される。テキスト、ボタン、画像、レイアウト…すべてがWidget。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('My App')),
        body: Center(
          child: Text('Hello, Flutter!'),
        ),
      ),
    );
  }
}

基本Widgetの使い方

Widget	用途
Text	テキスト表示
Container	ボックス要素（padding, margin, 背景色）
Row / Column	横並び / 縦並びレイアウト
Stack	重ね合わせレイアウト
ListView	スクロール可能なリスト
Image	画像表示
ElevatedButton	ボタン
TextField	テキスト入力

Phase 2：状態管理とナビゲーション（3〜4週間）

StatefulWidget

ユーザーの操作に応じてUIが変わるコンポーネント。

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $count'),
        ElevatedButton(
          onPressed: () => setState(() => count++),
          child: Text('Increment'),
        ),
      ],
    );
  }
}

状態管理ライブラリ

アプリが大きくなると、setStateだけでは管理しきれなくなる。主要な状態管理ライブラリ：

Riverpod: 現在の主流。型安全で、テストしやすい。公式推奨に最も近い
Provider: Riverpodの前身。既存プロジェクトでは依然多い
BLoC: パターンが明確で大規模開発向き。学習コストはやや高い

フリーランスの案件では、RiverpodかProviderを求められることが多い。どちらか一つを深く理解しておけば十分。

画面遷移（Navigation）

// 基本の画面遷移
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => DetailPage()),
);

// GoRouterを使ったルーティング（推奨）
GoRouter(
  routes: [
    GoRoute(path: '/', builder: (context, state) => HomePage()),
    GoRoute(path: '/detail/:id', builder: (context, state) => DetailPage(id: state.params['id'])),
  ],
);

Phase 3：API連携とFirebase（3〜4週間）

REST API連携

httpパッケージまたはdioパッケージを使ってAPIと通信する。

final response = await http.get(
  Uri.parse('https://api.example.com/jobs'),
  headers: {'Authorization': 'Bearer $token'},
);
final jobs = jsonDecode(response.body);

Firebase連携

フリーランスのアプリ開発案件では、バックエンドにFirebaseを使うケースが非常に多い。