Flutterの基本: ステートレス ウィジェットの使い方

Flutterは、Googleが提供するモバイルアプリ開発SDKで、iOSとAndroid向けのネイティブアプリを単一のコードベースから構築することができます。今回は、Flutterの基本となる「ステートレスウィジェット」の使い方について説明します。

Flutterの概要

Flutterは、ウィジェットを使ってユーザーインターフェース（UI）を構築します。ウィジェットは不変なUIのパーツの宣言であり、ボタンやメニューのような構造的な要素、フォントやカラースキームのようなスタイリスティックな要素、パディングのようなレイアウト関連の要素など、さまざまな役割を持っています。また、既存のウィジェットを組み合わせて新しいウィジェットを作成することもできます。

ウィジェットの組み合わせ

基本的なアプリケーションの例として、Scaffoldウィジェット、AppBarウィジェット、いくつかのTextウィジェットを使って、黄色いラブラドール犬の情報を表示するアプリを作成します。例えば、テキストウィジェットに背景色を追加したい場合、TextウィジェットをDecoratedBoxでラップすることで実現できます。

さらに、テキストと背景色の間にパディングを追加するためには、TextウィジェットとDecoratedBoxの間にPaddingウィジェットを挿入します。このように、複数のシンプルなウィジェットを組み合わせることで、複雑なUIを構築することができます。

ステートレスウィジェットの作成

ステートレスウィジェットは、子ウィジェットを持ち、ビルドメソッドを持つウィジェットで、状態を持たないため、アプリの動作中にプロパティが変わることはありません。たとえば、犬の名前を表示するためのカスタムウィジェット「DogName」を作成します。このウィジェットは、名前を表示するためのテキストウィジェットを含み、名前のプロパティは変更されないため、Stateless Widgetとして定義します。

class DogName extends StatelessWidget {
  final String name;

  DogName(this.name);

  @override
  Widget build(BuildContext context) {
    return Text(name);
  }
}

このようにして、簡単に再利用可能なウィジェットを作成し、コードをシンプルに保つことができます。

ウィジェットのビルドと要素ツリー

Flutterアプリはウィジェットのツリーとして構築されますが、実際に表示されるのは要素ツリーです。ウィジェットはUIの設計図であり、要素はその設計図に基づいて実際に画面に表示されるものです。`runApp`メソッドはアプリのエントリーポイントであり、ウィジェットをルート要素としてマウントし、ウィジェットのビルドメソッドを呼び出して要素を生成します。

まとめ

今回は、ステートレスウィジェットの基本的な使い方とその構成方法について紹介しました。次回は、ステートレスウィジェットを使って、データが変更されたときにUIを更新する方法について説明します。Flutterの詳細情報は、Flutter.io をご覧ください。

出典 : 元動画