Flutterで要素が円軌道に並ぶListViewを実装するプログラミングに関する知見を書きます。モバイルアプリ開発についての情報が多いです。{})でbuild()が実行されるようにする最後にはじめにFlutterアプリ開発で、ListViewの要素を丸く表示したい(円形の軌道上に並べたい)ことがありました。珍しい要件だとは思いますが今後このような要件に出くわす開発者の方のためにも実装方法を残しておきます。ListViewの各要素(以下、itemViewとします)を、スクロール位置に応じて、右にずらします。ScrollControllerでスクロール位置を取得し、その位置に応じて、各itemView内のmarginを調整します。{})でbuild()が実行されるようにします。3.3.8で動かしました。ListViewに表示する要素のサイズは固定です。circular_listなどのライブラリがありますが、使っていません。理由は以下の通りです。この記事では触れませんが、この要件ではpaginationが必要で、パッとみた感じこのライブラリでは、アイテムデータの末尾に次のページのアイテムデータを後から追加するようなことができなそうだったためです。itemView間の垂直方向のspaceを一定にしたかったのですが、このライブラリではできなそうだったためです。マイナスにならないように。三平方の定理を使っているだけ。ListViewのitemViewをスクロール位置に応じて右にずらす下図の赤字のitemMarginRightを求めます。そのためには、distanceBetweenCircularOrbitCenterAndItemMaxX(長いので1とします)を求めます。これは、円のcenterXとitemViewのmaxXの距離です。1は、_circularOrbitRadiusとdistanceBetweenItemCenterYInScrollFrameAndScrollFrameCenterYで三平方の定理を使って求めます。_circularOrbitRadiusは、軌道になる円の半径です。distanceBetweenItemCenterYInScrollFrameAndScrollFrameCenterYは、ListViewの枠のcenterYとitemViewのcenterYの距離です。求めたitemMarginRightをPositionedのrightに指定します。マイナスにならないように。三平方の定理を使っているだけ。{})でbuild()が実行されるようにするスクロール位置が変わるたびにbuild()が実行されるよう、_scrollController.addListener()でスクロール位置の変更を監視し変更があったらsetState()を呼び出します。}}最後に最後までお読みくださりありがとうございます。今回は、ListViewの各要素の位置をずらすということをしました。円形の軌道上に並べるというのは稀なケースかもしれないですが、その他の軌道上に並べたり、スクロール位置に応じて要素のサイズを調整したり(中心に近いほど大きくするなど)することに応用できると思います。読者の方の役に立てていたら嬉しいです。CupertinoAppでドロワーを表示するMaterialAppでは、Scaffoldのdrawerを使って簡単にドロワーを表示することができます。CupertinoAppのCupertinoPageScaffold等にはdrawerは用意されていません。この記事ではCupertinoAppでドロワーを表示する方法について説明します。モバイルアプリ開発Flutterで画面をドラッグ・スワイプで開くFlutterで、左から右にドラッグ・スワイプしたらインタラクティブに別の画面を開く方法について説明します。ドロワーメニューなどを実装する際に役に立つと思います。モバイルアプリ開発iOS13未満でCommonCryptoで共通鍵暗号(AES-CBC)を使うiOS13未満もサポートするアプリで、共通鍵暗号(AES-CBC)を使うことがありました。Cryptoを使った暗号化処理をSwiftで実装したのですが、その方法がググってもあまり出てこなかったので、ここにまとめます。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。Comments表示できるコメントはありません。Comments表示できるコメントはありません。タイトルとURLをコピーしました。