<p data-line="0" class="code-line">Slackっぽい無限スクロールUIの作り方について説明したスライドの共有になります。</p>
<p data-line="2" class="code-line">SODA Flutter Talk #2に登壇した際の資料共有です。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__05a01a82c8e5a" src="https://embed.zenn.studio/card#zenn-embedded__05a01a82c8e5a" data-content="https%3A%2F%2Fsoda-inc.connpass.com%2Fevent%2F352830%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://soda-inc.connpass.com/event/352830/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://soda-inc.connpass.com/event/352830/</a></p>
<span class="embed-block embed-docswell"><iframe src="https://www.docswell.com/slide/51RL8P/embed#p1" allowfullscreen="true" width="100%" style="border:1px solid #ccc;display:block;margin:0px auto;padding:0px;aspect-ratio:16/9"></iframe></span>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81" data-line="7" class="code-line">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h2>
<h3 id="%E7%84%A1%E9%99%90%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E3%82%A6%E3%82%A3%E3%82%B8%E3%82%A7%E3%83%83%E3%83%88%E3%81%AE%E6%A7%8B%E6%88%90" data-line="8" class="code-line">
<a class="header-anchor-link" href="#%E7%84%A1%E9%99%90%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E3%82%A6%E3%82%A3%E3%82%B8%E3%82%A7%E3%83%83%E3%83%88%E3%81%AE%E6%A7%8B%E6%88%90" aria-hidden="true"></a> 無限スクロールウィジェットの構成</h3>
<p data-line="9" class="code-line">CustomScrollView + PagedSliverList</p>
<h3 id="%E3%83%AA%E3%82%A2%E3%83%AB%E3%82%BF%E3%82%A4%E3%83%A0%E5%90%8C%E6%9C%9F" data-line="10" class="code-line">
<a class="header-anchor-link" href="#%E3%83%AA%E3%82%A2%E3%83%AB%E3%82%BF%E3%82%A4%E3%83%A0%E5%90%8C%E6%9C%9F" aria-hidden="true"></a> リアルタイム同期</h3>
<p data-line="11" class="code-line">VisibilityAwareWidgetを50アイテムごとに仕込んでwatchする範囲を更新</p>
<h3 id="%E6%97%A5%E4%BB%98%E3%82%B8%E3%83%A3%E3%83%B3%E3%83%97" data-line="12" class="code-line">
<a class="header-anchor-link" href="#%E6%97%A5%E4%BB%98%E3%82%B8%E3%83%A3%E3%83%B3%E3%83%97" aria-hidden="true"></a> 日付ジャンプ</h3>
<p data-line="13" class="code-line">PagedSliverListを2個くっつけて間をcenterに設定</p>


【Flutter】Slackっぽい無限スクロールUIの作り方（スライド共有）

無限スクロールウィジェットの構成

まとめ

無限スクロールウィジェットの構成

リアルタイム同期

日付ジャンプ

Discussion