flutter チュートリアルを基礎から解説

モバイル開発•2025/1/28

はじめに

皆さんは Flutter という言葉を聞いたことがあるでしょうか。スマートフォン向けのアプリを作る場面で名前を耳にするかもしれません。多くのプラットフォームに対応できるため、企業や個人開発者が注目することが多いです。それでも、プログラミング自体が初めての方にとっては、どこから手をつければよいか悩むものですよね。この記事では、初心者でも理解しやすい言葉を使って、Flutter の基本と具体的なコード例を紹介します。

この記事を読むとわかること

Flutter とは何か
Flutter でアプリ開発を始める際の基本的なプロジェクト構造
代表的なウィジェットの使い方と特徴
サンプルコードを通じた StatelessWidget と StatefulWidget の違い
実務での活用シーンと注意すべきポイント

Flutterとは

Flutter は Google が開発するオープンソースの UIフレームワーク です。 Dartというプログラミング言語を使って、多彩なウィジェットを組み合わせながらアプリを作ります。 iOSやAndroidだけでなく、Webやデスクトップにも対応するため、同じコードベースで複数のプラットフォームに展開できるのが特長です。まとめて管理できるので、アプリを効率的に開発しやすいという点が注目されています。

Flutterの特徴

Flutter ではネイティブレベルに近いパフォーマンスが期待できると言われることがあります。これは、描画エンジンが独自に最適化されているからです。プログラムの変更をすぐに画面に反映できる「ホットリロード」という機能にも対応しており、細かなデザイン調整や画面遷移の確認がスムーズになります。使い始めはDartという言語に慣れる必要がありますが、構文がシンプルなので、初めてでも取り組みやすいでしょう。

実務で役立つシーン

企業が小規模の社内ツールを作る場合や、新しいサービスの試作を迅速に進めたい場合に便利です。例えば、iOSとAndroidの両方で社内利用アプリを提供したいとき、Flutter であればひとつのコードで両方に対応できます。また、現場ではUIデザイナーやプロジェクトマネージャーと協力しながらアプリを整えることが多いでしょう。このようなチーム開発においても、ウィジェット単位で機能やレイアウトを分割しやすいので、役割分担がやりやすいところが魅力です。

作り込みが必要な業務アプリでも、UIを部品化して使い回しができるので、同じ構造を各画面で再利用するケースがよくあります。

Flutterの基本的なプロジェクト構造

Flutter のプロジェクトは、いくつかのディレクトリによって構成されています。 lib フォルダの中に主要なDartファイルを置くのが基本で、その中に main.dart というファイルがあります。 android や ios というフォルダも存在し、それぞれプラットフォームごとの設定やビルドに関するファイルが格納される仕組みです。ここに触れると、より細かいネイティブの設定をカスタマイズできるようになります。

メインのエントリーポイント

最初に実行されるDartファイルは main.dart という名前が使われることが多いです。 main() 関数がアプリの起点となり、runApp() にアプリのウィジェットを渡して動かします。下記のように、MaterialApp を使う場合が多く、アプリ全体のテーマやルーティングをそこから設定していきます。これを理解すれば、画面遷移やレイアウト構成がわかりやすくなるでしょう。

実際のコード例

ここでは Flutter でよく使われるウィジェットを2種類紹介しながら、コードを見ていきます。 1つ目は画面表示内容が変化しない StatelessWidget 、2つ目はユーザーの操作によって内容が変化する StatefulWidget です。これらを使い分けることで、シンプルな画面からインタラクティブな画面まで対応しやすくなります。

StatelessWidgetの例

以下のコードは、画面にテキストを表示するだけの最小限のサンプルです。タップやスワイプといった動作によって内容は変化しません。


import 'package:flutter/material.dart';

void main() {
  runApp(MyStatelessApp());
}

class MyStatelessApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('StatelessWidgetサンプル'),
        ),
        body: Center(
          child: Text(
            'こんにちは Flutter',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

MyStatelessApp クラスは StatelessWidget を継承しています。このように、build メソッドの中で表示するウィジェットを組み合わせていく仕組みです。 Text や AppBar など、画面を構成する要素を組み込むのがポイントになります。

StatefulWidgetの例

次はユーザー操作に応じて表示が変わる例を見てみましょう。ボタンを押すと数字がカウントアップしていきます。


import 'package:flutter/material.dart';

void main() {
  runApp(MyStatefulApp());
}

class MyStatefulApp extends StatefulWidget {
  @override
  _MyStatefulAppState createState() => _MyStatefulAppState();
}

class _MyStatefulAppState extends State<MyStatefulApp> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('StatefulWidgetサンプル'),
        ),
        body: Center(
          child: Text(
            'カウント: $_counter',
            style: TextStyle(fontSize: 32),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _incrementCounter,
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

StatefulWidget を継承すると、画面の状態管理が可能になります。 _counter という変数を定義し、FloatingActionButton が押されるたびに setState() 内でカウントを増やしているのがわかります。このような仕組みによって、ユーザー操作に応じた動的な変化を実現できます。

UI設計のポイント

ここまでのサンプルで、ウィジェットの組み合わせ方と状態管理の基本が見えたでしょう。実務でアプリを開発する際は、このように小さなウィジェットを組み合わせて大きな画面を作る流れが多いです。 UI設計で気をつけたいのは、読みやすく保守しやすいコード構造を保つことです。例えば、リスト表示やフォーム入力などは専用のウィジェットを分割して実装すると、開発チーム内での役割分担がはっきりしやすくなります。

ホットリロードの活用

Flutter の開発環境を用意すれば、「ホットリロード」という機能を利用できます。コードを修正して保存すると、その変更がすぐにシミュレータや実機に反映される仕組みです。この機能によって、UIの微調整やテキストの修正などを素早く確認できるため、開発のスピードが高まりやすいです。レイアウトが崩れていないか、文字の大きさは適切かといった点をこまめにチェックしながら進められるのが嬉しいところですね。

デバッグやテストの取り組み

アプリ開発では、バグを取り除き品質を確保することが大切です。 Flutter には各種のデバッグ機能や、ユニットテスト・ウィジェットテストをサポートする仕組みもあります。画面ごとに機能を分割しておけば、個別テストを実行しやすくなります。会社のプロジェクトだと、別のメンバーがテストを担当することも多いでしょう。明確に役割を分けておけば、作業の重複や見落としを減らせます。

必要に応じて、プラットフォーム別の動作に合わせた検証を入念に行いましょう。特にiOSとAndroidでデザイン指針が少し違うときは、UI部品の使い方を調整する必要があります。

まとめ

ここまで、Flutter の基本からプロジェクト構造、ウィジェットのコード例、そして実務での開発シーンまでざっくり紹介しました。初心者の方でも、main.dart の構造やウィジェットという概念をつかめば、画面を少しずつ組み立てていくことができます。実務では、チームメンバーと連携しながら、保守しやすい形でウィジェットを分割すると作業しやすいでしょう。ひとつのコードベースで多くのプラットフォームに対応できるという強みがあるので、これからの開発に挑戦してみてはいかがでしょうか。