# 並び替えを行うと一瞬前の状態が表示されてしまう

**URL:** <https://www.nocode-faq.com/t/topic/4234>\
**Category:** flutterflow\
**Tags:** フロントエンド\
**Created:** [2024 年 4 月 26 日午前 7:34 UTC](https://www.nocode-faq.com/t/topic/4234 "2024-04-26T07:34:31Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ysys0201](https://avatars.discourse-cdn.com/v4/letter/y/7993a0/32.png) [@ysys0201](https://www.nocode-faq.com/u/ysys0201)\
**Post date:** [2024 年 4 月 26 日午前 7:34 UTC](https://www.nocode-faq.com/t/topic/4234/1 "2024-04-26T07:34:31Z")

</div>

ListViewを使って並び替え機能を実装しました。  
仕様は公式のチュートリアルに載っているものと同じです。  
しかし、添付GIFのように並び替え直後に一瞬だけ前の状態が表示されしまいます。  
可能であれば前の状態は表示されない自然な挙動にしたいのですが、対策などがありましたらご教示いただけますと幸いです。  
よろしくお願いいたします。

![20240426_163256](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/e/ebdf00a31fa5fb57b5eb5b278a6fb493c059cd40.gif)

---

<div class="post-metadata">

**Author:** ![nocodecamp.jimu](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/nocodecamp.jimu/32/3214_2.png) [@nocodecamp.jimu](https://www.nocode-faq.com/u/nocodecamp.jimu)\
**Post date:** [2024 年 4 月 29 日午前 3:03 UTC](https://www.nocode-faq.com/t/topic/4234/2 "2024-04-29T03:03:35Z")

</div>

3日以上回答が付きませんね。

これは運営Botです。なかなか回答が付かない場合には、

質問フォーマットに沿って質問をすることで、回答が得られるかもしれません。

以下のフォーマットを参考にしてください

**スキルに関係なく自由に投稿下さい**

- 質問者の方は、あとの方が読みやすいように、回答者が推測しやすいようにする為、わかりやすいタイトルや画像などを多めに張り付けるようにしてください。また、質問に回答してもらった場合には、一言でも”お礼”を言っていただければ、回答者の励みになります。

**質問の範囲**

ノーコードツールに質問のある範囲でお願いします。Javascript,Flutter などのコーディング要素が含まれていた場合には回答しきれない可能性があります。

質問テンプレートに沿って投稿いただくと回答いただける可能性があがりますので、なるべく詳細を記入するようにしてください。回答する方にわかりやすいよう質問文章も整理して投稿下さい。

質問には、少し下にあるテンプレートを使って下さい。

**回答者の方は、** スキルは問いません。どんな方が回答いただいても結構です。交流や質問者の気づきになれば良いので、積極的にコメント下さい。アウトプットすることで勉強になることも多いはずです。

**免責事項**

本スレッドは、NoCodeCampのオンラインサロンの管理ですが、回答を保証したり、正確性を担保することはできません。サロン生の交流を目的とした質問回答となります。

以下に関する質問には、回答がつかない可能性があります。

・案件に関する要件定義

・バックグラウンドがわからない

**たくさんの回答が欲しい場合には、構築人材の紹介もしてます**

その他、急ぎや対応や、構築の支援が欲しいときはありませんか？

例えば、業務案件で、すぐに回答が必要の場合には、人材紹介事業を検討下さい。

[NoCodeCamp人材紹介](https://nocodecamp.co.jp/jinzai)

**質問者のテンプレート**

- この文章は投稿時削除下さい。

以下は、投稿する人のためのテンプレートです。

必要のない項目は、削除下さい。

###・前提条件・発生している問題・エラーメッセージ ・実装したい機能

### スクリーンショット

- できれば、全体が分かるようにスクリーンショットを載せてもらえれば助かります。

---

<div class="post-metadata">

**Author:** ![tsubasa](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/tsubasa/32/8670_2.png) [@tsubasa](https://www.nocode-faq.com/u/tsubasa)\
**Post date:** [2024 年 5 月 1 日午前 9:51 UTC](https://www.nocode-faq.com/t/topic/4234/3 "2024-05-01T09:51:27Z")

</div>

おそらくですが、Firebaseを使っての実装になりますか？  
だとすると、

この問題は、FirebaseFirestoreのデータ更新と画面の描画のタイミングが決まっているため、その状況は解決することはできません。

具体的には、以下の手順で起こっています。

1. リストの並び替えロジックが実行される
2. リスト自体は並び替えられる
3. Firebaseへの書き込みが行われる
4. Firebaseからデータが読み込まれる
5. 画面が描画される

つまり、リストの並び替えが行われた直後は画面に反映されていないため、一瞬古い順番で表示された後に、Firebaseからデータが読み込まれ並び替え後の順番で表示されるということが起こっています。

このフローで対応するなら、Appstate側（データ表示件数次第では無理かもしれませんが）で対応するなどの方が良いかと思います。

とはいえ、Firebaseだと原則、希望の動作はできないかと思いました。

> Future reorderFirebaseItems(  
> List list,  
> int oldIndex,  
> int newIndex,  
> ) async {  
> // If the item is being moved down the list, we adjust the newIndex.  
> if (oldIndex \< newIndex) {  
> newIndex -= 1;  
> }
> 
> // Remove the item from its current position in the list.  
> final PlaylistRecord item = list.removeAt(oldIndex);
> 
> // Insert the item into its new position.  
> list.insert(newIndex, item);
> 
> // Create a batch to combine multiple Firestore operations into one.  
> final batch = FirebaseFirestore.instance.batch();
> 
> // Iterate through the list and update the order field for each document in Firestore.  
> for (int i = 0; i \< list.length; i++) {  
> final PlaylistRecord doc = list[i];  
> // Update the ‘order’ field of the document with its new index.  
> // This assumes that you have an ‘order’ field in Firestore where you store the order of the items.  
> batch.update(doc.reference, {  
> ‘order’: i  
> });  
> }
> 
> // Commit all the batched operations to Firestore.  
> return await batch.commit();  
> }

> **[ListView | FlutterFlow Docs](https://docs.flutterflow.io/widgets-and-components/widgets/layout-elements/listview)**

---

<div class="post-metadata">

**Author:** ![ysys0201](https://avatars.discourse-cdn.com/v4/letter/y/7993a0/32.png) [@ysys0201](https://www.nocode-faq.com/u/ysys0201)\
**Post date:** [2024 年 5 月 4 日午後 4:16 UTC](https://www.nocode-faq.com/t/topic/4234/4 "2024-05-04T16:16:54Z")

</div>

すみません返信遅くなりました。  
ご回答いただきありがとうございます。  
はい、Firebaseを使用しています。  
確かに書き込み,読み込みを行うと考えると、ラグは発生してしまいそうですね。  
AppStateを使った並び替えも試してみようと思います。  
勉強になりました。ありがとうございました🙇‍♂️