今日は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と同様にインデントが多くなりがちなので、このように機能ごとにファイルを作成すると、実装がわかりやすくなると思います。インスタンスの受け渡し、スレッド順番、スレッドの進みも理解できるようになります。要件が大量にあり、その数が１０００以上ある場合でもわかりやすい方法を考えています。
貴重なお時間お読み下さいまして、誠にありがとうございます。