バリュールート

ValueRoute

以前のルーター では、単純な画面遷移をしましたが、 ValueRouteを使うと、表示した Route から戻り値を受け取ることができます。

ダイアログなどに便利です。

動かす

ValueRouteを継承したダイアログを作ります。 選択したintを返す単純ものです。

値は completeWith で返します。

class Dialog extends ValueRoute<int> with HasGameRef {
  Dialog(this.text) : super(value: -1);

  final String text;

  @override
  Component build() {
    return RectangleComponent(
      paint: BasicPalette.gray.paint(),
      size: Vector2(200, 200),
      position: Vector2(
        gameRef.size.x / 2 - 100,
        gameRef.size.y / 2 - 100,
      ),
      children: [
        TextComponent(
          text: text,
        ),
        for (var i = 0; i < 3; i++)
          ButtonComponent(
            onPressed: () => completeWith(i),
            button: TextComponent(
              text: i.toString(),
            ),
            position: Vector2(0, (i + 1) * 40),
            size: Vector2(200, 30),
          ),
      ],
    );
  }
}

あとは pushAndWait で表示して結果を受け取るだけです。

    await add(
      ButtonComponent(
        position: Vector2(game.size.x * 0.5, game.size.y * 0.5),
        onPressed: () async {
          result = await game.router.pushAndWait(Dialog('Choose a number'));
        },
        button: TextComponent(
          text: 'Dialog',
        ),
        anchor: Anchor.center,
      ),
    );

これで数字を選択するダイアログができました。