Flutter Web SEO: Limitations, Hard Truths, and Practical Workarounds

Overview

Flutter is excellent for building rich, app-like experiences on the web. But when it comes to search, a few architectural realities make SEO harder than with traditional, HTML-first frameworks. This article explains the core limitations, why they exist, and—most importantly—the practical workarounds teams are using today to get indexed, ranked, and shared effectively.

Why SEO is harder for SPAs

Most Flutter web apps are Single-Page Applications (SPAs). SPAs ship a JavaScript bundle, bootstrap on the client, then render views dynamically. Search engines can execute JavaScript, but they do it in two passes (fetch + render), which can delay or miss content. Add in non-semantic rendering and heavy bundles, and you get crawlability and performance issues that translate into weaker organic visibility.

How Flutter renders the web (and why it matters)

Flutter offers two primary web renderers:

HTML renderer: Renders text and basic widgets into real DOM elements. Better for accessibility and SEO because crawlers can parse actual text nodes.
CanvasKit (Skia) renderer: Renders almost everything into a

Implication: For SEO-critical pages (landing pages, docs, marketing), the HTML renderer is generally the safer choice. CanvasKit can still work with semantics overlays, but coverage is inconsistent across crawlers and does not guarantee full indexation of dynamic content.

The big SEO limitations (and what to do about them)

1) Content that isn’t real HTML

Symptom: Pages look perfect to humans but bots see a sparse DOM or a large
Impact: Poor or partial indexing, missing keywords, and weak snippet generation.
Workarounds:
- Prefer the HTML renderer for SEO-facing routes. For CanvasKit-heavy apps, create separate, crawlable marketing pages using the HTML renderer or a conventional site generator, and deep-link into the Flutter app for authenticated flows.
- Ensure text semantics: Use Flutter’s semantics and alt text where possible; validate with an HTML inspection after build to confirm crawlable text exists on key pages.
- Hybrid architecture: Keep public pages (home, pricing, docs) in a traditional framework (Next.js, Astro, Hugo, etc.) and embed Flutter as an island/iframe for interactive sections.

2) Dynamic titles and meta tags

