FlutterのWidgetを自作しよう！

2023年4月22日

Flutter Widgetの自作は、アプリケーション開発において非常に重要です。これにより、UIコンポーネントを自由自在に作成し、アプリの外観を独自のものにできます。この記事では、Flutter Widgetの自作について解説します。Widgetの基礎から、自作Widgetの作成方法、その利点、実際に自作Widgetを使用するためのテクニックなどを紹介します。

Widget とは

Widget の基本

Flutter では、UI を構築するために Widget という概念を使用します。Widget とは、画面上の UI コンポーネントを表すもので、ボタンやテキスト、画像などの様々な要素が含まれます。Flutter における Widget は、状態を持つ Stateful Widget と、状態を持たない Stateless Widget の2つに分かれます。Widget の組み合わせで画面を構成するため、Widget を理解することは Flutter アプリ開発の基礎となります。

StatefulWidget と StatelessWidget の違い

FlutterにおけるWidgetの種類には、StatefulWidgetとStatelessWidgetの2つがあります。これらの違いについて解説します。

StatelessWidgetは、一度生成されたらその状態を変更することができず、再描画のたびに再生成されます。一方、StatefulWidgetは状態を保持し、状態に応じて再描画が行われます。状態の変更に応じて再描画を行うため、StatefulWidgetは動的なUIの構築に適しています。ただし、状態を持つため、StatefulWidgetの使用には適切なデータ管理が必要です。

Flutter Widget の構成方法

カスタム Widget の作成方法

Flutterでは、カスタムWidgetを作成することができます。カスタムWidgetを使用すると、コードの再利用性が向上し、コードの可読性が高まります。カスタムWidgetを作成する方法はいくつかありますが、一般的な方法は、StatefulWidgetまたはStatelessWidgetを継承して新しいWidgetクラスを作成することです。その後、Widgetのビルドメソッド内にレイアウトを定義し、必要に応じてプロパティを追加することができます。また、カスタムWidgetの作成には、Widgetのコンポーネントを合成する方法もあります。合成することで、既存のWidgetを再利用することができ、開発効率が向上します。

State を持つ Widget の作成方法

Flutter において、State を持つ Widget の作成方法には大きく分けて2つあります。一つ目は、StatefulWidget クラスを作成する方法です。StatefulWidget は、内部に状態を持つ Widget です。状態は、State クラスで管理されます。二つ目は、StatelessWidget と StatefulWidget を組み合わせる方法です。StatefulWidget で状態を管理し、StatelessWidget で UI を描画することで、再描画の必要がない部分を最適化することができます。それぞれの方法にはメリット・デメリットがあり、使用する場面によって適切な方法を選択することが大切です。

カスタム Widget の実装例

シンプルなカスタム Widget の実装例

Flutter では、Widget の種類を豊富に提供しているだけでなく、開発者が独自の Widget を作成することもできます。簡単なカスタム Widget を作成するための例を示します。

まず、以下のような Widget を定義します。

import 'package:flutter/material.dart';

class MyCustomWidget extends StatelessWidget {
  final String text;

  MyCustomWidget({required this.text});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(8),
      decoration: BoxDecoration(
        border: Border.all(
          color: Colors.blue,
          width: 2,
        ),
        borderRadius: BorderRadius.circular(10),
      ),
      child: Text(text),
    );
  }
}

上記の例では、MyCustomWidget という名前の Widget を定義しています。text という String 型のプロパティを受け取り、それをテキスト表示するだけのシンプルな Widget です。

build メソッドでは、Container Widget を返しています。Container Widget は、子 Widget に対して配置やスタイルを指定するための Widget です。上記例では、padding で内側の余白、decoration で枠線のスタイルと角丸の設定、child でテキスト Widget を指定しています。

最後に、以下のように MyCustomWidget を使用することができます。

import 'package:flutter/material.dart';

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

上記の例では、MyCustomWidget を body の中心に配置しています。これにより、画面にシンプルなカスタム Widget が表示されます。

以上が、シンプルなカスタム Widget の実装例です。簡単な Widget を作成する際には、上記のように StatelessWidget を継承したクラスを作成し、build メソッドで Widget を定義することができます。

ネストされたカスタム Widget の実装例

Flutterでは、小さなWidgetを組み合わせることで大きなUIを作成することができます。このアプローチの一例として、ネストされたカスタムWidgetを作成する方法があります。

例えば、以下のようなWidgetがあるとします。

class MyCustomButton extends StatelessWidget {
  final String label;

  MyCustomButton({required this.label});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {},
      child: Text(label),
    );
  }
}

このMyCustomButton Widgetを、別のWidgetの内部で使用することができます。

class MyCustomForm extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextFormField(
          decoration: InputDecoration(
            labelText: 'Name',
          ),
        ),
        TextFormField(
          decoration: InputDecoration(
            labelText: 'Email',
          ),
        ),
        MyCustomButton(label: 'Submit'),
      ],
    );
  }
}

上記の例では、MyCustomButtonをMyCustomForm内にネストし、フォームの最後に配置しています。このように、小さなWidgetを再利用することで、大きなWidgetを構築することができます。

State を持つカスタム Widget の実装例

StatefulWidgetとは

StatefulWidgetは、状態を保持するカスタムウィジェットを作成するために使用されます。このウィジェットは、状態が変更されると再描画されます。StatefulWidgetは、状態を管理するためにStateオブジェクトとペアになっています。ウィジェットの状態を変更するときは、setStateメソッドを使用して状態を更新し、ウィジェットの再描画をトリガーします。

StatefulWidget を継承したカスタム Widget の実装例

StatefulWidgetを継承したカスタムWidgetを作成するには、以下の手順に従います。

カスタムWidgetクラスを作成し、StatefulWidgetを継承します。
createStateメソッドをオーバーライドし、Stateオブジェクトを返します。
Stateクラスを作成し、StatefulWidgetの状態を保持する変数を宣言します。
createStateメソッド内で、3で作成したStateクラスのインスタンスを返します。
buildメソッドをオーバーライドし、Widgetのビルド方法を定義します。

以下は、簡単な例です。

class MyCustomWidget extends StatefulWidget {
  const MyCustomWidget({Key? key}) : super(key: key);

  @override
  _MyCustomWidgetState createState() => _MyCustomWidgetState();
}

class _MyCustomWidgetState extends State<MyCustomWidget> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text('You have pushed the button this many times:'),
        Text(
          '$_counter',
          style: Theme.of(context).textTheme.headline4,
        ),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: const Text('Increment'),
        ),
      ],
    );
  }
}

この例では、MyCustomWidgetクラスがStatefulWidgetを継承しています。また、_MyCustomWidgetStateクラスがStateクラスとして定義されており、_counterという状態を保持しています。buildメソッドでは、Columnを返すように定義されており、中にはテキストとボタンが含まれています。ボタンを押すと、_incrementCounterメソッドが呼び出され、_counterが増加します。setStateメソッドを使用することで、Flutterは変更を検知し、ビルドを再実行します。