序章

Flutterプロジェクトの優れたパラダイムは、ウィジェットを、コンテキストに適応できる小さなテスト可能なユニットに分割することです。

Flutterは、子ウィジェットと親ウィジェット間のコールバックスタイルのイベントにVoidCallbackとFunction(x)（xは異なるタイプにすることができます）を提供します。

この記事では、コールバックスタイルのイベントを使用してウィジェット間でFlutterと通信します。

前提条件

この記事をフォローするには、次のものが必要です。

  • Flutterをダウンロードしてインストールするには。
  • Android StudioまたはVisual StudioCodeをダウンロードしてインストールするには。
  • コードエディタ用のプラグインをインストールすることをお勧めします。 AndroidStudio用にインストールされたFlutterおよびDartプラグイン。 VisualStudioCode用にインストールされたFlutter拡張機能。

この記事は、Flutter v1.22.2、Android SDK v30.0.2、およびAndroidStudiov4.1で検証されました。

ステップ1—プロジェクトの設定

Flutter用に環境を設定したら、次のコマンドを実行して新しいアプリケーションを作成できます。

  1. flutter create flutter_widget_communication

新しいプロジェクトディレクトリに移動します。

  1. cd flutter_widget_communication

flutter createを使用すると、ボタンがクリックされた回数を表示するデモアプリケーションが作成されます。

コールバックスタイルのイベントを試すために生成されたコードに基づいて構築します。

ステップ2—親ウィジェットから子ウィジェットにデータを渡す

親ウィジェット（CounterPage）と子ウィジェット（Count）を作成します。 親からのcount値が子に表示されます。

コードエディタでmain.dartを開き、CounterPage()を使用するように変更します。

lib / main.dart
import 'package:flutter/material.dart';
import 'counter_page.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Widget Communication',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: CounterPage(),
    );
  }
}

このコードはCounterPageを表示します。

新しいcounter_page.dartファイルを作成し、次のコード行を追加します。

lib / counter_page.dart
import 'package:flutter/material.dart';
import 'count.dart';

class CounterPage extends StatefulWidget {
  _CounterPageState createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Widget Communication")),
      body: Center(
        child: Count(count),
      ),
    );
  }
}

このコードは、countを子ウィジェットに渡します。

新しいcount.dartファイルを作成し、次のコード行を追加します。

lib / count.dart
import 'package:flutter/material.dart';

class Count extends StatelessWidget {
  final int count;

  Count(this.count);

  @override
  Widget build(BuildContext context) {
    return Text("$count");
  }
}

コードをコンパイルして、エミュレーターで実行します。

Screenshot of the Flutter application displaying a count of zero

これにより、画面にcount（現在はゼロに設定されています）が表示されます。

次に、VoidCallbackを追加します。

ステップ3—VoidCallbackを使用する

このチュートリアルでは、クリックを登録して親CounterPageに通知するButtonを作成する必要があります。

ここで値を返したくないので、VoidCallbackを登録する必要があります。 また、Countコンストラクター内の項目に中括弧を追加して、名前付きパラメーターにします。

count.dartに再度アクセスし、onCountSelectedを追加します。

lib / count.dart
class Count extends StatelessWidget {
  final int count;
  final VoidCallback onCountSelected;

  Count({
    @required this.count,
    this.onCountSelected,
  });

  @override
  Widget build(BuildContext context) {
    return FlatButton(
      child: Text("$count"),
      onPressed: () => onCountSelected(),
    );
  }
}

次に、counter_page.dartに再度アクセスし、onCountSelectedコールバックをリッスンします。

lib / counter_page.dart
import 'package:flutter/material.dart';
import 'count.dart';

class CounterPage extends StatefulWidget {
  _CounterPageState createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Widget Communication")),
      body: Center(
        child: Count(
          count: count,
          onCountSelected: () {
            print("Count was selected.");
          },
        )
      ),
    );
  }
}

コードをコンパイルして、エミュレーターで実行します。 ボタンを操作して、コンソールの出力を確認します。

Output
Count was selected.

ただし、この時点では、countの値はゼロのままです。

次に、Function(x)を追加します。

ステップ4—Function(x)を使用する

VoidCallbackは、期待値のないコールバックイベントに役立ちます。 親に値を返したいシナリオでは、Function(x)を使用することをお勧めします。

count.dartに再度アクセスし、Function(int)onCountChangedを追加します。

lib / count.dart
import 'package:flutter/material.dart';

class Count extends StatelessWidget {
  final int count;
  final VoidCallback onCountSelected;
  final Function(int) onCountChanged;

  Count({
    @required this.count,
    @required this.onCountChanged,
    this.onCountSelected,
  });

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        IconButton(
          icon: Icon(Icons.add),
          onPressed: () {
            onCountChanged(1);
          },
        ),
        FlatButton(
          child: Text("$count"),
          onPressed: () => onCountSelected(),
        ),
        IconButton(
          icon: Icon(Icons.remove),
          onPressed: () {
            onCountChanged(-1);
          },
        ),
      ],
    );
  }
}

次に、counter_page.dartに再度アクセスし、onCountChangeコールバックをリッスンします。

lib / counter_page.dart
import 'package:flutter/material.dart';
import 'count.dart';

class CounterPage extends StatefulWidget {
  _CounterPageState createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Widget Communication")),
      body: Center(
        child: Count(
          count: count,
          onCountSelected: () {
            print("Count was selected.");
          },
          onCountChanged: (int val) {
            setState(() => count += val);
          },
        )
      ),
    );
  }
}

ボタンがクリックされると、変更値がCount子ウィジェットからCounterPage親ウィジェットに渡されます。 次に、valとcountの間の加算が実行され、countが更新されます。

コードをコンパイルして、エミュレーターで実行します。

Screenshot of the Flutter application display an Add button, a Remove button, and a count value of 4

Add （+）および Remove （-）ボタンを操作すると、countの値がそれぞれインクリメントおよびデクリメントされます。

結論

この記事では、VoidCallbackとFunction(x)を使用して、コールバックスタイルのイベントを使用してウィジェット間でFlutterと通信する方法を学習しました。

Flutterについて詳しく知りたい場合は、Flutterトピックページで演習とプログラミングプロジェクトを確認してください。