Symptom: All routes share the same and description from index.html.</li> <li>Impact: Duplicate titles and descriptions across URLs reduce relevance and CTR.</li> <li>Workarounds: <ul> <li>Update title and meta tags at runtime for each route. For Flutter web you can use dart:html:</li> </ul> </li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-dart" data-lang="dart">import 'dart:html' as html; void setSeoTags({required String title, required String description}) { html.document.title = title; final metaDesc = html.document.querySelector('meta[name="description"]'); if (metaDesc != null) { metaDesc.setAttribute('content', description); } else { final m = html.MetaElement() ..name = 'description' ..content = description; html.document.head?.append(m); } } </code></pre></div><ul> <li>For social previews (Open Graph/Twitter) and structured data (JSON-LD), client-only updates are unreliable for some scrapers. Prefer server-side or prerendered tags for shareable, public URLs.</li> </ul> <h3 id="3-routing-deep-links-and-http-status-codes">3) Routing, deep links, and HTTP status codes</h3> <ul> <li>Symptom: An SPA fallback returns index.html for unknown paths, causing 200 OK for not-found pages.</li> <li>Impact: Search engines see soft-404s and lose trust in your site quality.</li> <li>Workarounds: <ul> <li>Use path-based URLs (not hash) with Navigator 2.0/Routing packages.</li> <li>Configure the hosting layer to return: <ul> <li>200 for valid app routes.</li> <li>404 for truly missing resources.</li> <li>301/308 for canonical redirects (trailing slashes, http→https, www↔non-www).</li> </ul> </li> <li>Test with curl -I and site audit tools to verify correct status codes.</li> </ul> </li> </ul> <h3 id="4-performance-signals-lcp-cls-inp">4) Performance signals (LCP, CLS, INP)</h3> <ul> <li>Symptom: Large JS bundles, font loading, and heavy runtime rendering degrade Core Web Vitals.</li> <li>Impact: Lower rankings, especially on mobile.</li> <li>Workarounds: <ul> <li>Split builds and lazy-load heavy features where possible.</li> <li>Serve via a fast CDN with HTTP/2 or HTTP/3, enable compression (Brotli), and long-lived immutable caching for hashed assets.</li> <li>Preconnect to critical origins, and preload key fonts and hero images. Avoid layout shifts (CLS) by reserving image space and stabilizing UI during startup.</li> <li>Optimize images aggressively (AVIF/WebP), use responsive sizes, and defer offscreen media.</li> <li>Consider the HTML renderer on landing pages if it reduces script cost.</li> </ul> </li> </ul> <h3 id="5-social-share-cards-and-structured-data">5) Social share cards and structured data</h3> <ul> <li>Symptom: Shared links show wrong or missing images/titles because scrapers don’t execute your JS.</li> <li>Impact: Lower CTR from social and messaging apps.</li> <li>Workarounds: <ul> <li>Prerender or server-inject Open Graph and Twitter meta tags per route. Edge functions or serverless rewrites can look up route data and write tags into the HTML shell.</li> <li>Insert JSON-LD in index.html for stable, static entities (e.g., Organization). For route-specific entities (Product, Article, FAQ), generate tags server-side or via prerender.</li> </ul> </li> </ul> Example JSON-LD you can place statically in index.html (adjust values): <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Organization", "name": "Your Company", "url": "https://example.com", "logo": "https://example.com/logo.png" } </script> </code></pre></div><h3 id="6-sitemaps-and-internal-linking">6) Sitemaps and internal linking</h3> <ul> <li>Symptom: A single-page app with few hard links makes discovery hard.</li> <li>Impact: Slower coverage and stale index.</li> <li>Workarounds: <ul> <li>Maintain a static sitemap.xml that lists all public, indexable routes, lastmod dates, and canonical URLs. Automate it in CI.</li> <li>Create a crawlable HTML index page with normal <a href> links to key routes (not only programmatic navigation).</li> </ul> </li> </ul> Minimal sitemap example: <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-xml" data-lang="xml"><?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url> <loc>https://example.com/</loc> <lastmod>2026-03-10</lastmod> <changefreq>weekly</changefreq> </url> <url> <loc>https://example.com/pricing</loc> <lastmod>2026-03-10</lastmod> </url> </urlset> </code></pre></div><h3 id="7-robots-canonicalization-and-crawl-budget">7) Robots, canonicalization, and crawl budget</h3> <ul> <li>Symptom: Duplicate routes (with/without trailing slash, query params) or accidental blocking.</li> <li>Impact: Diluted signals and wasted crawl.</li> <li>Workarounds: <ul> <li>Set a canonical <link rel="canonical" href="..."> per route (prerender or edge-inject), and enforce redirects to a single URL shape.</li> <li>Provide a clean robots.txt. Example:</li> </ul> </li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-txt" data-lang="txt">User-agent: * Disallow: /assets/private/ Sitemap: https://example.com/sitemap.xml </code></pre></div><ul> <li>Use noindex where appropriate (staging, internal tools). Apply via <meta name="robots" content="noindex"> or X-Robots-Tag headers.</li> </ul> <h3 id="8-service-workers-and-crawlability">8) Service workers and crawlability</h3> <ul> <li>Symptom: An aggressive service worker caches index.html and assets, returning stale content or masking 404s.</li> <li>Impact: Search engines receive incorrect responses.</li> <li>Workarounds: <ul> <li>Audit your service worker to respect network errors and 404s.</li> <li>Bypass the SW for crawlers via header checks when possible, or keep the SW conservative for public routes.</li> <li>Version and purge caches on deploy.</li> </ul> </li> </ul> <h2 id="prerendering-your-pragmatic-ally">Prerendering: your pragmatic ally</h2> Because Flutter doesn’t offer first-party server-side rendering for web pages, prerendering is the most reliable strategy for SEO-critical routes. The idea: <ol> <li>A headless browser (CI or edge) loads your Flutter page.</li> <li>It waits for content-ready state (e.g., a custom JS event or specific DOM marker).</li> <li>It snapshots the final HTML, including route-specific <title>, meta, Open Graph, and JSON-LD.</li> <li>The static snapshot is served to crawlers and social bots; normal users still get the full Flutter app.</li> </ol> Implementation options: <ul> <li>Build-time prerender for a finite set of marketing pages.</li> <li>On-demand/edge prerender for dynamic slugs, with caching.</li> </ul> Caveats: <ul> <li>Ensure canonical URLs and 200/404 statuses are correct in the prerender output.</li> <li>Keep snapshots in sync with app releases and translations.</li> </ul> <h2 id="a-hybrid-architecture-that-ranks">A hybrid architecture that ranks</h2> For many teams, the winning pattern is: <ul> <li>Public site (marketing, docs, blog) built with an HTML-first framework. It handles SEO, sitemaps, structured data, and fast CWV.</li> <li>The Flutter app is loaded on authenticated or tool-like routes, or embedded as a component/iframe for interactive widgets on public pages.</li> <li>Shared design system ensures visual consistency.</li> </ul> This approach gives you the best of both worlds: top-tier SEO on public pages and the productivity/expressiveness of Flutter where it matters. <h2 id="practical-checklist">Practical checklist</h2> Use this as a deployment-ready pass before you hit “Go”: <ul> <li> Rendering <ul> <li><input disabled="" type="checkbox"> Use HTML renderer for SEO-facing pages, or hybridize with an HTML-first site.</li> <li><input disabled="" type="checkbox"> Verify crawlable text exists in the DOM for target keywords.</li> </ul> </li> <li> Metadata <ul> <li><input disabled="" type="checkbox"> Set per-route <title> and meta description in runtime; prerender for public routes.</li> <li><input disabled="" type="checkbox"> Provide Open Graph/Twitter tags and JSON-LD via server/edge-injected HTML.</li> </ul> </li> <li> URLs and Status Codes <ul> <li><input disabled="" type="checkbox"> Clean, readable paths; avoid hashes for public routes.</li> <li><input disabled="" type="checkbox"> 200 for valid pages, 404 for missing, 301/308 for canonical redirects.</li> </ul> </li> <li> Discovery <ul> <li><input disabled="" type="checkbox"> Maintain sitemap.xml and an HTML links index.</li> <li><input disabled="" type="checkbox"> Internal links use <a href> so crawlers can follow without JS.</li> </ul> </li> <li> Robots and Canonical <ul> <li><input disabled="" type="checkbox"> robots.txt allows important paths; use noindex where needed.</li> <li><input disabled="" type="checkbox"> Canonical tags per route; normalize URL variants.</li> </ul> </li> <li> Performance (CWV) <ul> <li><input disabled="" type="checkbox"> CDN + Brotli + HTTP/2/3, long-lived cache for hashed assets.</li> <li><input disabled="" type="checkbox"> Preload hero image/font; minimize main-thread work; optimize images.</li> </ul> </li> <li> Service Worker <ul> <li><input disabled="" type="checkbox"> Avoid serving stale HTML; respect 404s; version caches on deploy.</li> </ul> </li> </ul> <h2 id="example-route-aware-meta-updates-in-flutter">Example: route-aware meta updates in Flutter</h2> Hook into your router to set tags when a page becomes active: <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-dart" data-lang="dart">import 'dart:html' as html; class Seo { static void setTitle(String title) => html.document.title = title; static void setDescription(String description) { final el = html.document.querySelector('meta[name="description"]') as html.MetaElement?; if (el != null) { el.content = description; } else { final m = html.MetaElement() ..name = 'description' ..content = description; html.document.head?.append(m); } } } // Call this from your page widgets or route listeners void onRouteChange(String routeName) { switch (routeName) { case '/pricing': Seo.setTitle('Pricing | Example'); Seo.setDescription('Choose a plan that scales with your team.'); break; case '/features': Seo.setTitle('Features | Example'); Seo.setDescription('Explore the core capabilities built into Example.'); break; default: Seo.setTitle('Example'); Seo.setDescription('Build remarkable web apps with Flutter.'); } } </code></pre></div>Note: For public/marketing routes, still prerender or server-inject OG/Twitter tags so social scrapers read the correct preview without executing JS. <h2 id="when-to-accept-the-trade-off">When to accept the trade-off</h2> If your product is primarily an authenticated app (dashboards, tools), organic discovery of deep internal routes isn’t critical. In that case, focus on a great marketing site (HTML-first) and keep the Flutter app fast and accessible behind login. If your business depends on organic acquisition to content-driven pages, do not rely solely on a CanvasKit-rendered SPA for those pages. <h2 id="conclusion">Conclusion</h2> Flutter web can succeed in search, but not by accident. Recognize the constraints—client-side rendering, canvas-heavy output, and dynamic metadata—and address them with the right mix of rendering choice, prerendering, server-side tag injection, clean routing, and performance discipline. Use hybrid architecture where it makes sense. With this playbook, you can deliver the delightful UI Flutter enables without sacrificing discoverability, rankings, or shareability. </div> <div class="mt-12 pt-8 border-t border-gray-200"> <h3 class="text-sm font-semibold uppercase tracking-wider text-gray-500 mb-4">Tags</h3> <div class="flex flex-wrap gap-2"> <a href="/tags/flutter" class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-full hover:bg-primary-50 hover:text-primary-600 transition-colors"> Flutter </a> <a href="/tags/flutter-web" class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-full hover:bg-primary-50 hover:text-primary-600 transition-colors"> Flutter Web </a> <a href="/tags/seo" class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-full hover:bg-primary-50 hover:text-primary-600 transition-colors"> SEO </a> <a href="/tags/single-page-application" class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-full hover:bg-primary-50 hover:text-primary-600 transition-colors"> Single-Page Application </a> <a href="/tags/rendering" class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-full hover:bg-primary-50 hover:text-primary-600 transition-colors"> Rendering </a> <a href="/tags/prerendering" class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-full hover:bg-primary-50 hover:text-primary-600 transition-colors"> Prerendering </a> <a href="/tags/sitemaps" class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-full hover:bg-primary-50 hover:text-primary-600 transition-colors"> Sitemaps </a> <a href="/tags/core-web-vitals" class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-full hover:bg-primary-50 hover:text-primary-600 transition-colors"> Core Web Vitals </a> </div> </div> </div> <aside class="lg:w-1/3"> <div class="sticky top-24 space-y-8"> <div class="bg-white rounded-lg shadow-md p-6"> <h3 class="text-lg font-bold text-gray-900 mb-4"> Categories </h3> <ul class="space-y-2"> <li> <a href="/categories/ai/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> AI 19 </a> </li> <li> <a href="/categories/ai-development/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> AI Development 2 </a> </li> <li> <a href="/categories/ai-engineering/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> AI Engineering 5 </a> </li> <li> <a href="/categories/ai/ml/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> AI/ML 4 </a> </li> <li> <a href="/categories/android/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Android 1 </a> </li> <li> <a href="/categories/api-design/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> API Design 1 </a> </li> <li> <a href="/categories/api-development/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> API Development 1 </a> </li> <li> <a href="/categories/api-integration/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> API Integration 1 </a> </li> <li> <a href="/categories/apis/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> APIs 19 </a> </li> <li> <a href="/categories/apple/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Apple 8 </a> </li> <li> <a href="/categories/apple-news/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Apple News 1 </a> </li> <li> <a href="/categories/apps/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Apps 2 </a> </li> <li> <a href="/categories/architecture/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Architecture 1 </a> </li> <li> <a href="/categories/artificial-intelligence/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Artificial Intelligence 3 </a> </li> <li> <a href="/categories/aws/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> AWS 1 </a> </li> <li> <a href="/categories/backend-development/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Backend Development 3 </a> </li> <li> <a href="/categories/backend-engineering/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Backend Engineering 1 </a> </li> <li> <a href="/categories/barcodes/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Barcodes 1 </a> </li> <li> <a href="/categories/beta-testing/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Beta Testing 1 </a> </li> <li> <a href="/categories/business/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Business 10 </a> </li> <li> <a href="/categories/buying-guides/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Buying Guides 1 </a> </li> <li> <a href="/categories/cloud-infrastructure/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Cloud Infrastructure 1 </a> </li> <li> <a href="/categories/comparison/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Comparison 2 </a> </li> <li> <a href="/categories/consumer-affairs/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Consumer Affairs 1 </a> </li> <li> <a href="/categories/content-moderation/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Content Moderation 2 </a> </li> <li> <a href="/categories/conversational-ai/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Conversational AI 1 </a> </li> <li> <a href="/categories/cross-platform/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Cross-Platform 4 </a> </li> <li> <a href="/categories/cybersecurity/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Cybersecurity 1 </a> </li> <li> <a href="/categories/data/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Data 3 </a> </li> <li> <a href="/categories/databases/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Databases 1 </a> </li> <li> <a href="/categories/deals/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Deals 1 </a> </li> <li> <a href="/categories/defense/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Defense 1 </a> </li> <li> <a href="/categories/developer/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Developer 1 </a> </li> <li> <a href="/categories/developer-guides/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Developer Guides 2 </a> </li> <li> <a href="/categories/development/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Development 1 </a> </li> <li> <a href="/categories/documentation/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Documentation 1 </a> </li> <li> <a href="/categories/email/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Email 1 </a> </li> <li> <a href="/categories/engineering/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Engineering 1 </a> </li> <li> <a href="/categories/entertainment/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Entertainment 3 </a> </li> <li> <a href="/categories/entertainment-news/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Entertainment News 1 </a> </li> <li> <a href="/categories/esports/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Esports 1 </a> </li> <li> <a href="/categories/ethics/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Ethics 1 </a> </li> <li> <a href="/categories/firebase/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Firebase 1 </a> </li> <li> <a href="/categories/flutter/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Flutter 13 </a> </li> <li> <a href="/categories/frameworks/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Frameworks 1 </a> </li> <li> <a href="/categories/frontend-development/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Frontend Development 3 </a> </li> <li> <a href="/categories/frontend-engineering/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Frontend Engineering 1 </a> </li> <li> <a href="/categories/gaming/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Gaming 24 </a> </li> <li> <a href="/categories/gaming-industry/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Gaming Industry 1 </a> </li> <li> <a href="/categories/gaming-news/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Gaming News 2 </a> </li> <li> <a href="/categories/genai/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> GenAI 3 </a> </li> <li> <a href="/categories/generative-ai/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Generative AI 1 </a> </li> <li> <a href="/categories/hardware/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Hardware 1 </a> </li> <li> <a href="/categories/how-to/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> How-To 1 </a> </li> <li> <a href="/categories/identity--access-management/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Identity & Access Management 1 </a> </li> <li> <a href="/categories/investing/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Investing 1 </a> </li> <li> <a href="/categories/ios/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> IOS 1 </a> </li> <li> <a href="/categories/javascript/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> JavaScript 1 </a> </li> <li> <a href="/categories/laptops/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Laptops 6 </a> </li> <li> <a href="/categories/leadership/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Leadership 1 </a> </li> <li> <a href="/categories/legal/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Legal 1 </a> </li> <li> <a href="/categories/machine-learning/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Machine Learning 1 </a> </li> <li> <a href="/categories/markets/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Markets 1 </a> </li> <li> <a href="/categories/microservices/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Microservices 2 </a> </li> <li> <a href="/categories/microsoft/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Microsoft 1 </a> </li> <li> <a href="/categories/migration/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Migration 1 </a> </li> <li> <a href="/categories/mobile/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Mobile 7 </a> </li> <li> <a href="/categories/mobile-development/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Mobile Development 17 </a> </li> <li> <a href="/categories/mobile-os/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Mobile OS 2 </a> </li> <li> <a href="/categories/mobiles/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Mobiles 1 </a> </li> <li> <a href="/categories/networking/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Networking 1 </a> </li> <li> <a href="/categories/news/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> News 33 </a> </li> <li> <a href="/categories/nintendo/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Nintendo 3 </a> </li> <li> <a href="/categories/nlp/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> NLP 1 </a> </li> <li> <a href="/categories/outages/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Outages 1 </a> </li> <li> <a href="/categories/performance/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Performance 3 </a> </li> <li> <a href="/categories/performance-engineering/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Performance Engineering 1 </a> </li> <li> <a href="/categories/playstation/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> PlayStation 3 </a> </li> <li> <a href="/categories/previews/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Previews 1 </a> </li> <li> <a href="/categories/privacy/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Privacy 2 </a> </li> <li> <a href="/categories/product/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Product 1 </a> </li> <li> <a href="/categories/product-launch/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Product Launch 3 </a> </li> <li> <a href="/categories/programming/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Programming 1 </a> </li> <li> <a href="/categories/prompt-engineering/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Prompt Engineering 1 </a> </li> <li> <a href="/categories/react/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> React 10 </a> </li> <li> <a href="/categories/regulation/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Regulation 1 </a> </li> <li> <a href="/categories/security/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Security 2 </a> </li> <li> <a href="/categories/semiconductors/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Semiconductors 1 </a> </li> <li> <a href="/categories/seo/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> SEO 2 </a> </li> <li> <a href="/categories/smart-home/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Smart Home 2 </a> </li> <li> <a href="/categories/smartphones/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Smartphones 3 </a> </li> <li> <a href="/categories/social-media/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Social Media 2 </a> </li> <li> <a href="/categories/software-architecture/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Software Architecture 1 </a> </li> <li> <a href="/categories/software-development/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Software Development 2 </a> </li> <li> <a href="/categories/software-engineering/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Software Engineering 2 </a> </li> <li> <a href="/categories/software-testing/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Software Testing 1 </a> </li> <li> <a href="/categories/standards/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Standards 1 </a> </li> <li> <a href="/categories/streaming/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Streaming 2 </a> </li> <li> <a href="/categories/tech/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Tech 2 </a> </li> <li> <a href="/categories/tech-industry/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Tech Industry 1 </a> </li> <li> <a href="/categories/tech-news/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Tech News 2 </a> </li> <li> <a href="/categories/technology/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Technology 50 </a> </li> <li> <a href="/categories/telecom/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Telecom 2 </a> </li> <li> <a href="/categories/telecommunications/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Telecommunications 2 </a> </li> <li> <a href="/categories/tools/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Tools 3 </a> </li> <li> <a href="/categories/transportation-policy/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Transportation Policy 1 </a> </li> <li> <a href="/categories/trucking-compliance/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Trucking Compliance 1 </a> </li> <li> <a href="/categories/tutorial/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Tutorial 2 </a> </li> <li> <a href="/categories/tutorials/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Tutorials 2 </a> </li> <li> <a href="/categories/video-games/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Video Games 1 </a> </li> <li> <a href="/categories/voice-technology/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Voice Technology 1 </a> </li> <li> <a href="/categories/web/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Web 1 </a> </li> <li> <a href="/categories/web-development/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Web Development 10 </a> </li> <li> <a href="/categories/web-technology/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Web Technology 1 </a> </li> <li> <a href="/categories/xbox/" class="flex items-center justify-between text-gray-600 hover:text-primary-600 transition-colors"> Xbox 1 </a> </li> </ul> </div> <div class="bg-white rounded-lg shadow-md p-6"> <h3 class="text-lg font-bold text-gray-900 mb-4"> Popular Tags </h3> <div class="flex flex-wrap gap-2"> <a href="/tags/flutter/" class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-full hover:bg-primary-50 hover:text-primary-600 transition-colors"> Flutter </a> <a href="/tags/api/" class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-full hover:bg-primary-50 hover:text-primary-600 transition-colors"> API </a> <a href="/tags/dart/" class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-full hover:bg-primary-50 hover:text-primary-600 transition-colors"> Dart </a> <a href="/tags/apple/" class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-full hover:bg-primary-50 hover:text-primary-600 transition-colors"> Apple </a> <a href="/tags/security/" class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-full hover:bg-primary-50 hover:text-primary-600 transition-colors"> Security </a> <a href="/tags/ai/" class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-full hover:bg-primary-50 hover:text-primary-600 transition-colors"> Ai </a> <a href="/tags/react/" class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-full hover:bg-primary-50 hover:text-primary-600 transition-colors"> React </a> <a href="/tags/android/" class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-full hover:bg-primary-50 hover:text-primary-600 transition-colors"> Android </a> <a href="/tags/performance/" class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-full hover:bg-primary-50 hover:text-primary-600 transition-colors"> Performance </a> <a href="/tags/rapidapi/" class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-full hover:bg-primary-50 hover:text-primary-600 transition-colors"> RapidAPI </a> <a href="/tags/frontend/" class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-full hover:bg-primary-50 hover:text-primary-600 transition-colors"> Frontend </a> <a href="/tags/ios/" class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-full hover:bg-primary-50 hover:text-primary-600 transition-colors"> IOS </a> <a href="/tags/nintendo-switch-online/" class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-full hover:bg-primary-50 hover:text-primary-600 transition-colors"> Nintendo Switch Online </a> <a href="/tags/asoasis/" class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-full hover:bg-primary-50 hover:text-primary-600 transition-colors"> ASOasis </a> <a href="/tags/observability/" class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-full hover:bg-primary-50 hover:text-primary-600 transition-colors"> Observability </a> <a href="/tags/openai/" class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-full hover:bg-primary-50 hover:text-primary-600 transition-colors"> OpenAI </a> <a href="/tags/prompt-engineering/" class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-full hover:bg-primary-50 hover:text-primary-600 transition-colors"> Prompt-Engineering </a> <a href="/tags/tutorial/" class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-full hover:bg-primary-50 hover:text-primary-600 transition-colors"> Tutorial </a> <a href="/tags/apple-intelligence/" class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-full hover:bg-primary-50 hover:text-primary-600 transition-colors"> Apple Intelligence </a> <a href="/tags/best-practices/" class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-full hover:bg-primary-50 hover:text-primary-600 transition-colors"> Best Practices </a> </div> </div> </div> </aside> </div> <div class="mt-16"> <h2 class="text-2xl font-heading font-bold text-gray-900 mb-8">Related Posts</h2> <div class="grid gap-8 md:grid-cols-3"> <article class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300"> <a href="/articles/2026-03-13-2055-flutter-animation-controller-advanced-techniques/" class="block aspect-video overflow-hidden"> <img src="/images/articles/2026-03-13-2055-flutter-animation-controller-advanced-techniques-1.webp" alt="Mastering Flutter AnimationController: Advanced Techniques, Patterns, and Performance" class="object-cover w-full h-full transform hover:scale-105 transition-transform duration-300" loading="lazy"> </a> <div class="p-6"> <div class="mb-4"> <a href="/categories/mobile-development" class="inline-block px-3 py-1 text-sm font-medium text-primary-600 bg-primary-50 rounded-full hover:bg-primary-100"> Mobile Development </a> </div> <h2 class="text-2xl font-bold mb-3 hover:text-primary-600 transition-colors duration-200"> <a href="/articles/2026-03-13-2055-flutter-animation-controller-advanced-techniques/">Mastering Flutter AnimationController: Advanced Techniques, Patterns, and Performance</a> </h2> Advanced Flutter AnimationController techniques: staging, physics, scroll/gesture-driven motion, lifecycle, performance, and testing with code. <div class="flex items-center justify-between text-sm text-gray-500 mb-4"> <div class="flex items-center"> <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/> </svg> ASOasis </div> <div class="flex items-center"> <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/> </svg> <time datetime="2026-03-13"> Mar 13, 2026 </time> </div> </div> <div class="flex justify-between items-center"> <a href="/articles/2026-03-13-2055-flutter-animation-controller-advanced-techniques/" class="inline-flex items-center text-primary-600 hover:text-primary-700 font-medium"> Read More <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/> </svg> </a> <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/> </svg> 7 min </div> </div> </article> <article class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300"> <a href="/articles/2026-03-12-2054-flutter-go-router-navigation-guide/" class="block aspect-video overflow-hidden"> <img src="/images/articles/2026-03-12-2054-flutter-go-router-navigation-guide-1.webp" alt="Flutter go_router Navigation Guide: From Basics to Advanced Patterns" class="object-cover w-full h-full transform hover:scale-105 transition-transform duration-300" loading="lazy"> </a> <div class="p-6"> <div class="mb-4"> <a href="/categories/flutter" class="inline-block px-3 py-1 text-sm font-medium text-primary-600 bg-primary-50 rounded-full hover:bg-primary-100"> Flutter </a> </div> <h2 class="text-2xl font-bold mb-3 hover:text-primary-600 transition-colors duration-200"> <a href="/articles/2026-03-12-2054-flutter-go-router-navigation-guide/">Flutter go_router Navigation Guide: From Basics to Advanced Patterns</a> </h2> A practical guide to Flutter’s go_router: setup, parameters, guards, nested tabs, deep links, transitions, and testing with concise, production-ready code. <div class="flex items-center justify-between text-sm text-gray-500 mb-4"> <div class="flex items-center"> <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/> </svg> ASOasis </div> <div class="flex items-center"> <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/> </svg> <time datetime="2026-03-12"> Mar 12, 2026 </time> </div> </div> <div class="flex justify-between items-center"> <a href="/articles/2026-03-12-2054-flutter-go-router-navigation-guide/" class="inline-flex items-center text-primary-600 hover:text-primary-700 font-medium"> Read More <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/> </svg> </a> <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/> </svg> 7 min </div> </div> </article> <article class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300"> <a href="/articles/2026-03-11-2053-flutter-bloc-pattern-clean-architecture/" class="block aspect-video overflow-hidden"> <img src="/images/articles/2026-03-11-2053-flutter-bloc-pattern-clean-architecture-1.webp" alt="Flutter BLoC + Clean Architecture: A Practical Guide with Patterns and Code" class="object-cover w-full h-full transform hover:scale-105 transition-transform duration-300" loading="lazy"> </a> <div class="p-6"> <div class="mb-4"> <a href="/categories/mobile-development" class="inline-block px-3 py-1 text-sm font-medium text-primary-600 bg-primary-50 rounded-full hover:bg-primary-100"> Mobile Development </a> </div> <h2 class="text-2xl font-bold mb-3 hover:text-primary-600 transition-colors duration-200"> <a href="/articles/2026-03-11-2053-flutter-bloc-pattern-clean-architecture/">Flutter BLoC + Clean Architecture: A Practical Guide with Patterns and Code</a> </h2> A practical, end-to-end guide to combining Flutter’s BLoC pattern with Clean Architecture using code, structure, DI, and testing tips. <div class="flex items-center justify-between text-sm text-gray-500 mb-4"> <div class="flex items-center"> <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/> </svg> ASOasis </div> <div class="flex items-center"> <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/> </svg> <time datetime="2026-03-11"> Mar 11, 2026 </time> </div> </div> <div class="flex justify-between items-center"> <a href="/articles/2026-03-11-2053-flutter-bloc-pattern-clean-architecture/" class="inline-flex items-center text-primary-600 hover:text-primary-700 font-medium"> Read More <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/> </svg> </a> <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/> </svg> 7 min </div> </div> </article> </div> </div> </div> </article> </div> <footer class="relative bg-gradient-to-br from-slate-50 via-white to-slate-50 text-slate-900 overflow-hidden p-10"> <div class="absolute inset-0 overflow-hidden"> <div class="absolute -top-24 -left-24 h-72 w-72 rounded-full bg-blue-200/25 blur-3xl animate-pulse"></div> <div class="absolute -bottom-32 -right-16 h-80 w-80 rounded-full bg-purple-200/25 blur-3xl animate-pulse" style="animation-delay: 1.5s"></div> <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-96 w-96 rounded-full bg-cyan-200/20 blur-3xl animate-pulse" style="animation-delay: 2.2s"></div> <div class="absolute inset-0 bg-[linear-gradient(rgba(0,0,0,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(0,0,0,0.02)_1px,transparent_1px)] bg-[size:50px_50px]"></div> <div class="absolute top-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-blue-300/50 to-transparent"></div> </div> <div class="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> <div class="py-20"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-8"> <div class="lg:col-span-4 space-y-6"> <div class="flex items-center gap-4"> <div class="relative flex h-16 w-16 items-center justify-center rounded-2xl"> <img src="/images/logo.png" alt="ASOasis - All about Tech" class="h-10 w-10 md:h-12 md:w-12 rounded-lg object-contain"> </div> <div> <div class="text-3xl font-black text-slate-900 tracking-tight">ASOasis</div> <div class="text-sm font-semibold text-blue-600">Build. Launch. Scale.</div> </div> </div> <div class="relative rounded-2xl border border-blue-100/80 bg-white/80 p-6 backdrop-blur-sm shadow-lg"> Building the future of digital experiences. We craft exceptional apps, scalable SaaS solutions, and powerful APIs that drive business growth and innovation. </div> <div class="space-y-4"> <h4 class="text-sm font-semibold text-slate-600 uppercase tracking-wider">Follow Us</h4> <div class="flex gap-3"> <a href="https://github.com/ASOasis-Tech" target="_blank" rel="noopener noreferrer" class="flex h-12 w-12 items-center justify-center rounded-xl bg-white border border-blue-100 text-slate-600 shadow-sm transition-all duration-300 hover:text-gray-800 hover:bg-gray-100 hover:border-gray-300 hover:scale-110 hover:-translate-y-1"> <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/> </svg> </a> <a href="https://www.linkedin.com/company/asoasis/posts/?feedView=all" target="_blank" rel="noopener noreferrer" class="flex h-12 w-12 items-center justify-center rounded-xl bg-white border border-blue-100 text-slate-600 shadow-sm transition-all duration-300 hover:text-blue-600 hover:bg-blue-50 hover:border-blue-200 hover:scale-110 hover:-translate-y-1"> <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/> </svg> </a> </div> </div> </div> <div class="lg:col-span-8"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 pb-6"> <div class="group relative rounded-2xl border border-blue-100/70 bg-white/70 p-6 backdrop-blur-sm shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1"> <div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity bg-gradient-to-br from-blue-100/30 via-cyan-100/20 to-purple-100/30"></div> <div class="relative z-10"> <h3 class="font-bold text-slate-900 mb-6 capitalize tracking-tight flex items-center gap-3"> Services </h3> <ul class="space-y-4"> <li> <a href="/services/technologies/app-development" class="group/link text-slate-600 hover:text-blue-700 transition-colors"> App Development </a> </li> <li> <a href="/services/technologies/web-development" class="group/link text-slate-600 hover:text-blue-700 transition-colors"> Web Development </a> </li> <li> <a href="/services" class="group/link text-slate-600 hover:text-blue-700 transition-colors"> All Services </a> </li> </ul> </div> </div> <div class="group relative rounded-2xl border border-blue-100/70 bg-white/70 p-6 backdrop-blur-sm shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1"> <div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity bg-gradient-to-br from-blue-100/30 via-cyan-100/20 to-purple-100/30"></div> <div class="relative z-10"> <h3 class="font-bold text-slate-900 mb-6 capitalize tracking-tight flex items-center gap-3"> Products </h3> <ul class="space-y-4"> <li> <a href="/apps" class="group/link text-slate-600 hover:text-blue-700 transition-colors"> Apps </a> </li> <li> <a href="/saas" class="group/link text-slate-600 hover:text-blue-700 transition-colors"> SaaS </a> </li> <li> <a href="/apis" class="group/link text-slate-600 hover:text-blue-700 transition-colors"> APIs </a> </li> </ul> </div> </div> <div class="group relative rounded-2xl border border-blue-100/70 bg-white/70 p-6 backdrop-blur-sm shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1"> <div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity bg-gradient-to-br from-blue-100/30 via-cyan-100/20 to-purple-100/30"></div> <div class="relative z-10"> <h3 class="font-bold text-slate-900 mb-6 capitalize tracking-tight flex items-center gap-3"> Company </h3> <ul class="space-y-4"> <li> <a href="/contact" class="group/link text-slate-600 hover:text-blue-700 transition-colors"> Contact </a> </li> </ul> </div> </div> <div class="group relative rounded-2xl border border-blue-100/70 bg-white/70 p-6 backdrop-blur-sm shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1"> <div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity bg-gradient-to-br from-blue-100/30 via-cyan-100/20 to-purple-100/30"></div> <div class="relative z-10"> <h3 class="font-bold text-slate-900 mb-6 capitalize tracking-tight flex items-center gap-3"> Legal </h3> <ul class="space-y-4"> <li> <a href="/privacy-policy" class="group/link text-slate-600 hover:text-blue-700 transition-colors"> Privacy Policy </a> </li> <li> <a href="/terms" class="group/link text-slate-600 hover:text-blue-700 transition-colors"> Terms of Service </a> </li> <li> <a href="/security" class="group/link text-slate-600 hover:text-blue-700 transition-colors"> Security </a> </li> <li> <a href="/shipping" class="group/link text-slate-600 hover:text-blue-700 transition-colors"> Shipping </a> </li> <li> <a href="/cancellation" class="group/link text-slate-600 hover:text-blue-700 transition-colors"> Cancellation </a> </li> </ul> </div> </div> </div> </div> </div> </div> <div class="py-8 border-t border-blue-100"> <div class="flex flex-col sm:flex-row items-center justify-between gap-6"> <div class="flex items-center gap-3 text-slate-600"> © 2026 ASOasis Crafted with <svg class="h-5 w-5 text-red-500 animate-pulse" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"> <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/> </svg> • <a href="mailto:support@asoasis.tech" class="text-slate-600 hover:text-blue-700 transition-colors">support@asoasis.tech</a> </div> <div class="flex items-center gap-6 text-sm"> <a href="/privacy-policy" class="text-slate-600 hover:text-blue-700 transition-colors">Privacy Policy</a> <a href="/terms" class="text-slate-600 hover:text-blue-700 transition-colors">Terms of Service</a> <a href="/security" class="text-slate-600 hover:text-blue-700 transition-colors">Security</a> </div> </div> </div> </div> <button id="scroll-to-top" class="fixed bottom-8 right-8 z-50 hidden items-center justify-center h-14 w-14 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-500 text-white shadow-2xl transition-all duration-300 hover:scale-110 border border-white/20" aria-label="Scroll to top"> <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" d="m5 12 7-7 7 7"/> <path stroke-linecap="round" stroke-linejoin="round" d="M12 19V5"/> </svg> </button> </footer> <script> const mobileMenuButton = document.getElementById('mobile-menu-button'); const mobileMenu = document.getElementById('mobile-menu'); const menuIconOpen = document.getElementById('menu-icon-open'); const menuIconClose = document.getElementById('menu-icon-close'); if (mobileMenuButton && mobileMenu) { mobileMenuButton.addEventListener('click', function() { mobileMenu.classList.toggle('hidden'); menuIconOpen.classList.toggle('hidden'); menuIconClose.classList.toggle('hidden'); }); } document.querySelectorAll('.mobile-dropdown-toggle').forEach(function(button) { button.addEventListener('click', function() { var target = document.getElementById(this.getAttribute('data-target')); var chevron = this.querySelector('svg'); if (target) { target.classList.toggle('hidden'); if (chevron) chevron.classList.toggle('rotate-180'); } }); }); var scrollToTopBtn = document.getElementById('scroll-to-top'); if (scrollToTopBtn) { window.addEventListener('scroll', function() { if (window.scrollY > 500) { scrollToTopBtn.classList.remove('hidden'); scrollToTopBtn.classList.add('flex'); } else { scrollToTopBtn.classList.add('hidden'); scrollToTopBtn.classList.remove('flex'); } }); scrollToTopBtn.addEventListener('click', function() { window.scrollTo({ top: 0, behavior: 'smooth' }); }); } </script> </body> </html>