今日はEveryDaySoft代表の永田です。
毎夜、毎朝はプログラミングもしています。前回ブログで3言語と言いましたが、APIなども考慮すると5言語~6言語+仕様の日本語になり言語が多いですが、言語のプラットフォームiOSのSwiftUIとGoogleのFlutterは近いので、言語の違いはさほど感じなくなります。
今回はFlutter(Dartの1言語)の理解を進める上で、こちらのサンプルを作成しています。
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と同様にインデントが多くなりがちなので、このように機能ごとにファイルを作成すると、実装がわかりやすくなると思います。インスタンスの受け渡し、スレッド順番、スレッドの進みも理解できるようになります。要件が大量にあり、その数が1000以上ある場合でもわかりやすい方法を考えています。
貴重なお時間お読み下さいまして、誠にありがとうございます。
コメントを残す