Flutter_RxDart_Sample

今日はEveryDaySoft代表の永田です。

毎夜、毎朝はプログラミングもしています。前回ブログで３言語と言いましたが、APIなども考慮すると５言語~6言語＋仕様の日本語になり言語が多いですが、言語のプラットフォームiOSのSwiftUIとGoogleのFlutterは近いので、言語の違いはさほど感じなくなります。

今回はFlutter(Dartの１言語)の理解を進める上で、こちらのサンプルを作成しています。

https://github.com/daisukenagata/rxdartsample

挙動

RxとはReactive Extensionsの略です。

Reactiveとは反応的等の意味です。

Extensionsとは拡張等の意味です。

ReactiveProgrammingはアプリ開発でも使用されています。

発行プログラムに値を追加すると、購読プログラム内に値が呼び出されるという処理を実行します。

このような処理です。

void incrementCounter() {
  setState(() {
    // 購読
    subject.listen((data) {
      _counter = data;
    });

    counterListModel.add(_counter + 1);
    // 発行
    subject.add(counterListModel.products.last.count);
  });
}

” counterListModel.add(_counter + 1);” はModelの使い方を覚えるためにプログラムを書きました。この箇所はRxとは関係ありません。 Sampleを作る中でコードの見易さを図るため、機能をクラス毎に設定しました。実装をしながらFlutterの作り方を覚えています。 Buttonの横向きに並行に実装する箇所。child: RowのRowは一つの行になりますので、その中でボタンの部品を実装し実現しています。

class CounterCustomButton extends StatelessWidget {

  final CounterPageState myHomePageState;

  CounterCustomButton(this.myHomePageState);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: Padding(
        padding: const EdgeInsets.only(left: 30.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            FloatingActionButton(
              onPressed: myHomePageState.reset,
              child: Icon(Icons.close),
            ),
            FloatingActionButton(
              onPressed: myHomePageState.incrementCounter,
              child: Icon(Icons.add),
            ),
          ],
        ),
      ),
    );
  }
}

FlutterもSwiftUIと同様にインデントが多くなりがちなので、このように機能ごとにファイルを作成すると、実装がわかりやすくなると思います。インスタンスの受け渡し、スレッド順番、スレッドの進みも理解できるようになります。要件が大量にあり、その数が１０００以上ある場合でもわかりやすい方法を考えています。

貴重なお時間お読み下さいまして、誠にありがとうございます。