はじめてのFlutter

はじめに

本記事は、 「Flutterの特徴」「基本構造」「コード例」を、初学者向けに丁寧に紹介します。
読み終わったころには、「Flutterで何か作ってみたい！」と思ってもらえると幸いです。

Flutterとは？

まず初めにFlutterとは？について解説します。

Flutterは、Googleが開発したUIフレームワークで、1つのコードベースで以下のような複数のプラットフォームに対応できます

• Android
• iOS
• Web
• デスクトップ（Windows / macOS / Linux）

1つのソースコードで複数のデバイスにアプリを配信できるのが最大の魅力です。

Flutterには、クロスプラットフォーム以外にも様々な魅力・特徴が有り、以下のような内容になります。

Flutterの開発言語/Dart

Flutterの開発言語はDart（ダート）™です。
聞き慣れない方もいるかもしれませんが、構文はJavaScriptやJavaに似ていて、比較的易しい言語です。

特徴：

• シンプルな構文
• Flutterに最適化されている
• DartPad（ブラウザ）ですぐに試せる！

※Dart および関連ロゴは Google LLC の商標です。当社は Google LLC から承認または提携を受けていません。

Flutterアプリの基本構造

最小構成で作成されたFlutterアプリが以下になります。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Hello Flutter')),
        body: Center(child: Text('こんにちは')),
      ),
    );
  }
}

実際に動かした画面がこちらになります。

コード解説

main()

アプリのスタート地点になり、ここからプログラムは始まります。

runApp()

Widgetツリーの開始を宣言しており、すべての土台となります。

MaterialApp

Flutterアプリ全体のテーマやナビゲーション管理の設定が行えるウィジェットです。

Scaffold

画面のレイアウト（土台）で「どこに配置を行う」を設定します。

サンプルでは以下のような配置を宣言しています。

AppBar、Text など

UIパーツでこれらを組み合わせて画面を構成します。

Widgetとは？

Flutterでは、UIのすべてをWidget（ウィジェット）として構成します。

以下にWidgetの例をまとめました。

これらのWidgetを積み木/パズルのように組み合わせて１つのUIを構成します。

Widgetを利用した、状態管理の基礎（動きのあるUI）

動きのあるUIを作るためには、状態（State）を扱う必要があります。

StatefulWidgetの例

class CounterApp extends StatefulWidget {
  @override
  _CounterAppState createState() => _CounterAppState();
}

class _CounterAppState extends State<CounterApp> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('カウント: $count'),
        ElevatedButton(
          onPressed: () => setState(() => count++),
          child: Text('増やす'),
        ),
      ],
    );
  }
}

StatefulWidget は状態を保持し、変化するたびにUIを再構築します。

setState() を呼ぶことで状態変更を反映させます。

Flutterを実際に試す方法（DartPad）

「Flutterを実際に試したい！」となったときに使える便利なツールDartPadを紹介します。

URL: https://dartpad.dev

DartPadは、Dartを動かすことができるWebツールになります。

Flutterにも対応しており、ブラウザ上でFlutterのコードを即実行可能です。
（ここまでのスクリーンショットもDartPadで実行した動作になります）

DartPad上にもFlutterを利用したサンプルがいくつか用意されています。

カウンターアプリ

ひまわりを動的に描画するアプリ

DartPadでは近年流行りのAI（Gemini）を利用してFlutterアプリの作成もおこなえるようになっています。

「とりあえずどんな物が作れるのか見てみたい」という方は一度試してみてはいかがでしょうか？

まとめ

• Flutterは1つのコードで複数プラットフォームに対応できるモダンなUIフレームワーク
• UIはWidgetという部品で構成されていて、直感的に作れる
• DartPadを使えば、環境構築不要ですぐ試せる
• 本格的な開発に向けて、ドキュメント・コミュニティも豊富！
  • Flutter公式ドキュメント
  • Flutter大学（日本語コミュニティ）

おわりに

Flutterは「アプリ開発をしたいけど、iOSとAndroid両方やるのは大変そう…」と感じていた方にとって、非常に魅力的な選択肢です。

まずは簡単なUIをDartPadで試してみて、楽しく開発の一歩を踏み出してみてください！

ここまで読んでいただきありがとうございました！