今すぐはじめるFlutter入門 #1 Flutterの特徴

Flutter とは

Flutter は、Google によって開発されたマルチプラットフォームアプリケーション開発のためのツールキットです。 Android、iOS、Web、Windows、macOS、Linux で動作するアプリケーションを、1 つのコードベースから構築することができます。

2017 年の発表以来、開発者からの注目を集め、活発なコミュニティが形成されています。近頃では、日系企業で採用されるケースも増えてきました。 Stack Overflow 2023 Developer Surveyによれば、Flutter はマルチプラットフォーム技術の中で最も関心・期待が高い技術となっています。

Flutter の主な特徴

ホットリロード

ホットリロードとは、ソースコードを更新したとき、アプリを再ビルドすることなく変更をリアルタイムに反映できる機能です。 ホットリロード機能を活用することで、ストレスなく、より迅速に UI 構築やデバッグを行うことができます。

2023 年 12 月現在、Flutter Web では、ホットリロードがサポートされていません。

Material Design コンポーネント

Flutter では、公式が提供するさまざまなコンポーネントを利用することができます。 特に、Google のデザインシステムである Material Design を実装したコンポーネントは、基本的な UI 構築を簡単にします。

Flutter のコード例

実際に、Flutter の具体的なコードを見てみましょう。 Flutter は、開発に用いるプログラミング言語としてDartを採用しています。

また、Flutter は、宣言的 UI の考え方に基づいています。 昨今、主流となっている Web フロントエンド開発における React 等の UI ライブラリと同様に、UI をいくつかのコンポーネント（ウィジェット）に分割し、それらを組み合わせて UI を構築します。

以下はのコードは、画面中央に「Hello, world!」と表示するアプリケーションの例です。

import 'package:flutter/material.dart';

void main() {
  runApp(
    const Center(
      child: Text(
        'Hello, world!',
      ),
    ),
  );
}

main() 関数は、アプリケーションのエントリーポイントです。

runApp() 関数は、引数にウィジェットを取り、ウィジェットツリーのルートに配置します。 ウィジェットツリーとは、UI を構成するためのウィジェットの階層構造のことです。

ここで、 Center ウィジェットは、レイアウトのためのウィジェットで、子ウィジェットを中央に配置します。 また、 Text ウィジェットは、文字列を表示するためのウィジェットです。

このコード例では、 Center ウィジェットの子ウィジェットが Text ウィジェットであるため、 Text ウィジェットは画面中央に表示されます。

まとめ

Flutter は、Google が提供するアプリケーション開発のための SDK で、多数のプラットフォームへの対応・ホットリロード機能など優れた開発者体験を提供します。 コンポーネント指向であり、ウィジェットを組み合わせて部品・レイアウトを構築します。

次回は、Flutter のセットアップについて具体的に取り上げます。