The latest articles on DEV Community by optixium (@optixium). https://dev.to/optixium https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3908753%2F8bb46b32-a31a-4240-bdd6-65a7fc22529d.png https://dev.to/optixium en optixium Sat, 02 May 2026 09:47:21 +0000 https://dev.to/optixium/5-flutter-ui-components-i-built-so-you-dont-have-to-d49 https://dev.to/optixium/5-flutter-ui-components-i-built-so-you-dont-have-to-d49 <p>After building several Flutter apps, I kept <br> rebuilding the same UI components from scratch <br> every single time.</p> <p>Onboarding screens. Chat bubbles. Pricing pages. <br> Product grids. Feed screens.</p> <p>So I decided to properly package them as clean, <br> standalone <code>.dart</code> files — zero external dependencies, <br> drop-in ready.</p> <p>Here's what I built:</p> <h2> 🚀 1. Animated Onboarding Flow </h2> <p>3-step animated intro screen with:</p> <ul> <li>Smooth fade animations via <code>AnimationController</code> </li> <li>Animated page indicator dots</li> <li>Skip button + customizable slides</li> <li>Single <code>.dart</code> file</li> </ul> <h2> 📱 2. Stories &amp; Feed UI </h2> <p>Instagram-style social feed with:</p> <ul> <li>Horizontal stories bar with animated gradient ring</li> <li>Post cards with animated like button</li> <li>Dark theme out of the box</li> <li>Single <code>.dart</code> file</li> </ul> <h2> 🛒 3. Product Card Kit </h2> <p>E-commerce grid with:</p> <ul> <li>Scale animation on tap (feels premium)</li> <li>Live cart counter in AppBar</li> <li>Per-product accent colors</li> <li>Single <code>.dart</code> file</li> </ul> <h2> 💎 4. Pricing Plans </h2> <p>SaaS pricing screen with:</p> <ul> <li>Monthly/Yearly animated toggle</li> <li>Auto-calculated savings badge</li> <li>"Most Popular" plan highlight</li> <li>Single <code>.dart</code> file</li> </ul> <h2> 💬 5. Chat Bubble UI </h2> <p>Real-time chat screen with:</p> <ul> <li>Animated 3-dot typing indicator</li> <li>Auto-scroll to latest message</li> <li>Sent &amp; received bubble styles</li> <li>Single <code>.dart</code> file</li> </ul> <h2> Key Technical Decisions </h2> <p><strong>Why single .dart files?</strong></p> <p>No pubspec.yaml changes needed. Copy the file, <br> import it, done. Developers hate dependency conflicts.</p> <p><strong>Why zero external packages?</strong></p> <p>Flutter's built-in widgets are powerful enough for <br> all of these. <code>AnimationController</code>, <code>PageView</code>, <br> <code>ListView</code> — everything is native.</p> <p><strong>Samsung Galaxy navigation bar bug</strong></p> <p>Learned this the hard way — always wrap your <br> bottom UI elements in <code>SafeArea(top: false)</code> <br> otherwise they get hidden behind the gesture <br> navigation bar on Android.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight dart"><code><span class="n">SafeArea</span><span class="p">(</span> <span class="nl">top:</span> <span class="kc">false</span><span class="p">,</span> <span class="nl">child:</span> <span class="n">Container</span><span class="p">(</span> <span class="c1">// your input bar or bottom content</span> <span class="p">),</span> <span class="p">)</span> </code></pre> </div> <p>Also always set <code>resizeToAvoidBottomInset: true</code> <br> on your Scaffold when you have input fields.</p> <h2> Where to get them </h2> <p>I packaged all 5 on Gumroad:</p> <ul> <li>🚀 <a href="https://optixium.gumroad.com/l/dxnlex" rel="noopener noreferrer">Onboarding Flow — $24</a> </li> <li>📱 <a href="https://optixium.gumroad.com/l/hlvzg" rel="noopener noreferrer">Stories &amp; Feed UI — $29</a> </li> <li>🛒 <a href="https://optixium.gumroad.com/l/dgkmaq" rel="noopener noreferrer">Product Card Kit — $19</a> </li> <li>💎 <a href="https://optixium.gumroad.com/l/fttmt" rel="noopener noreferrer">Pricing Plans — $16</a> </li> <li>💬 <a href="https://optixium.gumroad.com/l/wyqob" rel="noopener noreferrer">Chat Bubble UI — $22</a> </li> </ul> <p>Happy to answer any questions about the <br> implementation or Flutter patterns used!</p> flutter dart mobile opensource