<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8"/>
    <title>Animation and motion widgets</title>
    <meta property="og:title" content="Animation and motion widgets"/>
    <meta name="description" content="A catalog of Flutter's animation and motion widgets. Bring animations to your app."/>
    <meta property="og:description" content="A catalog of Flutter's animation and motion widgets. Bring animations to your app."/>
    <link sizes="64x64" href="/assets/images/branding/flutter/icon/64.png" rel="icon"/>
    <link href="/assets/images/branding/flutter/logo/flutter-logomark-320px.png" rel="apple-touch-icon"/>
    <meta name="twitter:card" content="summary"/>
    <meta name="twitter:site" content="@flutterdev"/>
    <meta name="twitter:title" content="Animation and motion widgets"/>
    <meta name="twitter:description" content="A catalog of Flutter's animation and motion widgets. Bring animations to your app."/>
    <meta property="og:title" content="Animation and motion widgets"/>
    <meta property="og:description" content="A catalog of Flutter's animation and motion widgets. Bring animations to your app."/>
    <meta property="og:url" content="ui/widgets/animation.md"/>
    <meta property="og:image" content="/assets/images/flutter-logo-sharing.png"/>
    <link href="https://fonts.googleapis.com" rel="preconnect"/>
    <link crossorigin href="https://fonts.gstatic.com" rel="preconnect"/>
    <link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&amp;display=swap" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css2?family=Google+Sans+Mono:wght@400;500;700&amp;display=swap" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css2?family=Google+Sans+Text:wght@400;500;700&amp;display=swap" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0..1,0" rel="stylesheet"/>
    <link href="/assets/css/main.css?hash=6WaEsj10Hm8P" rel="stylesheet"/>
    <script type="module" integrity="sha256-Jy0j0fUMJ2T3WxSEs2WjHLrS+3DlO7S9DItQtP55FII=" crossorigin="anonymous" referrerpolicy="no-referrer" src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@1.8.2/lite-youtube.js"></script>
    <meta name="google-site-verification" content="HFqxhSbf9YA_0rBglNLzDiWnrHiK_w4cqDh2YD2GEY4">
    <script>
      window.dataLayer = window.dataLayer || [];
    </script>
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-ND4LWWZ');</script>
    
    <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    
    ga('create', 'UA-67589403-1', 'auto');
    ga('send', 'pageview');
    </script>
    
    <script type="speculationrules">{"prefetch":[{"where":{"href_matches":"/*"},"eagerness":"moderate"}],"prerender":[{"where":{"and":[{"href_matches":"/*"},{"not":{"selector_matches":".no-prerender"}}]},"eagerness":"conservative"}]}</script>
    <!--$-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <!--/-->
    <script src="/main.client.dart.js" defer></script>
    <style>
      .file-tree {
        display: block;
        padding: 1rem;
        color: var(--file-tree-text);
        font-size: 0.8125rem;
        line-height: 1.375rem;
        background-color: var(--file-tree-bg);
      }
      .file-tree ul {
        padding-left: 0.125rem;
        margin-left: 0.5rem;
        border-left-style: solid;
        border-left-color: var(--file-tree-icon);
        border-left-width: 1px;
        list-style-type: none;
      }
      .file-tree > ul {
        padding: 0;
        margin: 0;
        border: none;
      }
      .file-tree li {
        margin-top: 0.125rem;
        margin-bottom: 0.125rem;
      }
      .file-tree li.file {
        display: flex;
        margin-left: 1.25rem;
      }
      .file-tree li svg {
        display: inline;
        width: 0.875rem;
        height: 0.875rem;
        margin-left: 0.25rem;
        margin-right: 0.375rem;
        color: var(--file-tree-icon);
        vertical-align: middle;
      }
      .file-tree li.directory > details {
        padding-left: 1.5rem;
        border: none;
        background-color: transparent;
      }
      .file-tree li.directory > details > summary {
        max-width: 100%;
        padding-left: 0.625rem;
        padding-right: 0.625rem;
        margin-left: -1.5rem;
        margin-bottom: 0;
      }
      .file-tree li.directory > details > summary::marker {
        color: var(--file-tree-icon);
      }
      .file-tree li.directory > details > summary:hover {
        cursor: pointer;
        color: var(--file-tree-highlight);
      }
      .file-tree li.directory > details > summary:hover svg {
        color: var(--file-tree-highlight);
      }
      .file-tree li.directory > details > summary:hover .tree-entry-name[data-highlighted] svg {
        color: var(--file-tree-bg);
      }
      .file-tree li.directory > details > summary:hover ~ul {
        border-left-style: solid;
        border-left-color: var(--file-tree-highlight);
      }
      .file-tree .tree-entry {
        display: inline-flex;
        align-items: start;
        gap: 0.5rem;
        vertical-align: middle;
      }
      .file-tree .tree-entry .tree-entry-name {
        display: inline-flex;
        align-items: center;
      }
      .file-tree .tree-entry .tree-entry-name[data-highlighted] {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
        border-radius: 0.25rem;
        align-items: center;
        color: var(--file-tree-bg);
        background-color: var(--file-tree-highlight);
      }
      .file-tree .tree-entry .tree-entry-name[data-highlighted] svg {
        color: var(--file-tree-bg);
      }
      .file-tree .tree-entry .tree-entry-name[data-placeholder] {
        color: var(--file-tree-icon);
      }
      .file-tree .tree-entry .comment {
        padding-left: 1.5rem;
        color: var(--file-tree-icon);
        font-style: italic;
      }
    </style>
  </head>
  <body data-toc="false">
    <script>
    try {
      const storedTheme = window.localStorage.getItem('theme') ?? 'light-mode';
      if (storedTheme === 'auto-mode') {
        const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)');
        document.body.classList.add(
            'auto-mode',
            prefersDarkMode.matches ? 'dark-mode' : 'light-mode',
        );
      } else {
        document.body.classList.add(storedTheme);
      }
    } catch (e) {
      // localStorage is not available, do nothing and fall back to default.
    }
    </script>
          
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-ND4LWWZ" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <a id="skip-to-main" class="filled-button" href="#site-content-title">Skip to main content</a>
    <!--@cookie_notice-->
    <section id="cookie-notice" data-nosnippet="true">
      <div class="container">
        <p>
          docs.flutter.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic.
        </p>
        <div class="button-group">
          <a class="text-button" target="_blank" rel="noopener" href="https://policies.google.com/technologies/cookies">Learn more</a>
          <button class="filled-button">OK, got it</button>
        </div>
      </div>
    </section>
    <!--/@cookie_notice-->
    <header id="site-header">
      <nav class="navbar">
        <a id="site-primary-logo" class="site-wordmark" aria-label="Go to the Flutter docs homepage." title="Go to the Flutter docs homepage." href="/">
          <img width="28" alt="Flutter logo" src="/assets/images/branding/flutter/logo/default.svg"/>
          <span class="name" translate="no">Flutter</span>
          <span class="subtype">Docs</span>
        </a>
        <ul class="nav-items">
          <li><a class="nav-link text-button active" href="/">Guides</a></li>
          <li><a class="nav-link text-button" href="/learn/pathway">Learn</a></li>
          <li><a class="nav-link text-button" href="/ai/create-with-ai">AI</a></li>
          <li>
            <a class="nav-link text-button" target="_blank" rel="noopener" href="https://api.flutter.dev">Reference</a>
          </li>
        </ul>
        <div class="navbar-contents">
          <form id="header-search" action="/search/">
            <input id="q" class="search-field" autocomplete="off" placeholder="Search" aria-label="Search" type="search" name="q"/>
          </form>
          <a id="fallback-search-button" class="icon-button" aria-label="Navigate to the docs.flutter.dev search page." title="Navigate to the docs.flutter.dev search page." href="/search"><span class="material-symbols" aria-hidden="true" translate="no">search</span></a>
          <!--@theme_switcher-->
          <div id="theme-switcher" class="dropdown" data-expanded="false">
            <button class="dropdown-button text-button icon-button" aria-controls="theme-switcher-content" aria-expanded="false" title="Select a theme."><span class="material-symbols" aria-hidden="true" translate="no">routine</span></button>
            <div id="theme-switcher-content" class="dropdown-content">
              <div class="dropdown-menu">
                <ul role="listbox">
                  <li>
                    <button title="Switch to the light theme." aria-label="Switch to the light theme." aria-selected="true"><span class="material-symbols" aria-hidden="true" translate="no">light_mode</span><span>Light</span></button>
                  </li>
                  <li>
                    <button title="Switch to the dark theme." aria-label="Switch to the dark theme." aria-selected="false"><span class="material-symbols" aria-hidden="true" translate="no">dark_mode</span><span>Dark</span></button>
                  </li>
                  <li>
                    <button title="Match theme to device theme." aria-label="Match theme to device theme." aria-selected="false"><span class="material-symbols" aria-hidden="true" translate="no">night_sight_auto</span><span>Automatic</span></button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!--/@theme_switcher-->
          <!--@site_switcher-->
          <div id="site-switcher" class="dropdown" data-expanded="false">
            <button class="dropdown-button text-button icon-button" aria-controls="site-switcher-content" aria-expanded="false" title="Visit related sites."><span class="material-symbols" aria-hidden="true" translate="no">apps</span></button>
            <div id="site-switcher-content" class="dropdown-content">
              <nav class="dropdown-menu" role="menu">
                <ul>
                  <li role="presentation">
                    <a class="site-wordmark" role="menuitem" title="Navigate to the Flutter website." aria-label="Navigate to the Flutter website." href="https://flutter.dev"><img alt="Flutter logo" width="28" src="/assets/images/branding/flutter/logo/default.svg"/><span class="name" translate="no">Flutter</span></a>
                  </li>
                  <li role="presentation">
                    <a class="site-wordmark current-site" role="menuitem" title="Navigate to the Flutter Docs website." aria-label="Navigate to the Flutter Docs website." href="/"><img alt="Flutter logo" width="28" src="/assets/images/branding/flutter/logo/default.svg"/><span class="name" translate="no">Flutter</span><span class="subtype">Docs</span></a>
                  </li>
                  <li role="presentation">
                    <a class="site-wordmark" role="menuitem" title="Navigate to the Flutter API website." aria-label="Navigate to the Flutter API website." href="https://api.flutter.dev"><img alt="Flutter logo" width="28" src="/assets/images/branding/flutter/logo/default.svg"/><span class="name" translate="no">Flutter</span><span class="subtype">API</span></a>
                  </li>
                  <li role="presentation">
                    <a class="site-wordmark" role="menuitem" title="Navigate to the Flutter Blog website." aria-label="Navigate to the Flutter Blog website." href="https://blog.flutter.dev"><img alt="Flutter logo" width="28" src="/assets/images/branding/flutter/logo/default.svg"/><span class="name" translate="no">Flutter</span><span class="subtype">Blog</span></a>
                  </li>
                  <li class="dropdown-divider" aria-hidden="true" role="separator"></li>
                  <li role="presentation">
                    <a class="site-wordmark" role="menuitem" title="Navigate to the Dart website." aria-label="Navigate to the Dart website." href="https://dart.dev"><img alt="Dart logo" width="28" height="28" src="/assets/images/branding/dart/logo.svg"/><span class="name" translate="no">Dart</span></a>
                  </li>
                  <li role="presentation">
                    <a class="site-wordmark" role="menuitem" title="Navigate to the DartPad website." aria-label="Navigate to the DartPad website." href="https://dartpad.dev"><img alt="Dart logo" width="28" height="28" src="/assets/images/branding/dart/logo.svg"/><span class="name" translate="no">DartPad</span></a>
                  </li>
                  <li role="presentation">
                    <a class="site-wordmark" role="menuitem" title="Navigate to the pub.dev website." aria-label="Navigate to the pub.dev website." href="https://pub.dev"><img alt="Dart logo" width="28" height="28" src="/assets/images/branding/dart/logo.svg"/><span class="name" translate="no">pub.dev</span></a>
                  </li>
                </ul>
              </nav>
            </div>
          </div>
          <!--/@site_switcher-->
          <a id="call-to-action" class="filled-button" href="/learn/pathway">Get started</a>
          <!--@menu_toggle-->
          <button id="menu-toggle" class="icon-button" aria-controls="sidenav" aria-label="Toggle navigation menu." title="Toggle navigation menu." type="button">
            <span class="material-symbols" aria-hidden="true" translate="no">menu</span>
            <span class="material-symbols" aria-hidden="true" translate="no">close</span>
          </button>
          <!--/@menu_toggle-->
        </div>
      </nav>
    </header>
    <div id="site-below-header">
      <div id="site-main-row">
        <div id="sidenav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-button active" href="/"><span class="material-symbols" aria-hidden="true" translate="no">asterisk</span>Guides</a>
            </li>
            <li class="nav-item">
              <a class="nav-button" href="/learn/pathway"><span class="material-symbols" aria-hidden="true" translate="no">play_lesson</span>Learn</a>
            </li>
            <li class="nav-item">
              <a class="nav-button" href="/ai/create-with-ai"><span class="material-symbols" aria-hidden="true" translate="no">auto_awesome</span>AI</a>
            </li>
            <li class="nav-item">
              <a class="nav-button" href="https://api.flutter.dev"><span class="material-symbols" aria-hidden="true" translate="no">api</span>Reference</a>
            </li>
            <li aria-hidden="true"><div class="sidenav-divider"></div></li>
          </ul>
          <nav>
            <ul>
              <li class="nav-header">Get started</li>
              <li class="nav-item"><a class="nav-link" href="/install/quick"><div><span>Quick start</span></div></a></li>
              <li class="nav-item"><a class="nav-link" href="/install/custom"><div><span>Custom setup</span></div></a></li>
              <li class="nav-item"><a class="nav-link" href="/learn"><div><span>Learn Flutter</span></div></a></li>
              <li aria-hidden="true"><div class="sidenav-divider"></div></li>
              <li class="nav-header">User interface</li>
              <li class="nav-item">
                <a class="nav-link" href="/ui"><div><span class="material-symbols leading" aria-hidden="true" translate="no">palette</span><span>Introduction</span></div></a>
              </li>
              <li class="nav-item">
                <button class="nav-link active collapsible" data-toggle="collapse" data-target="#sidenav-8" role="button" aria-expanded="true" aria-controls="sidenav-8"><div><span class="material-symbols leading" aria-hidden="true" translate="no">view_module</span><span>Widget catalog</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-8" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/ui/widgets"><div><span>Overview</span></div></a></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-8-2" role="button" aria-expanded="false" aria-controls="sidenav-8-2"><div><span>Design systems</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-8-2" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/ui/widgets/cupertino"><div><span>Cupertino</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/widgets/material"><div><span>Material components</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link active collapsible" data-toggle="collapse" data-target="#sidenav-8-3" role="button" aria-expanded="true" aria-controls="sidenav-8-3"><div><span>Base widgets</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-8-3" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/ui/widgets/accessibility"><div><span>Accessibility</span></div></a></li><li class="nav-item"><a class="nav-link active" href="/ui/widgets/animation"><div><span>Animation</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/widgets/assets"><div><span>Assets</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/widgets/async"><div><span>Async</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/widgets/basics"><div><span>Basics</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/widgets/input"><div><span>Input</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/widgets/interaction"><div><span>Interaction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/widgets/layout"><div><span>Layout</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/widgets/painting"><div><span>Painting</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/widgets/scrolling"><div><span>Scrolling</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/widgets/styling"><div><span>Styling</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/widgets/text"><div><span>Text</span></div></a></li></ul></li></ul>
              </li>
              <li class="nav-item">
                <button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-9" role="button" aria-expanded="false" aria-controls="sidenav-9"><div><span class="material-symbols leading" aria-hidden="true" translate="no">view_quilt</span><span>Layout</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-9" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/ui/layout"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/layout/tutorial"><div><span>Build a layout</span></div></a></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-9-3" role="button" aria-expanded="false" aria-controls="sidenav-9-3"><div><span>Lists &amp; grids</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-9-3" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/cookbook/lists/basic-list"><div><span>Create and use lists</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/lists/horizontal-list"><div><span>Create a horizontal list</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/lists/grid-lists"><div><span>Create a grid view</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/lists/mixed-list"><div><span>Create lists with different types of items</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/lists/spaced-items"><div><span>Create lists with spaced items</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/lists/long-lists"><div><span>Work with long lists</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-9-4" role="button" aria-expanded="false" aria-controls="sidenav-9-4"><div><span>Scrolling</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-9-4" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/ui/layout/scrolling"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/layout/scrolling/slivers"><div><span>Use slivers to achieve fancy scrolling</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/lists/floating-app-bar"><div><span>Place a floating app bar above a list</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/effects/parallax-scrolling"><div><span>Create a scrolling parallax effect</span></div></a></li></ul></li></ul>
              </li>
              <li class="nav-item">
                <button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-10" role="button" aria-expanded="false" aria-controls="sidenav-10"><div><span class="material-symbols leading" aria-hidden="true" translate="no">devices</span><span>Adaptive &amp; responsive design</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-10" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/ui/adaptive-responsive"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/adaptive-responsive/general"><div><span>General approach</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/adaptive-responsive/safearea-mediaquery"><div><span>SafeArea &amp; MediaQuery</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/adaptive-responsive/large-screens"><div><span>Large screens &amp; foldables</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/adaptive-responsive/input"><div><span>User input &amp; accessibility</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/adaptive-responsive/capabilities"><div><span>Capabilities &amp; policies</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/adaptive-responsive/platform-adaptations"><div><span>Automatic platform adaptations</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/adaptive-responsive/best-practices"><div><span>Best practices</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/adaptive-responsive/more-info"><div><span>Additional resources</span></div></a></li></ul>
              </li>
              <li class="nav-item">
                <button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-11" role="button" aria-expanded="false" aria-controls="sidenav-11"><div><span class="material-symbols leading" aria-hidden="true" translate="no">palette</span><span>Design &amp; theming</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-11" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/cookbook/design/themes"><div><span>Share styles with themes</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/design/material"><div><span>Material design</span></div></a></li><li class="nav-item"><a class="nav-link" href="/release/breaking-changes/material-3-migration"><div><span>Migrate to Material 3</span></div></a></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-11-4" role="button" aria-expanded="false" aria-controls="sidenav-11-4"><div><span>Text</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-11-4" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/ui/design/text/typography"><div><span>Fonts &amp; typography</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/design/fonts"><div><span>Use a custom font</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/design/package-fonts"><div><span>Export fonts from a package</span></div></a></li><li class="nav-item"><a class="nav-link" rel="noopener" href="https://pub.dev/packages/google_fonts" target="_blank"><div><span>Google Fonts package</span><span class="material-symbols" aria-hidden="true" translate="no">open_in_new</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-11-5" role="button" aria-expanded="false" aria-controls="sidenav-11-5"><div><span>Custom graphics</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-11-5" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/ui/design/graphics/fragment-shaders"><div><span>Use custom fragment shaders</span></div></a></li></ul></li></ul>
              </li>
              <li class="nav-item">
                <button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-12" role="button" aria-expanded="false" aria-controls="sidenav-12"><div><span class="material-symbols leading" aria-hidden="true" translate="no">touch_app</span><span>Interactivity</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-12" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/ui/interactivity"><div><span>Add interactivity to your app</span></div></a></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-12-2" role="button" aria-expanded="false" aria-controls="sidenav-12-2"><div><span>Gestures</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-12-2" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/ui/interactivity/gestures"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/gestures/handling-taps"><div><span>Handle taps</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/interactivity/gestures/drag-outside"><div><span>Drag an object outside an app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/effects/drag-a-widget"><div><span>Drag a UI element within an app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/gestures/ripples"><div><span>Add Material touch ripples</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/gestures/dismissible"><div><span>Implement swipe to dismiss</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-12-3" role="button" aria-expanded="false" aria-controls="sidenav-12-3"><div><span>Input &amp; forms</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-12-3" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/cookbook/forms/text-input"><div><span>Create and style a text field</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/forms/retrieve-input"><div><span>Retrieve the value of a text field</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/forms/text-field-changes"><div><span>Handle changes to a text field</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/forms/focus"><div><span>Manage focus in text fields</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/forms/validation"><div><span>Build a form with validation</span></div></a></li></ul></li><li class="nav-item"><a class="nav-link" href="/cookbook/design/snackbars"><div><span>Display a snackbar</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/interactivity/actions-and-shortcuts"><div><span>Implement actions &amp; shortcuts</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/interactivity/focus"><div><span>Manage keyboard focus</span></div></a></li></ul>
              </li>
              <li class="nav-item">
                <button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-13" role="button" aria-expanded="false" aria-controls="sidenav-13"><div><span class="material-symbols leading" aria-hidden="true" translate="no">photo_library</span><span>Assets &amp; media</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-13" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/ui/assets/assets-and-images"><div><span>Add assets and images</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/images/network-image"><div><span>Display images from the internet</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/images/fading-in-images"><div><span>Fade in images with a placeholder</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/plugins/play-video"><div><span>Play and pause a video</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/assets/asset-transformation"><div><span>Transform assets at build time</span></div></a></li></ul>
              </li>
              <li class="nav-item">
                <button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-14" role="button" aria-expanded="false" aria-controls="sidenav-14"><div><span class="material-symbols leading" aria-hidden="true" translate="no">alt_route</span><span>Navigation &amp; routing</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-14" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/ui/navigation"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/design/tabs"><div><span>Add tabs to your app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/navigation/navigation-basics"><div><span>Navigate to a new screen and back</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/navigation/passing-data"><div><span>Send data to a new screen</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/navigation/returning-data"><div><span>Return data from a screen</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/design/drawer"><div><span>Add a drawer to a screen</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/design/cupertino-sheets"><div><span>Display a Cupertino sheet</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/navigation/deep-linking"><div><span>Set up deep linking</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/navigation/set-up-app-links"><div><span>Set up app links for Android</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/navigation/set-up-universal-links"><div><span>Set up universal links for iOS</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/navigation/url-strategies"><div><span>Configure web URL strategies</span></div></a></li></ul>
              </li>
              <li class="nav-item">
                <button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-15" role="button" aria-expanded="false" aria-controls="sidenav-15"><div><span class="material-symbols leading" aria-hidden="true" translate="no">animation</span><span>Animations &amp; transitions</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-15" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/ui/animations"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/animations/tutorial"><div><span>Tutorial</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/animations/implicit-animations"><div><span>Implicit animations</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/animation/animated-container"><div><span>Animate the properties of a container</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/animation/opacity-animation"><div><span>Fade a widget in and out</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/animations/hero-animations"><div><span>Hero animations</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/animation/page-route-animation"><div><span>Animate a page route transition</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/animation/physics-simulation"><div><span>Animate using a physics simulation</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/animations/staggered-animations"><div><span>Staggered animations</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/effects/staggered-menu-animation"><div><span>Create a staggered menu animation</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/animations/overview"><div><span>API overview</span></div></a></li></ul>
              </li>
              <li class="nav-item">
                <button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-16" role="button" aria-expanded="false" aria-controls="sidenav-16"><div><span class="material-symbols leading" aria-hidden="true" translate="no">accessibility</span><span>Accessibility</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-16" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/ui/accessibility"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/accessibility/ui-design-and-styling"><div><span>UI design &amp; styling</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/accessibility/assistive-technologies"><div><span>Assistive technologies</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/accessibility/accessibility-testing"><div><span>Accessibility testing</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/accessibility/web-accessibility"><div><span>Web accessibility</span></div></a></li></ul>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/ui/internationalization"><div><span class="material-symbols leading" aria-hidden="true" translate="no">translate</span><span>Internationalization</span></div></a>
              </li>
              <li aria-hidden="true"><div class="sidenav-divider"></div></li>
              <li class="nav-header">Beyond UI</li>
              <li class="nav-item">
                <button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-20" role="button" aria-expanded="false" aria-controls="sidenav-20"><div><span class="material-symbols leading" aria-hidden="true" translate="no">storage</span><span>Data &amp; backend</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-20" class="nav collapse"><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-20-1" role="button" aria-expanded="false" aria-controls="sidenav-20-1"><div><span>State management</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-20-1" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/data-and-backend/state-mgmt/intro"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/data-and-backend/state-mgmt/declarative"><div><span>Think declaratively</span></div></a></li><li class="nav-item"><a class="nav-link" href="/data-and-backend/state-mgmt/ephemeral-vs-app"><div><span>Ephemeral vs app state</span></div></a></li><li class="nav-item"><a class="nav-link" href="/data-and-backend/state-mgmt/simple"><div><span>Simple app state management</span></div></a></li><li class="nav-item"><a class="nav-link" href="/data-and-backend/state-mgmt/options"><div><span>Options</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-20-2" role="button" aria-expanded="false" aria-controls="sidenav-20-2"><div><span>Networking &amp; http</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-20-2" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/data-and-backend/networking"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/networking/fetch-data"><div><span>Fetch data from the internet</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/networking/authenticated-requests"><div><span>Make authenticated requests</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/networking/send-data"><div><span>Send data to the internet</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/networking/update-data"><div><span>Update data over the internet</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/networking/delete-data"><div><span>Delete data on the internet</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/networking/web-sockets"><div><span>Communicate with WebSockets</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-20-3" role="button" aria-expanded="false" aria-controls="sidenav-20-3"><div><span>Serialization</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-20-3" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/data-and-backend/serialization/json"><div><span>JSON serialization</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/networking/background-parsing"><div><span>Parse JSON in the background</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-20-4" role="button" aria-expanded="false" aria-controls="sidenav-20-4"><div><span>Persistence</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-20-4" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/cookbook/persistence/key-value"><div><span>Store key-value data on disk</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/persistence/reading-writing-files"><div><span>Read and write files</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/persistence/sqlite"><div><span>Persist data with SQLite</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-20-5" role="button" aria-expanded="false" aria-controls="sidenav-20-5"><div><span>Firebase</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-20-5" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/data-and-backend/firebase"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" rel="noopener" href="https://firebase.google.com/docs/flutter/setup" target="_blank"><div><span>Add Firebase to your Flutter app</span><span class="material-symbols" aria-hidden="true" translate="no">open_in_new</span></div></a></li></ul></li><li class="nav-item"><a class="nav-link" href="/data-and-backend/google-apis"><div><span>Google APIs</span></div></a></li></ul>
              </li>
              <li class="nav-item">
                <button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-21" role="button" aria-expanded="false" aria-controls="sidenav-21"><div><span class="material-symbols leading" aria-hidden="true" translate="no">account_tree</span><span>App architecture</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-21" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/app-architecture"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/app-architecture/concepts"><div><span>Architecture concepts</span></div></a></li><li class="nav-item"><a class="nav-link" href="/app-architecture/guide"><div><span>Guide to app architecture</span></div></a></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-21-4" role="button" aria-expanded="false" aria-controls="sidenav-21-4"><div><span>Architecture case study</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-21-4" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/app-architecture/case-study"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/app-architecture/case-study/ui-layer"><div><span>UI layer</span></div></a></li><li class="nav-item"><a class="nav-link" href="/app-architecture/case-study/data-layer"><div><span>Data layer</span></div></a></li><li class="nav-item"><a class="nav-link" href="/app-architecture/case-study/dependency-injection"><div><span>Dependency injection</span></div></a></li><li class="nav-item"><a class="nav-link" href="/app-architecture/case-study/testing"><div><span>Testing each layer</span></div></a></li></ul></li><li class="nav-item"><a class="nav-link" href="/app-architecture/recommendations"><div><span>Recommendations</span></div></a></li><li class="nav-item"><a class="nav-link" href="/app-architecture/design-patterns"><div><span>Design patterns</span></div></a></li></ul>
              </li>
              <li class="nav-item">
                <button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-22" role="button" aria-expanded="false" aria-controls="sidenav-22"><div><span class="material-symbols leading" aria-hidden="true" translate="no">integration_instructions</span><span>Platform integration</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-22" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/reference/supported-platforms"><div><span>Supported platforms</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/desktop"><div><span>Build desktop apps with Flutter</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/platform-channels"><div><span>Write platform-specific code</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/bind-native-code"><div><span>Bind to native code</span></div></a></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-22-5" role="button" aria-expanded="false" aria-controls="sidenav-22-5"><div><span>Android</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-22-5" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/platform-integration/android/setup"><div><span>Set up Android development</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/android/splash-screen"><div><span>Add a splash screen</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/android/predictive-back"><div><span>Add predictive back</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/android/platform-views"><div><span>Host a native Android view</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/android/call-jetpack-apis"><div><span>Calling JetPack APIs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/android/compose-activity"><div><span>Launch a Jetpack Compose activity</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/android/restore-state-android"><div><span>Restore state on Android</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/android/chromeos"><div><span>Target ChromeOS with Android</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/android/sensitive-content"><div><span>Protect your app's sensitive content</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-22-6" role="button" aria-expanded="false" aria-controls="sidenav-22-6"><div><span>iOS</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-22-6" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/setup"><div><span>Set up iOS development</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/ios-latest"><div><span>Flutter on latest iOS</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/apple-frameworks"><div><span>Leverage Apple's system libraries</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/launch-screen"><div><span>Add a launch screen</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/ios-app-clip"><div><span>Add iOS App Clip support</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/app-extensions"><div><span>Add iOS app extensions</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/platform-views"><div><span>Host a native iOS view</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/ios-debugging"><div><span>Enable debugging on iOS</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/restore-state-ios"><div><span>Restore state on iOS</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-22-7" role="button" aria-expanded="false" aria-controls="sidenav-22-7"><div><span>Linux</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-22-7" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/platform-integration/linux/setup"><div><span>Set up Linux development</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/linux/building"><div><span>Build a Linux app</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-22-8" role="button" aria-expanded="false" aria-controls="sidenav-22-8"><div><span>macOS</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-22-8" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/platform-integration/macos/setup"><div><span>Set up macOS development</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/macos/building"><div><span>Build a macOS app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/macos/platform-views"><div><span>Host a native macOS view</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-22-9" role="button" aria-expanded="false" aria-controls="sidenav-22-9"><div><span>Web</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-22-9" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/platform-integration/web"><div><span>Web support in Flutter</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/setup"><div><span>Set up web development</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/web-dev-config-file"><div><span>Set up a configuration file</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/building"><div><span>Build a web app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/wasm"><div><span>Compile to WebAssembly</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/initialization"><div><span>Customize app initialization</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/embedding-flutter-web"><div><span>Add Flutter to any web app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/web-content-in-flutter"><div><span>Web content in Flutter</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/renderers"><div><span>Web renderers</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/web-images"><div><span>Display images on the web</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/faq"><div><span>Web FAQ</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-22-10" role="button" aria-expanded="false" aria-controls="sidenav-22-10"><div><span>Windows</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-22-10" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/platform-integration/windows/setup"><div><span>Set up Windows development</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/windows/building"><div><span>Build a Windows app</span></div></a></li></ul></li></ul>
              </li>
              <li class="nav-item">
                <button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-23" role="button" aria-expanded="false" aria-controls="sidenav-23"><div><span class="material-symbols leading" aria-hidden="true" translate="no">extension</span><span>Packages &amp; plugins</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-23" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/packages-and-plugins/using-packages"><div><span>Use packages &amp; plugins</span></div></a></li><li class="nav-item"><a class="nav-link" href="/packages-and-plugins/developing-packages"><div><span>Develop packages &amp; plugins</span></div></a></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-23-3" role="button" aria-expanded="false" aria-controls="sidenav-23-3"><div><span>Swift Package Manager</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-23-3" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/packages-and-plugins/swift-package-manager/for-app-developers"><div><span>For app developers</span></div></a></li><li class="nav-item"><a class="nav-link" href="/packages-and-plugins/swift-package-manager/for-plugin-authors"><div><span>For plugin authors</span></div></a></li></ul></li><li aria-hidden="true"><div class="sidenav-divider"></div></li><li class="nav-item"><a class="nav-link" href="/packages-and-plugins/favorites"><div><span>Flutter Favorites</span></div></a></li><li class="nav-item"><a class="nav-link" rel="noopener" href="https://pub.dev/flutter" target="_blank"><div><span>Package repository</span><span class="material-symbols" aria-hidden="true" translate="no">open_in_new</span></div></a></li></ul>
              </li>
              <li class="nav-item">
                <button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-24" role="button" aria-expanded="false" aria-controls="sidenav-24"><div><span class="material-symbols leading" aria-hidden="true" translate="no">bug_report</span><span>Testing &amp; debugging</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-24" class="nav collapse"><li class="nav-header">Testing</li><li class="nav-item"><a class="nav-link" href="/testing/overview"><div><span>Overview</span></div></a></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-24-3" role="button" aria-expanded="false" aria-controls="sidenav-24-3"><div><span>Unit testing</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-24-3" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/cookbook/testing/unit/introduction"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/testing/unit/mocking"><div><span>Mock dependencies</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-24-4" role="button" aria-expanded="false" aria-controls="sidenav-24-4"><div><span>Widget testing</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-24-4" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/cookbook/testing/widget/introduction"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/testing/widget/finders"><div><span>Find widgets</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/testing/widget/scrolling"><div><span>Simulate scrolling</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/testing/widget/tap-drag"><div><span>Simulate user interaction</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-24-5" role="button" aria-expanded="false" aria-controls="sidenav-24-5"><div><span>Integration testing</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-24-5" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/cookbook/testing/integration/introduction"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/testing/integration-tests"><div><span>Write and run an integration test</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/testing/integration/profiling"><div><span>Profile an integration test</span></div></a></li></ul></li><li class="nav-item"><a class="nav-link" href="/testing/testing-plugins"><div><span>Test a plugin</span></div></a></li><li class="nav-item"><a class="nav-link" href="/testing/plugins-in-tests"><div><span>Handle plugin code in tests</span></div></a></li><li class="nav-header">Debugging</li><li class="nav-item"><a class="nav-link" href="/testing/debugging"><div><span>Debugging tools</span></div></a></li><li class="nav-item"><a class="nav-link" href="/testing/code-debugging"><div><span>Debug your app programmatically</span></div></a></li><li class="nav-item"><a class="nav-link" href="/testing/native-debugging"><div><span>Use a native language debugger</span></div></a></li><li class="nav-item"><a class="nav-link" href="/testing/common-errors"><div><span>Common Flutter errors</span></div></a></li><li class="nav-item"><a class="nav-link" href="/testing/errors"><div><span>Handle errors</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/maintenance/error-reporting"><div><span>Report errors to a service</span></div></a></li></ul>
              </li>
              <li class="nav-item">
                <button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-25" role="button" aria-expanded="false" aria-controls="sidenav-25"><div><span class="material-symbols leading" aria-hidden="true" translate="no">speed</span><span>Performance &amp; optimization</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-25" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/perf"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/impeller"><div><span>Impeller</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/best-practices"><div><span>Performance best practices</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/app-size"><div><span>App size</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/deferred-components"><div><span>Deferred components</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/rendering-performance"><div><span>Rendering performance</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/ui-performance"><div><span>Performance profiling</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/web-performance"><div><span>Performance profiling for web</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/metrics"><div><span>Performance metrics</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/isolates"><div><span>Concurrency and isolates</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/faq"><div><span>Performance FAQ</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/appendix"><div><span>Appendix</span></div></a></li></ul>
              </li>
              <li class="nav-item">
                <button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-26" role="button" aria-expanded="false" aria-controls="sidenav-26"><div><span class="material-symbols leading" aria-hidden="true" translate="no">rocket_launch</span><span>Deployment</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-26" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/deployment/obfuscate"><div><span>Obfuscate Dart code</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/flavors"><div><span>Create app flavors for Android</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/flavors-ios"><div><span>Create app flavors for iOS and macOS</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/android"><div><span>Build and release an Android app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/ios"><div><span>Build and release an iOS app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/macos"><div><span>Build and release a macOS app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/linux"><div><span>Build and release a Linux app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/windows"><div><span>Build and release a Windows app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/web"><div><span>Build and release a web app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/cd"><div><span>Set up continuous deployment</span></div></a></li></ul>
              </li>
              <li class="nav-item">
                <button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-27" role="button" aria-expanded="false" aria-controls="sidenav-27"><div><span class="material-symbols leading" aria-hidden="true" translate="no">add_circle</span><span>Add to an existing app</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-27" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/add-to-app"><div><span>Introduction</span></div></a></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-27-2" role="button" aria-expanded="false" aria-controls="sidenav-27-2"><div><span>Add to an Android app</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-27-2" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/add-to-app/android/project-setup"><div><span>Set up Android project</span></div></a></li><li class="nav-item"><a class="nav-link" href="/add-to-app/android/add-flutter-screen"><div><span>Add a single Flutter screen</span></div></a></li><li class="nav-item"><a class="nav-link" href="/add-to-app/android/add-flutter-fragment"><div><span>Add a Flutter Fragment</span></div></a></li><li class="nav-item"><a class="nav-link" href="/add-to-app/android/add-flutter-view"><div><span>Add a Flutter View</span></div></a></li><li class="nav-item"><a class="nav-link" href="/add-to-app/android/plugin-setup"><div><span>Use a Flutter plugin</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-27-3" role="button" aria-expanded="false" aria-controls="sidenav-27-3"><div><span>Add to an iOS app</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-27-3" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/add-to-app/ios/project-setup"><div><span>Set up iOS project</span></div></a></li><li class="nav-item"><a class="nav-link" href="/add-to-app/ios/add-flutter-screen"><div><span>Add a single Flutter screen</span></div></a></li></ul></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/embedding-flutter-web"><div><span>Add to a web app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/add-to-app/debugging"><div><span>Debug embedded Flutter module</span></div></a></li><li class="nav-item"><a class="nav-link" href="/add-to-app/multiple-flutters"><div><span>Add multiple Flutter instances</span></div></a></li><li class="nav-item"><a class="nav-link" href="/add-to-app/performance"><div><span>Loading sequence and performance</span></div></a></li></ul>
              </li>
              <li aria-hidden="true"><div class="sidenav-divider"></div></li>
              <li class="nav-header">Resources</li>
              <li class="nav-item">
                <button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-30" role="button" aria-expanded="false" aria-controls="sidenav-30"><div><span class="material-symbols leading" aria-hidden="true" translate="no">construction</span><span>Tools &amp; editors</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-30" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/tools/android-studio"><div><span>Android Studio &amp; IntelliJ</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/vs-code"><div><span>Visual Studio Code</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/antigravity"><div><span>Antigravity</span></div></a></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-30-4" role="button" aria-expanded="false" aria-controls="sidenav-30-4"><div><span>DevTools</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-30-4" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/tools/devtools"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/android-studio"><div><span>Run from Android Studio &amp; IntelliJ</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/vscode"><div><span>Run from VS Code</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/cli"><div><span>Run from command line</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/inspector"><div><span>Flutter inspector</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/legacy-inspector"><div><span>Legacy Flutter inspector</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/performance"><div><span>Performance view</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/cpu-profiler"><div><span>CPU Profiler view</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/memory"><div><span>Memory view</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/console"><div><span>Debug console view</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/network"><div><span>Network view</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/debugger"><div><span>Debugger</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/logging"><div><span>Logging view</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/app-size"><div><span>App size tool</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/extensions"><div><span>DevTools extensions</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/custom-tool"><div><span>Build a custom tool</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/deep-links"><div><span>Validate deep links</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/release-notes"><div><span>Release notes</span></div></a></li></ul></li><li class="nav-item"><a class="nav-link" href="/tools/widget-previewer"><div><span>Flutter Widget Previewer</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/property-editor"><div><span>Flutter Property Editor</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/sdk"><div><span>SDK overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/pubspec"><div><span>Flutter's pubspec options</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/flutter-fix"><div><span>Automated fixes</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/formatting"><div><span>Code formatting</span></div></a></li></ul>
              </li>
              <li class="nav-item">
                <button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-31" role="button" aria-expanded="false" aria-controls="sidenav-31"><div><span class="material-symbols leading" aria-hidden="true" translate="no">lightbulb</span><span>Flutter concepts</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-31" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/resources/architectural-overview"><div><span>Architectural overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/resources/inside-flutter"><div><span>Inside Flutter</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/layout/constraints"><div><span>Understanding constraints</span></div></a></li><li class="nav-item"><a class="nav-link" href="/testing/build-modes"><div><span>Flutter's build modes</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/hot-reload"><div><span>Hot reload</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/dot-shorthands"><div><span>Dot shorthands</span></div></a></li></ul>
              </li>
              <li class="nav-item">
                <button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-32" role="button" aria-expanded="false" aria-controls="sidenav-32"><div><span class="material-symbols leading" aria-hidden="true" translate="no">apps</span><span>App solutions</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-32" class="nav collapse"><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-32-1" role="button" aria-expanded="false" aria-controls="sidenav-32-1"><div><span>Develop with Firebase</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-32-1" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/data-and-backend/firebase"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" rel="noopener" href="https://firebase.google.com/docs/flutter" target="_blank"><div><span>Discover Firebase for Flutter</span><span class="material-symbols" aria-hidden="true" translate="no">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" rel="noopener" href="https://www.youtube.com/watch?v=wUSkeTaBonA" target="_blank"><div><span>Get to know Firebase for Flutter</span><span class="material-symbols" aria-hidden="true" translate="no">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" rel="noopener" href="https://firebase.google.com/codelabs/firebase-auth-in-flutter-apps" target="_blank"><div><span>Add a user authentication flow to a Flutter app using FirebaseUI</span><span class="material-symbols" aria-hidden="true" translate="no">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" rel="noopener" href="https://firebase.google.com/codelabs/firebase-get-to-know-web" target="_blank"><div><span>Get to know Firebase for web</span><span class="material-symbols" aria-hidden="true" translate="no">open_in_new</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-32-2" role="button" aria-expanded="false" aria-controls="sidenav-32-2"><div><span>Build multi-platform games</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-32-2" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/resources/games-toolkit"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/games/achievements-leaderboard"><div><span>Add achievements and leaderboards</span></div></a></li><li class="nav-item"><a class="nav-link" rel="noopener" href="https://firebase.google.com/codelabs/build-leaderboards-with-firestore#0" target="_blank"><div><span>Build leaderboards with Firestore</span><span class="material-symbols" aria-hidden="true" translate="no">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/plugins/google-mobile-ads"><div><span>Add advertising</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/games/firestore-multiplayer"><div><span>Add multiplayer support</span></div></a></li><li class="nav-item"><a class="nav-link" rel="noopener" href="https://codelabs.developers.google.com/codelabs/flutter-in-app-purchases" target="_blank"><div><span>Add in-app purchases</span><span class="material-symbols" aria-hidden="true" translate="no">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" rel="noopener" href="https://firebase.google.com/codelabs/firebase-auth-in-flutter-apps" target="_blank"><div><span>Add user authentication</span><span class="material-symbols" aria-hidden="true" translate="no">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" rel="noopener" href="https://firebase.google.com/docs/crashlytics/get-started?platform=flutter" target="_blank"><div><span>Debug using Crashlytics</span><span class="material-symbols" aria-hidden="true" translate="no">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" rel="noopener" href="https://codelabs.developers.google.com/codelabs/flutter-flame-brick-breaker" target="_blank"><div><span>Intro to Flame with Flutter</span><span class="material-symbols" aria-hidden="true" translate="no">open_in_new</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-32-3" role="button" aria-expanded="false" aria-controls="sidenav-32-3"><div><span>Monetize your app</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-32-3" class="nav collapse"><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-32-3-1" role="button" aria-expanded="false" aria-controls="sidenav-32-3-1"><div><span>Integrate ads</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-32-3-1" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/resources/ads-overview"><div><span>Ads overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/plugins/google-mobile-ads"><div><span>Add advertising</span></div></a></li><li class="nav-item"><a class="nav-link" rel="noopener" href="https://codelabs.developers.google.com/codelabs/admob-ads-in-flutter" target="_blank"><div><span>Add AdMob ads to your Flutter app</span><span class="material-symbols" aria-hidden="true" translate="no">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" rel="noopener" href="https://codelabs.developers.google.com/codelabs/admob-inline-ads-in-flutter" target="_blank"><div><span>Add an AdMob banner and native inline ads</span><span class="material-symbols" aria-hidden="true" translate="no">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" rel="noopener" href="https://www.youtube.com/watch?v=U8x5n6RwZOo" target="_blank"><div><span>Integrate multimedia ads (video)</span><span class="material-symbols" aria-hidden="true" translate="no">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" rel="noopener" href="https://developers.google.com/admob/flutter/mediation" target="_blank"><div><span>Google AdMob mediation</span><span class="material-symbols" aria-hidden="true" translate="no">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" rel="noopener" href="https://pub.dev/packages/interactive_media_ads" target="_blank"><div><span>Interactive Media Ads SDK</span><span class="material-symbols" aria-hidden="true" translate="no">open_in_new</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-32-3-2" role="button" aria-expanded="false" aria-controls="sidenav-32-3-2"><div><span>Support payments</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-32-3-2" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/resources/payments-overview"><div><span>Payments overview</span></div></a></li><li class="nav-item"><a class="nav-link" rel="noopener" href="https://pub.dev/packages/pay" target="_blank"><div><span>Google pay package</span><span class="material-symbols" aria-hidden="true" translate="no">open_in_new</span></div></a></li></ul></li><li class="nav-item"><a class="nav-link" rel="noopener" href="https://codelabs.developers.google.com/codelabs/flutter-in-app-purchases" target="_blank"><div><span>Add in-app purchases</span><span class="material-symbols" aria-hidden="true" translate="no">open_in_new</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-32-4" role="button" aria-expanded="false" aria-controls="sidenav-32-4"><div><span>Integrate maps</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-32-4" class="nav collapse"><li class="nav-item"><a class="nav-link" rel="noopener" href="https://codelabs.developers.google.com/codelabs/google-maps-in-flutter" target="_blank"><div><span>Add Google maps to a Flutter app</span><span class="material-symbols" aria-hidden="true" translate="no">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" rel="noopener" href="https://developers.google.com/maps/flutter-package" target="_blank"><div><span>Google Maps package</span><span class="material-symbols" aria-hidden="true" translate="no">open_in_new</span></div></a></li></ul></li></ul>
              </li>
              <li class="nav-item">
                <button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-33" role="button" aria-expanded="false" aria-controls="sidenav-33"><div><span class="material-symbols leading" aria-hidden="true" translate="no">devices</span><span>From another platform?</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-33" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/flutter-for/android-devs"><div><span>Flutter for Android devs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/flutter-for/compose-devs"><div><span>Flutter for Jetpack Compose devs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/flutter-for/swiftui-devs"><div><span>Flutter for SwiftUI devs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/flutter-for/uikit-devs"><div><span>Flutter for UIKit devs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/flutter-for/react-native-devs"><div><span>Flutter for React Native devs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/flutter-for/web-devs"><div><span>Flutter for web devs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/flutter-for/xamarin-forms-devs"><div><span>Flutter for Xamarin.Forms devs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/flutter-for/declarative"><div><span>Introduction to declarative UI</span></div></a></li><li class="nav-item"><a class="nav-link" href="/flutter-for/dart-swift-concurrency"><div><span>Flutter versus Swift concurrency</span></div></a></li></ul>
              </li>
              <li class="nav-item">
                <button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-34" role="button" aria-expanded="false" aria-controls="sidenav-34"><div><span class="material-symbols leading" aria-hidden="true" translate="no">update</span><span>Stay up to date</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-34" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/release/release-notes"><div><span>Release notes</span></div></a></li><li class="nav-item"><a class="nav-link" href="/release/breaking-changes"><div><span>Breaking changes</span></div></a></li><li class="nav-item"><a class="nav-link" href="/release/compatibility-policy"><div><span>Compatibility policy</span></div></a></li><li aria-hidden="true"><div class="sidenav-divider"></div></li><li class="nav-item"><a class="nav-link" rel="noopener" href="https://blog.flutter.dev" target="_blank"><div><span>Flutter blog</span><span class="material-symbols" aria-hidden="true" translate="no">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="/release/whats-new"><div><span>What's new in the docs</span></div></a></li></ul>
              </li>
              <li class="nav-item">
                <button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-35" role="button" aria-expanded="false" aria-controls="sidenav-35"><div><span class="material-symbols leading" aria-hidden="true" translate="no">computer</span><span>Manage install</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-35" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/install"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/install/manual"><div><span>Install manually</span></div></a></li><li class="nav-item"><a class="nav-link" href="/install/with-vs-code"><div><span>Install with VS Code</span></div></a></li><li aria-hidden="true"><div class="sidenav-divider"></div></li><li class="nav-item"><a class="nav-link" href="/install/archive"><div><span>SDK archive</span></div></a></li><li class="nav-item"><a class="nav-link" href="/install/upgrade"><div><span>Upgrade SDK</span></div></a></li><li class="nav-item"><a class="nav-link" href="/install/add-to-path"><div><span>Add to path</span></div></a></li><li class="nav-item"><a class="nav-link" href="/install/troubleshoot"><div><span>Troubleshoot</span></div></a></li><li class="nav-item"><a class="nav-link" href="/install/uninstall"><div><span>Uninstall SDK</span></div></a></li></ul>
              </li>
              <li class="nav-item">
                <button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-36" role="button" aria-expanded="false" aria-controls="sidenav-36"><div><span class="material-symbols leading" aria-hidden="true" translate="no">library_books</span><span>Resources</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-36" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/reference/learning-resources"><div><span>Samples &amp; tutorials</span></div></a></li><li class="nav-item"><a class="nav-link" href="/resources/faq"><div><span>FAQ</span></div></a></li><li class="nav-item"><a class="nav-link" href="/resources/videos"><div><span>Videos</span></div></a></li><li class="nav-item"><a class="nav-link" href="/resources/courses"><div><span>Courses</span></div></a></li><li class="nav-item"><a class="nav-link" href="/resources/glossary"><div><span>Glossary</span></div></a></li><li class="nav-item"><a class="nav-link" href="/resources/support"><div><span>Get support</span></div></a></li><li aria-hidden="true"><div class="sidenav-divider"></div></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-36-8" role="button" aria-expanded="false" aria-controls="sidenav-36-8"><div><span>Contribute</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-36-8" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/contribute"><div><span>Contribute to Flutter</span></div></a></li><li class="nav-item"><a class="nav-link" href="/resources/bug-reports"><div><span>Create useful bug reports</span></div></a></li><li class="nav-item"><a class="nav-link" href="/resources/design-docs"><div><span>Discover proposed features</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-36-9" role="button" aria-expanded="false" aria-controls="sidenav-36-9"><div><span>Reference</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-36-9" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/dash"><div><span>Who is Dash?</span></div></a></li><li class="nav-item"><a class="nav-link" href="/reference/widgets"><div><span>Widget index</span></div></a></li><li class="nav-item"><a class="nav-link" href="/reference/create-new-app"><div><span>Create a new app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/reference/flutter-cli"><div><span>flutter CLI</span></div></a></li><li class="nav-item"><a class="nav-link" rel="noopener" href="https://api.flutter.dev" target="_blank"><div><span>API docs</span><span class="material-symbols" aria-hidden="true" translate="no">open_in_new</span></div></a></li></ul></li></ul>
              </li>
            </ul>
          </nav>
        </div>
        <main id="page-content">
          <div id="site-banner" role="alert">
            <p>
              Flutter is back at Google I/O on May 19-20! <a href="https://io.google/2026/?utm_source=flutter&utm_medium=embedded_marketing&utm_campaign=flutter" target="_blank">Register now</a>
            </p>
          </div>
          <div class="after-leading-content">
            <article>
              <header id="site-content-title" class="wrap">
                <nav class="breadcrumbs" aria-label="breadcrumb">
                  <ol class="breadcrumb-list" vocab="https://schema.org/" typeof="BreadcrumbList">
                    <li class="breadcrumb-item" property="itemListElement" typeof="ListItem">
                      <a property="item" typeof="WebPage" href="/ui"><span property="name">UI</span></a><meta property="position" content="0"/><span class="material-symbols" aria-hidden="true" translate="no">chevron_right</span>
                    </li>
                    <li class="breadcrumb-item" property="itemListElement" typeof="ListItem">
                      <a property="item" typeof="WebPage" href="/ui/widgets"><span property="name">Widgets</span></a><meta property="position" content="1"/><span class="material-symbols" aria-hidden="true" translate="no">chevron_right</span>
                    </li>
                    <li class="breadcrumb-item active" property="itemListElement" typeof="ListItem" aria-current="page">
                      <a property="item" typeof="WebPage" href="/ui/widgets/animation"><span property="name">Animation and motion</span></a><meta property="position" content="2"/>
                    </li>
                  </ol>
                </nav>
                <h1 id="document-title">Animation and motion widgets</h1>
                <p class="page-description">A catalog of Flutter's animation and motion widgets. Bring animations to your app.</p>
                <!--@page_header_options data={"title":"Animation and motion widgets","sourceUrl":null,"issueUrl":"https://github.com/flutter/website/issues/new?template=1_page_issue.yml&amp;page-url=https://docs.flutter.dev/ui/widgets/animation"}-->
                <div id="page-header-options" class="dropdown" data-expanded="false">
                  <button class="dropdown-button text-button icon-button" aria-controls="page-header-options-content" aria-expanded="false" title="View page options."><span class="material-symbols" aria-hidden="true" translate="no">more_vert</span></button>
                  <div id="page-header-options-content" class="dropdown-content">
                    <nav class="dropdown-menu" role="menu">
                      <ul>
                        <li>
                          <button class="text-button"><span class="material-symbols" aria-hidden="true" translate="no">copy</span>Copy link</button>
                        </li>
                        <li>
                          <a class="text-button" target="_blank" rel="noopener" href="https://github.com/flutter/website/issues/new?template=1_page_issue.yml&amp;page-url=https://docs.flutter.dev/ui/widgets/animation"><span class="material-symbols" aria-hidden="true" translate="no">bug_report</span>Report issue</a>
                        </li>
                      </ul>
                    </nav>
                  </div>
                </div>
                <!--/@page_header_options-->
              </header>
              <p>Bring animations to your app.</p>
              <div class="card-grid">
                <a class="card outlined-card" href="https://api.flutter.dev/flutter/widgets/AlignTransition-class.html">
                  <div class="card-image-holder">
                    <img aria-hidden="true" alt="Placeholder Flutter logo in place of missing widget image or visualization." src="/assets/images/docs/catalog-widget-placeholder.png"/>
                  </div>
                  <div class="card-header"><span class="card-title">Align<wbr/>Transition</span></div>
                  <div class="card-content"><p>Animated version of an Align that animates its Align.alignment property.</p></div>
                </a>
                <a class="card outlined-card" href="https://api.flutter.dev/flutter/widgets/AnimatedAlign-class.html">
                  <div class="card-image-holder">
                    <img aria-hidden="true" alt="Placeholder Flutter logo in place of missing widget image or visualization." src="/assets/images/docs/catalog-widget-placeholder.png"/>
                  </div>
                  <div class="card-header"><span class="card-title">Animated<wbr/>Align</span></div>
                  <div class="card-content">
                    <p>
                      Animated transition that moves the child's position over a given duration whenever the given alignment changes.
                    </p>
                  </div>
                </a>
                <a class="card outlined-card" href="https://api.flutter.dev/flutter/widgets/AnimatedBuilder-class.html">
                  <div class="card-image-holder">
                    <img aria-hidden="true" alt="Placeholder Flutter logo in place of missing widget image or visualization." src="/assets/images/docs/catalog-widget-placeholder.png"/>
                  </div>
                  <div class="card-header"><span class="card-title">Animated<wbr/>Builder</span></div>
                  <div class="card-content">
                    <p>
                      A general-purpose widget for building animations. AnimatedBuilder is useful for more complex widgets that wish to include animation as part of a larger build function....
                    </p>
                  </div>
                </a>
                <a class="card outlined-card" href="https://api.flutter.dev/flutter/widgets/AnimatedContainer-class.html">
                  <div class="card-image-holder">
                    <img aria-hidden="true" alt="Placeholder Flutter logo in place of missing widget image or visualization." src="/assets/images/docs/catalog-widget-placeholder.png"/>
                  </div>
                  <div class="card-header"><span class="card-title">Animated<wbr/>Container</span></div>
                  <div class="card-content"><p>A container that gradually changes its values over a period of time.</p></div>
                </a>
                <a class="card outlined-card" href="https://api.flutter.dev/flutter/widgets/AnimatedCrossFade-class.html">
                  <div class="card-image-holder">
                    <img aria-hidden="true" alt="Placeholder Flutter logo in place of missing widget image or visualization." src="/assets/images/docs/catalog-widget-placeholder.png"/>
                  </div>
                  <div class="card-header"><span class="card-title">Animated<wbr/>Cross<wbr/>Fade</span></div>
                  <div class="card-content"><p>A widget that cross-fades between two given children and animates itself between their sizes.</p></div>
                </a>
                <a class="card outlined-card" href="https://api.flutter.dev/flutter/widgets/AnimatedDefaultTextStyle-class.html">
                  <div class="card-image-holder">
                    <img aria-hidden="true" alt="Placeholder Flutter logo in place of missing widget image or visualization." src="/assets/images/docs/catalog-widget-placeholder.png"/>
                  </div>
                  <div class="card-header"><span class="card-title">Animated<wbr/>Default<wbr/>Text<wbr/>Style</span></div>
                  <div class="card-content">
                    <p>
                      Animated version of DefaultTextStyle which automatically transitions the default text style (the text style to apply to descendant Text widgets without explicit style) over a...
                    </p>
                  </div>
                </a>
                <a class="card outlined-card" href="https://api.flutter.dev/flutter/widgets/AnimatedList-class.html">
                  <div class="card-image-holder">
                    <img aria-hidden="true" alt="Placeholder Flutter logo in place of missing widget image or visualization." src="/assets/images/docs/catalog-widget-placeholder.png"/>
                  </div>
                  <div class="card-header"><span class="card-title">Animated<wbr/>List</span></div>
                  <div class="card-content"><p>A scrolling container that animates items when they are inserted or removed.</p></div>
                </a>
                <a class="card outlined-card" href="https://api.flutter.dev/flutter/widgets/AnimatedListState-class.html">
                  <div class="card-image-holder">
                    <img aria-hidden="true" alt="Placeholder Flutter logo in place of missing widget image or visualization." src="/assets/images/docs/catalog-widget-placeholder.png"/>
                  </div>
                  <div class="card-header"><span class="card-title">Animated<wbr/>List<wbr/>State</span></div>
                  <div class="card-content"><p>The state for a scrolling container that animates items when they are inserted or removed.</p></div>
                </a>
                <a class="card outlined-card" href="https://api.flutter.dev/flutter/widgets/AnimatedModalBarrier-class.html">
                  <div class="card-image-holder">
                    <img aria-hidden="true" alt="Placeholder Flutter logo in place of missing widget image or visualization." src="/assets/images/docs/catalog-widget-placeholder.png"/>
                  </div>
                  <div class="card-header"><span class="card-title">Animated<wbr/>Modal<wbr/>Barrier</span></div>
                  <div class="card-content"><p>A widget that prevents the user from interacting with widgets behind itself.</p></div>
                </a>
                <a class="card outlined-card" href="https://api.flutter.dev/flutter/widgets/AnimatedOpacity-class.html">
                  <div class="card-image-holder">
                    <img aria-hidden="true" alt="Placeholder Flutter logo in place of missing widget image or visualization." src="/assets/images/docs/catalog-widget-placeholder.png"/>
                  </div>
                  <div class="card-header"><span class="card-title">Animated<wbr/>Opacity</span></div>
                  <div class="card-content">
                    <p>
                      Animated version of Opacity which automatically transitions the child's opacity over a given duration whenever the given opacity changes.
                    </p>
                  </div>
                </a>
                <a class="card outlined-card" href="https://api.flutter.dev/flutter/widgets/AnimatedPhysicalModel-class.html">
                  <div class="card-image-holder">
                    <img aria-hidden="true" alt="Placeholder Flutter logo in place of missing widget image or visualization." src="/assets/images/docs/catalog-widget-placeholder.png"/>
                  </div>
                  <div class="card-header"><span class="card-title">Animated<wbr/>Physical<wbr/>Model</span></div>
                  <div class="card-content"><p>Animated version of PhysicalModel.</p></div>
                </a>
                <a class="card outlined-card" href="https://api.flutter.dev/flutter/widgets/AnimatedPositioned-class.html">
                  <div class="card-image-holder">
                    <img aria-hidden="true" alt="Placeholder Flutter logo in place of missing widget image or visualization." src="/assets/images/docs/catalog-widget-placeholder.png"/>
                  </div>
                  <div class="card-header"><span class="card-title">Animated<wbr/>Positioned</span></div>
                  <div class="card-content">
                    <p>
                      Animated version of Positioned which automatically transitions the child's position over a given duration whenever the given position changes.
                    </p>
                  </div>
                </a>
                <a class="card outlined-card" href="https://api.flutter.dev/flutter/widgets/AnimatedScale-class.html">
                  <div class="card-image-holder">
                    <img aria-hidden="true" alt="Placeholder Flutter logo in place of missing widget image or visualization." src="/assets/images/docs/catalog-widget-placeholder.png"/>
                  </div>
                  <div class="card-header"><span class="card-title">Animated<wbr/>Scale</span></div>
                  <div class="card-content">
                    <p>
                      Animated version of <code>Transform.scale</code> that automatically transitions the child's scale over a given duration whenever the given scale changes.
                    </p>
                  </div>
                </a>
                <a class="card outlined-card" href="https://api.flutter.dev/flutter/widgets/AnimatedSize-class.html">
                  <div class="card-image-holder">
                    <img aria-hidden="true" alt="Placeholder Flutter logo in place of missing widget image or visualization." src="/assets/images/docs/catalog-widget-placeholder.png"/>
                  </div>
                  <div class="card-header"><span class="card-title">Animated<wbr/>Size</span></div>
                  <div class="card-content">
                    <p>
                      Animated widget that automatically transitions its size over a given duration whenever the given child's size changes.
                    </p>
                  </div>
                </a>
                <a class="card outlined-card" href="https://api.flutter.dev/flutter/widgets/AnimatedWidget-class.html">
                  <div class="card-image-holder">
                    <img aria-hidden="true" alt="Placeholder Flutter logo in place of missing widget image or visualization." src="/assets/images/docs/catalog-widget-placeholder.png"/>
                  </div>
                  <div class="card-header"><span class="card-title">Animated<wbr/>Widget</span></div>
                  <div class="card-content"><p>A widget that rebuilds when the given Listenable changes value.</p></div>
                </a>
                <a class="card outlined-card" href="https://api.flutter.dev/flutter/widgets/ImplicitlyAnimatedWidget-class.html">
                  <div class="card-image-holder">
                    <img aria-hidden="true" alt="Placeholder Flutter logo in place of missing widget image or visualization." src="/assets/images/docs/catalog-widget-placeholder.png"/>
                  </div>
                  <div class="card-header"><span class="card-title">Implicitly<wbr/>Animated<wbr/>Widget</span></div>
                  <div class="card-content"><p>An abstract class for building widgets that animate changes to their properties.</p></div>
                </a>
                <a class="card outlined-card" href="https://api.flutter.dev/flutter/widgets/DecoratedBoxTransition-class.html">
                  <div class="card-image-holder">
                    <img aria-hidden="true" alt="Placeholder Flutter logo in place of missing widget image or visualization." src="/assets/images/docs/catalog-widget-placeholder.png"/>
                  </div>
                  <div class="card-header"><span class="card-title">Decorated<wbr/>Box<wbr/>Transition</span></div>
                  <div class="card-content"><p>Animated version of a DecoratedBox that animates the different properties of its Decoration.</p></div>
                </a>
                <a class="card outlined-card" href="https://api.flutter.dev/flutter/widgets/DefaultTextStyleTransition-class.html">
                  <div class="card-image-holder">
                    <img aria-hidden="true" alt="Placeholder Flutter logo in place of missing widget image or visualization." src="/assets/images/docs/catalog-widget-placeholder.png"/>
                  </div>
                  <div class="card-header"><span class="card-title">Default<wbr/>Text<wbr/>Style<wbr/>Transition</span></div>
                  <div class="card-content">
                    <p>Animated version of a DefaultTextStyle that animates the different properties of its TextStyle.</p>
                  </div>
                </a>
                <a class="card outlined-card" href="https://api.flutter.dev/flutter/widgets/FadeTransition-class.html">
                  <div class="card-image-holder">
                    <img aria-hidden="true" alt="Placeholder Flutter logo in place of missing widget image or visualization." src="/assets/images/docs/catalog-widget-placeholder.png"/>
                  </div>
                  <div class="card-header"><span class="card-title">Fade<wbr/>Transition</span></div>
                  <div class="card-content"><p>Animates the opacity of a widget.</p></div>
                </a>
                <a class="card outlined-card" href="https://api.flutter.dev/flutter/widgets/Hero-class.html">
                  <div class="card-image-holder">
                    <img aria-hidden="true" alt="Placeholder Flutter logo in place of missing widget image or visualization." src="/assets/images/docs/catalog-widget-placeholder.png"/>
                  </div>
                  <div class="card-header"><span class="card-title">Hero</span></div>
                  <div class="card-content"><p>A widget that marks its child as being a candidate for hero animations.</p></div>
                </a>
                <a class="card outlined-card" href="https://api.flutter.dev/flutter/widgets/MatrixTransition-class.html">
                  <div class="card-image-holder">
                    <img aria-hidden="true" alt="Placeholder Flutter logo in place of missing widget image or visualization." src="/assets/images/docs/catalog-widget-placeholder.png"/>
                  </div>
                  <div class="card-header"><span class="card-title">Matrix<wbr/>Transition</span></div>
                  <div class="card-content"><p>Animates the Matrix4 of a transformed widget.</p></div>
                </a>
                <a class="card outlined-card" href="https://api.flutter.dev/flutter/widgets/PositionedTransition-class.html">
                  <div class="card-image-holder">
                    <img aria-hidden="true" alt="Placeholder Flutter logo in place of missing widget image or visualization." src="/assets/images/docs/catalog-widget-placeholder.png"/>
                  </div>
                  <div class="card-header"><span class="card-title">Positioned<wbr/>Transition</span></div>
                  <div class="card-content">
                    <p>
                      Animated version of Positioned which takes a specific Animation to transition the child's position from a start position to and end position over the lifetime...
                    </p>
                  </div>
                </a>
                <a class="card outlined-card" href="https://api.flutter.dev/flutter/widgets/RelativePositionedTransition-class.html">
                  <div class="card-image-holder">
                    <img aria-hidden="true" alt="Placeholder Flutter logo in place of missing widget image or visualization." src="/assets/images/docs/catalog-widget-placeholder.png"/>
                  </div>
                  <div class="card-header"><span class="card-title">Relative<wbr/>Positioned<wbr/>Transition</span></div>
                  <div class="card-content">
                    <p>
                      Animated version of Positioned which transitions the child's position based on the value of rect relative to a bounding box with the specified size.
                    </p>
                  </div>
                </a>
                <a class="card outlined-card" href="https://api.flutter.dev/flutter/widgets/RepeatingAnimationBuilder-class.html">
                  <div class="card-image-holder">
                    <svg viewBox='0 0 100 100'><rect x='0' y='0' width='100' height='100' fill='#3949ab'/><g transform="rotate(30 50 50)"><rect x='35' y='35' width='30' height='30' fill='#ffffff'/><rect x='37.5' y='37.5' width='25' height='25' fill='#3b75ad'/></g><path d="M 50 20 A 30 30, 0, 1, 1, 20 50" stroke="#ffffff" stroke-width="2" stroke-linecap="round" fill="transparent"/><path d="M15 55 L20 50 L25 55" stroke="#ffffff" stroke-width="2" stroke-linecap="round" fill="transparent"/></svg>
                  </div>
                  <div class="card-header"><span class="card-title">Repeating<wbr/>Animation<wbr/>Builder</span></div>
                  <div class="card-content"><p>A widget that animates an Animatable value and repeats indefinitely.</p></div>
                </a>
                <a class="card outlined-card" href="https://api.flutter.dev/flutter/widgets/RotationTransition-class.html">
                  <div class="card-image-holder">
                    <img aria-hidden="true" alt="Placeholder Flutter logo in place of missing widget image or visualization." src="/assets/images/docs/catalog-widget-placeholder.png"/>
                  </div>
                  <div class="card-header"><span class="card-title">Rotation<wbr/>Transition</span></div>
                  <div class="card-content"><p>Animates the rotation of a widget.</p></div>
                </a>
                <a class="card outlined-card" href="https://api.flutter.dev/flutter/widgets/ScaleTransition-class.html">
                  <div class="card-image-holder">
                    <img aria-hidden="true" alt="Placeholder Flutter logo in place of missing widget image or visualization." src="/assets/images/docs/catalog-widget-placeholder.png"/>
                  </div>
                  <div class="card-header"><span class="card-title">Scale<wbr/>Transition</span></div>
                  <div class="card-content"><p>Animates the scale of transformed widget.</p></div>
                </a>
                <a class="card outlined-card" href="https://api.flutter.dev/flutter/widgets/SizeTransition-class.html">
                  <div class="card-image-holder">
                    <img aria-hidden="true" alt="Placeholder Flutter logo in place of missing widget image or visualization." src="/assets/images/docs/catalog-widget-placeholder.png"/>
                  </div>
                  <div class="card-header"><span class="card-title">Size<wbr/>Transition</span></div>
                  <div class="card-content"><p>Animates its own size and clips and aligns the child.</p></div>
                </a>
                <a class="card outlined-card" href="https://api.flutter.dev/flutter/widgets/SlideTransition-class.html">
                  <div class="card-image-holder">
                    <img aria-hidden="true" alt="Placeholder Flutter logo in place of missing widget image or visualization." src="/assets/images/docs/catalog-widget-placeholder.png"/>
                  </div>
                  <div class="card-header"><span class="card-title">Slide<wbr/>Transition</span></div>
                  <div class="card-content"><p>Animates the position of a widget relative to its normal position.</p></div>
                </a>
                <a class="card outlined-card" href="https://api.flutter.dev/flutter/widgets/SliverFadeTransition-class.html">
                  <div class="card-image-holder">
                    <img aria-hidden="true" alt="Placeholder Flutter logo in place of missing widget image or visualization." src="/assets/images/docs/catalog-widget-placeholder.png"/>
                  </div>
                  <div class="card-header"><span class="card-title">Sliver<wbr/>Fade<wbr/>Transition</span></div>
                  <div class="card-content"><p>Animates the opacity of a sliver widget.</p></div>
                </a>
              </div>
              <p>Find more widgets in the <a href="/ui/widgets">widget catalog</a>.</p>
              <div id="trailing-content" data-nosnippet="true">
                <!--@feedback data={"issueUrl":"https://github.com/flutter/website/issues/new?template=1_page_issue.yml&amp;page-url=https://docs.flutter.dev/ui/widgets/animation"}-->
                <div id="page-feedback">
                  <div class="feedback">
                    <div>Was this page's content helpful?</div>
                    <div class="feedback-buttons">
                      <button class="text-button icon-button" title="Yes, this page was helpful."><span class="material-symbols" aria-hidden="true" translate="no">thumb_up</span></button>
                      <button class="text-button icon-button" title="No, this page was not helpful or had an issue"><span class="material-symbols" aria-hidden="true" translate="no">thumb_down</span></button>
                    </div>
                  </div>
                </div>
                <!--/@feedback-->
                <p id="page-github-links">
                  <span>Unless stated otherwise, the documentation on this site reflects Flutter 3.41.5. </span><a title="Report an issue with this page" target="_blank" rel="noopener" href="https://github.com/flutter/website/issues/new?template=1_page_issue.yml&amp;page-url=https://docs.flutter.dev/ui/widgets/animation">Report an issue</a>.
                </p>
              </div>
            </article>
          </div>
        </main>
      </div>
      <footer id="site-footer" data-nosnippet="true">
        <div class="footer-section footer-main">
          <a class="brand" title="Flutter" href="/">
            <img alt="Flutter logo" width="164" src="/assets/images/branding/flutter/logo+text/horizontal/white.svg"/>
          </a>
          <div class="footer-social-links">
            <a rel="noopener" title="Flutter's blog" href="https://blog.flutter.dev" target="_blank"><svg><use href="/assets/images/social/medium.svg#medium"></use></svg></a>
            <a rel="noopener" title="Flutter's YouTube channel" href="https://youtube.com/@flutterdev" target="_blank"><svg><use href="/assets/images/social/youtube.svg#youtube"></use></svg></a>
            <a rel="noopener" title="Flutter's GitHub organization" href="https://github.com/flutter" target="_blank"><svg><use href="/assets/images/social/github.svg#github"></use></svg></a>
            <a rel="noopener" title="Flutter's Bluesky profile" href="https://bsky.app/profile/flutter.dev" target="_blank"><svg><use href="/assets/images/social/bluesky.svg#bluesky"></use></svg></a>
            <a rel="noopener" title="Flutter's X (Twitter) profile" href="https://twitter.com/FlutterDev" target="_blank"><svg><use href="/assets/images/social/x.svg#x"></use></svg></a>
          </div>
        </div>
        <div class="footer-section footer-tray">
          <div class="footer-licenses">
            Except as otherwise noted, this site is licensed under a 
            <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License,</a>
             and code samples are licensed under the 
            <a href="https://opensource.org/licenses/BSD-3-Clause">3-Clause BSD License.</a>
          </div>
          <div class="footer-utility-links">
            <ul>
              <li><a title="Terms of use" href="/tos">Terms</a></li>
              <li><a title="Brand usage guidelines" href="/brand">Brand</a></li>
              <li>
                <a rel="noopener" title="Privacy policy" href="https://policies.google.com/privacy" target="_blank">Privacy</a>
              </li>
              <li><a title="Security philosophy and practices" href="/security">Security</a></li>
            </ul>
            <div class="footer-technology">
              <a class="jaspr-badge-link" rel="noopener" title="This site is built with the Jaspr web framework for Dart." href="https://jaspr.site" target="_blank">
                <span><svg fill="none" viewBox="0 0 106 40" width="106px" height="40px"><rect rx="10" width="106" height="40" fill="#F5F5F5"></rect><path stroke-linejoin="round" d="M14.8115 26.0483C14.8115 26.0483 16.5768 27.9534 18.269 29.3852L21.4834 25.4226L22.5262 26.0483C23.9862 23.5455 22.3041 22.096 22.3041 22.096C24.1264 21.8356 23.7359 19.1022 23.7359 19.1022C22.8248 18.0608 22.6946 17.0195 22.8248 16.3687C22.9454 15.8288 22.754 15.2687 22.5644 14.9368L23.7359 13.6352L24.6139 13.7432C24.6139 11.6576 21.2503 10.6148 20.8598 10.6148C20.4693 10.6148 19.4404 11.4224 19.1801 12.3335L16.0561 12.5939C15.6458 8.11202 9.46732 13.0672 9.59749 14.3689L10.6403 13.9517L12.021 15.848C9.93835 17.41 9.59748 20.8342 9.59748 20.8342L11.3702 20.534C10.459 22.3563 10.7193 24.4389 10.7193 24.4389L12.3088 23.7541C12.439 25.4463 13.7687 27.2996 13.7687 27.2996L14.8115 26.0483Z" stroke="#0E1117" stroke-width="1.25"></path><path stroke-linejoin="round" d="M16.0558 12.5941C15.4049 12.5941 15.0197 13.1178 13.9769 14.3691C12.9341 15.6205 13.4524 15.4578 11.6301 16.1086" stroke="#0E1117" stroke-width="1.25"></path><path stroke-linejoin="round" d="M19.1799 12.3338C20.2213 12.5941 21.6531 13.3751 22.5642 14.9371" stroke="#0E1117" stroke-width="1.25"></path><path stroke-linejoin="round" d="M11.3701 20.5339C11.3701 20.5339 12.1511 19.1021 13.8433 18.3211C12.0209 19.1021 11.3701 20.5339 11.3701 20.5339Z" stroke="#0E1117" stroke-width="1.25"></path><path d="M21.5648 18.9821C21.5648 18.9821 20.0028 18.7218 20.2632 19.8933C20.5813 21.3251 22.7363 20.6743 22.6061 19.7631C22.6061 18.9821 21.5648 18.9821 21.5648 18.9821Z" fill="#0E1117"></path><path stroke-linejoin="round" d="M22.4341 22.0961C21.2626 22.0961 18.9826 22.2943 17.7312 21.46C19.1891 22.7114 23.3603 21.0429 22.9432 24.797C23.3603 23.1285 22.5281 22.5028 22.4341 22.0961Z" stroke="#0E1117" stroke-width="1.25"></path><path d="M48.6833 14.4545H51.7231V24.5966C51.7231 25.5341 51.5124 26.3485 51.091 27.0398C50.6743 27.7311 50.0943 28.2637 49.3509 28.6378C48.6075 29.0118 47.7434 29.1989 46.7586 29.1989C45.8826 29.1989 45.0872 29.045 44.3722 28.7372C43.662 28.4247 43.0985 27.9512 42.6819 27.3168C42.2652 26.6776 42.0592 25.875 42.064 24.9091H45.125C45.1345 25.2926 45.2126 25.6217 45.3594 25.8963C45.5109 26.1662 45.7169 26.3745 45.9773 26.5213C46.2425 26.6634 46.555 26.7344 46.9148 26.7344C47.2936 26.7344 47.6132 26.6539 47.8736 26.4929C48.1388 26.3272 48.34 26.0857 48.4773 25.7685C48.6146 25.4512 48.6833 25.0606 48.6833 24.5966V14.4545ZM57.3196 29.206C56.6236 29.206 56.0034 29.0852 55.4589 28.8438C54.9143 28.5975 54.4835 28.2353 54.1662 27.7571C53.8537 27.2741 53.6975 26.6728 53.6975 25.9531C53.6975 25.3471 53.8088 24.8381 54.0313 24.4261C54.2538 24.0142 54.5569 23.6828 54.9404 23.4318C55.3239 23.1809 55.7595 22.9915 56.2472 22.8636C56.7396 22.7358 57.2557 22.6458 57.7955 22.5938C58.43 22.5275 58.9413 22.4659 59.3296 22.4091C59.7178 22.3475 59.9996 22.2576 60.1748 22.1392C60.35 22.0208 60.4375 21.8456 60.4375 21.6136V21.571C60.4375 21.1212 60.2955 20.7732 60.0114 20.527C59.7321 20.2808 59.3343 20.1577 58.8182 20.1577C58.2737 20.1577 57.8405 20.2784 57.5185 20.5199C57.1965 20.7566 56.9835 21.0549 56.8793 21.4148L54.081 21.1875C54.2231 20.5246 54.5024 19.9517 54.9191 19.4688C55.3357 18.9811 55.8732 18.607 56.5313 18.3466C57.1942 18.0814 57.9612 17.9489 58.8324 17.9489C59.4385 17.9489 60.0185 18.0199 60.5725 18.1619C61.1312 18.304 61.626 18.5241 62.0569 18.8224C62.4925 19.1207 62.8357 19.5043 63.0867 19.973C63.3376 20.437 63.4631 20.9934 63.4631 21.642V29H60.5938V27.4872H60.5086C60.3334 27.8281 60.099 28.1288 59.8054 28.3892C59.5119 28.6449 59.1591 28.8461 58.7472 28.9929C58.3353 29.1349 57.8594 29.206 57.3196 29.206ZM58.1861 27.1179C58.6312 27.1179 59.0242 27.0303 59.3651 26.8551C59.706 26.6752 59.9735 26.4337 60.1677 26.1307C60.3618 25.8277 60.4589 25.4844 60.4589 25.1009V23.9432C60.3642 24.0047 60.2339 24.0616 60.0682 24.1136C59.9072 24.161 59.725 24.206 59.5214 24.2486C59.3178 24.2865 59.1142 24.322 58.9106 24.3551C58.707 24.3835 58.5223 24.4096 58.3566 24.4332C58.0015 24.4853 57.6913 24.5682 57.4262 24.6818C57.161 24.7955 56.9551 24.9493 56.8083 25.1435C56.6615 25.3329 56.5881 25.5696 56.5881 25.8537C56.5881 26.2656 56.7373 26.5805 57.0356 26.7983C57.3386 27.0114 57.7221 27.1179 58.1861 27.1179ZM74.8871 21.2017L72.1172 21.3722C72.0699 21.1354 71.9681 20.9223 71.8118 20.733C71.6556 20.5388 71.4496 20.3849 71.1939 20.2713C70.943 20.1529 70.6423 20.0938 70.2919 20.0938C69.8232 20.0938 69.4278 20.1932 69.1059 20.392C68.7839 20.5862 68.6229 20.8466 68.6229 21.1733C68.6229 21.4337 68.7271 21.6539 68.9354 21.8338C69.1437 22.0137 69.5012 22.1581 70.0079 22.267L71.9823 22.6648C73.0429 22.8826 73.8336 23.233 74.3544 23.7159C74.8753 24.1989 75.1357 24.8333 75.1357 25.6193C75.1357 26.3343 74.925 26.9616 74.5036 27.5014C74.0869 28.0412 73.514 28.4626 72.7848 28.7656C72.0604 29.0639 71.2247 29.2131 70.2777 29.2131C68.8336 29.2131 67.683 28.9124 66.826 28.3111C65.9738 27.705 65.4742 26.8812 65.3275 25.8395L68.3033 25.6832C68.3933 26.1236 68.6111 26.4598 68.9567 26.6918C69.3024 26.919 69.7451 27.0327 70.2848 27.0327C70.8151 27.0327 71.2413 26.9309 71.5633 26.7273C71.89 26.5189 72.0557 26.2514 72.0604 25.9247C72.0557 25.6501 71.9397 25.4252 71.7124 25.25C71.4851 25.0701 71.1348 24.9328 70.6613 24.8381L68.7721 24.4616C67.7067 24.2486 66.9136 23.8793 66.3928 23.3537C65.8767 22.8281 65.6187 22.1581 65.6187 21.3438C65.6187 20.643 65.808 20.0393 66.1868 19.5327C66.5704 19.026 67.1078 18.6354 67.7991 18.3608C68.4951 18.0862 69.3095 17.9489 70.2422 17.9489C71.6201 17.9489 72.7044 18.2401 73.4951 18.8224C74.2905 19.4048 74.7545 20.1979 74.8871 21.2017ZM77.0409 33.0909V18.0909H80.0238V19.9233H80.1588C80.2914 19.6297 80.4831 19.3314 80.7341 19.0284C80.9897 18.7206 81.3212 18.465 81.7284 18.2614C82.1403 18.053 82.6517 17.9489 83.2625 17.9489C84.0579 17.9489 84.7918 18.1572 85.4642 18.5739C86.1365 18.9858 86.6739 19.6084 87.0764 20.4418C87.4789 21.2704 87.6801 22.3097 87.6801 23.5597C87.6801 24.7765 87.4836 25.804 87.0906 26.642C86.7023 27.4754 86.172 28.1075 85.4997 28.5384C84.8321 28.9645 84.084 29.1776 83.2554 29.1776C82.6682 29.1776 82.1687 29.0805 81.7568 28.8864C81.3496 28.6922 81.0158 28.4484 80.7554 28.1548C80.495 27.8565 80.2961 27.5559 80.1588 27.2528H80.0665V33.0909H77.0409ZM80.0025 23.5455C80.0025 24.1941 80.0925 24.7599 80.2724 25.2429C80.4523 25.7259 80.7128 26.1023 81.0537 26.3722C81.3946 26.6373 81.8089 26.7699 82.2966 26.7699C82.789 26.7699 83.2057 26.6349 83.5466 26.3651C83.8875 26.0904 84.1455 25.7116 84.3207 25.2287C84.5006 24.741 84.5906 24.1799 84.5906 23.5455C84.5906 22.9157 84.503 22.3617 84.3278 21.8835C84.1526 21.4053 83.8946 21.0312 83.5537 20.7614C83.2128 20.4915 82.7937 20.3565 82.2966 20.3565C81.8041 20.3565 81.3875 20.4867 81.0466 20.7472C80.7104 21.0076 80.4523 21.3769 80.2724 21.8551C80.0925 22.3333 80.0025 22.8968 80.0025 23.5455ZM89.6971 29V18.0909H92.6304V19.9943H92.744C92.9429 19.3172 93.2767 18.8059 93.7454 18.4602C94.2142 18.1098 94.754 17.9347 95.3647 17.9347C95.5163 17.9347 95.6796 17.9441 95.8548 17.9631C96.03 17.982 96.1839 18.008 96.3165 18.0412V20.7259C96.1744 20.6832 95.9779 20.6454 95.727 20.6122C95.476 20.5791 95.2464 20.5625 95.038 20.5625C94.593 20.5625 94.1952 20.6596 93.8449 20.8537C93.4992 21.0431 93.2246 21.3082 93.021 21.6491C92.8221 21.9901 92.7227 22.383 92.7227 22.8281V29H89.6971Z" fill="#0E1117"></path><path d="M56.9197 14V7.45455H59.3167C59.7812 7.45455 60.1658 7.53125 60.4705 7.68466C60.7752 7.83594 61.0032 8.04155 61.1545 8.30149C61.3057 8.5593 61.3814 8.85014 61.3814 9.17401C61.3814 9.44673 61.3313 9.67685 61.2312 9.86435C61.131 10.0497 60.9968 10.1989 60.8285 10.3118C60.6623 10.4226 60.479 10.5036 60.2787 10.5547V10.6186C60.4961 10.6293 60.7081 10.6996 60.9147 10.8295C61.1236 10.9574 61.2961 11.1396 61.4325 11.3761C61.5689 11.6126 61.637 11.9002 61.637 12.239C61.637 12.5735 61.5582 12.8739 61.4005 13.1403C61.245 13.4045 61.0042 13.6143 60.6782 13.7699C60.3522 13.9233 59.9357 14 59.4286 14H56.9197ZM57.9073 13.1531H59.3327C59.8057 13.1531 60.1445 13.0614 60.3491 12.8782C60.5536 12.695 60.6559 12.4659 60.6559 12.1911C60.6559 11.9844 60.6037 11.7947 60.4993 11.6222C60.3949 11.4496 60.2457 11.3121 60.0518 11.2099C59.8601 11.1076 59.6321 11.0565 59.3679 11.0565H57.9073V13.1531ZM57.9073 10.2862H59.2304C59.452 10.2862 59.6513 10.2436 59.8281 10.1584C60.0071 10.0732 60.1488 9.95384 60.2532 9.80043C60.3597 9.64489 60.413 9.46165 60.413 9.25071C60.413 8.98011 60.3182 8.7532 60.1285 8.56996C59.9389 8.38672 59.6481 8.2951 59.256 8.2951H57.9073V10.2862ZM65.8414 11.9641V9.09091H66.8002V14H65.8606V13.1499H65.8095C65.6965 13.4119 65.5154 13.6303 65.2661 13.805C65.019 13.9776 64.7111 14.0639 64.3425 14.0639C64.0271 14.0639 63.748 13.9947 63.5051 13.8562C63.2644 13.7156 63.0747 13.5078 62.9362 13.233C62.7999 12.9581 62.7317 12.6183 62.7317 12.2134V9.09091H63.6873V12.0984C63.6873 12.4329 63.78 12.6992 63.9654 12.8974C64.1507 13.0955 64.3915 13.1946 64.6877 13.1946C64.8666 13.1946 65.0445 13.1499 65.2214 13.0604C65.4004 12.9709 65.5484 12.8356 65.6656 12.6545C65.785 12.4734 65.8435 12.2433 65.8414 11.9641ZM68.0842 14V9.09091H69.0398V14H68.0842ZM68.5668 8.33345C68.4006 8.33345 68.2579 8.27805 68.1386 8.16726C68.0214 8.05433 67.9628 7.9201 67.9628 7.76456C67.9628 7.60689 68.0214 7.47266 68.1386 7.36186C68.2579 7.24893 68.4006 7.19247 68.5668 7.19247C68.733 7.19247 68.8747 7.24893 68.9919 7.36186C69.1112 7.47266 69.1709 7.60689 69.1709 7.76456C69.1709 7.9201 69.1112 8.05433 68.9919 8.16726C68.8747 8.27805 68.733 8.33345 68.5668 8.33345ZM71.281 7.45455V14H70.3254V7.45455H71.281ZM74.8582 9.09091V9.85795H72.1767V9.09091H74.8582ZM72.8958 7.91477H73.8514V12.5586C73.8514 12.744 73.8791 12.8835 73.9345 12.9773C73.9899 13.0689 74.0613 13.1317 74.1487 13.1658C74.2382 13.1978 74.3351 13.2138 74.4395 13.2138C74.5162 13.2138 74.5833 13.2085 74.6409 13.1978C74.6984 13.1871 74.7431 13.1786 74.7751 13.1722L74.9477 13.9616C74.8923 13.983 74.8135 14.0043 74.7112 14.0256C74.6089 14.049 74.4811 14.0618 74.3277 14.0639C74.0762 14.0682 73.8419 14.0234 73.6245 13.9297C73.4072 13.8359 73.2314 13.6911 73.0972 13.495C72.963 13.299 72.8958 13.0529 72.8958 12.7567V7.91477ZM79.3614 14L77.9168 9.09091H78.9044L79.8664 12.696H79.9143L80.8795 9.09091H81.8671L82.8259 12.68H82.8738L83.8294 9.09091H84.817L83.3756 14H82.4008L81.4037 10.4556H81.3301L80.333 14H79.3614ZM85.7239 14V9.09091H86.6795V14H85.7239ZM86.2065 8.33345C86.0403 8.33345 85.8975 8.27805 85.7782 8.16726C85.661 8.05433 85.6024 7.9201 85.6024 7.76456C85.6024 7.60689 85.661 7.47266 85.7782 7.36186C85.8975 7.24893 86.0403 7.19247 86.2065 7.19247C86.3727 7.19247 86.5144 7.24893 86.6315 7.36186C86.7509 7.47266 86.8105 7.60689 86.8105 7.76456C86.8105 7.9201 86.7509 8.05433 86.6315 8.16726C86.5144 8.27805 86.3727 8.33345 86.2065 8.33345ZM90.2566 9.09091V9.85795H87.5752V9.09091H90.2566ZM88.2943 7.91477H89.2499V12.5586C89.2499 12.744 89.2776 12.8835 89.333 12.9773C89.3884 13.0689 89.4598 13.1317 89.5471 13.1658C89.6366 13.1978 89.7336 13.2138 89.838 13.2138C89.9147 13.2138 89.9818 13.2085 90.0393 13.1978C90.0968 13.1871 90.1416 13.1786 90.1735 13.1722L90.3461 13.9616C90.2907 13.983 90.2119 14.0043 90.1096 14.0256C90.0073 14.049 89.8795 14.0618 89.7261 14.0639C89.4747 14.0682 89.2403 14.0234 89.023 13.9297C88.8056 13.8359 88.6299 13.6911 88.4956 13.495C88.3614 13.299 88.2943 13.0529 88.2943 12.7567V7.91477ZM92.3748 11.0852V14H91.4192V7.45455H92.362V9.88991H92.4227C92.5378 9.62571 92.7136 9.41584 92.9501 9.2603C93.1866 9.10476 93.4955 9.02699 93.8769 9.02699C94.2136 9.02699 94.5076 9.09624 94.759 9.23473C95.0126 9.37322 95.2086 9.5799 95.3471 9.85476C95.4877 10.1275 95.558 10.4684 95.558 10.8775V14H94.6024V10.9925C94.6024 10.6325 94.5097 10.3533 94.3244 10.1552C94.139 9.9549 93.8812 9.85476 93.5509 9.85476C93.3251 9.85476 93.1227 9.9027 92.9437 9.99858C92.7668 10.0945 92.6273 10.2351 92.525 10.4205C92.4249 10.6037 92.3748 10.8253 92.3748 11.0852Z" fill="#0E1117"></path></svg></span>
                <span><svg fill="none" viewBox="0 0 106 40" width="106px" height="40px"><rect rx="10" width="106" height="40" fill="#F5F5F5"></rect><path stroke-linejoin="round" d="M14.8115 26.0483C14.8115 26.0483 16.5768 27.9534 18.269 29.3852L21.4834 25.4226L22.5262 26.0483C23.9862 23.5455 22.3041 22.096 22.3041 22.096C24.1264 21.8356 23.7359 19.1022 23.7359 19.1022C22.8248 18.0608 22.6946 17.0195 22.8248 16.3687C22.9454 15.8288 22.754 15.2687 22.5644 14.9368L23.7359 13.6352L24.6139 13.7432C24.6139 11.6576 21.2503 10.6148 20.8598 10.6148C20.4693 10.6148 19.4404 11.4224 19.1801 12.3335L16.0561 12.5939C15.6458 8.11202 9.46732 13.0672 9.59749 14.3689L10.6403 13.9517L12.021 15.848C9.93835 17.41 9.59748 20.8342 9.59748 20.8342L11.3702 20.534C10.459 22.3563 10.7193 24.4389 10.7193 24.4389L12.3088 23.7541C12.439 25.4463 13.7687 27.2996 13.7687 27.2996L14.8115 26.0483Z" stroke="#0066B4" stroke-width="1.25"></path><path stroke-linejoin="round" d="M16.0558 12.5941C15.4049 12.5941 15.0197 13.1178 13.9769 14.3691C12.9341 15.6205 13.4524 15.4578 11.6301 16.1086" stroke="#0066B4" stroke-width="1.25"></path><path stroke-linejoin="round" d="M19.1799 12.3338C20.2213 12.5941 21.6531 13.3751 22.5642 14.9371" stroke="#0066B4" stroke-width="1.25"></path><path stroke-linejoin="round" d="M11.3701 20.5339C11.3701 20.5339 12.1511 19.1021 13.8433 18.3211C12.0209 19.1021 11.3701 20.5339 11.3701 20.5339Z" stroke="#0066B4" stroke-width="1.25"></path><path d="M21.5648 18.9821C21.5648 18.9821 20.0028 18.7218 20.2632 19.8933C20.5813 21.3251 22.7363 20.6743 22.6061 19.7631C22.6061 18.9821 21.5648 18.9821 21.5648 18.9821Z" fill="#0066B4"></path><path stroke-linejoin="round" d="M22.4341 22.0961C21.2626 22.0961 18.9826 22.2943 17.7312 21.46C19.1891 22.7114 23.3603 21.0429 22.9432 24.797C23.3603 23.1285 22.5281 22.5028 22.4341 22.0961Z" stroke="#0066B4" stroke-width="1.25"></path><path d="M48.6833 14.4545H51.7231V24.5966C51.7231 25.5341 51.5124 26.3485 51.091 27.0398C50.6743 27.7311 50.0943 28.2637 49.3509 28.6378C48.6075 29.0118 47.7434 29.1989 46.7586 29.1989C45.8826 29.1989 45.0872 29.045 44.3722 28.7372C43.662 28.4247 43.0985 27.9512 42.6819 27.3168C42.2652 26.6776 42.0592 25.875 42.064 24.9091H45.125C45.1345 25.2926 45.2126 25.6217 45.3594 25.8963C45.5109 26.1662 45.7169 26.3745 45.9773 26.5213C46.2425 26.6634 46.555 26.7344 46.9148 26.7344C47.2936 26.7344 47.6132 26.6539 47.8736 26.4929C48.1388 26.3272 48.34 26.0857 48.4773 25.7685C48.6146 25.4512 48.6833 25.0606 48.6833 24.5966V14.4545ZM57.3196 29.206C56.6236 29.206 56.0034 29.0852 55.4589 28.8438C54.9143 28.5975 54.4835 28.2353 54.1662 27.7571C53.8537 27.2741 53.6975 26.6728 53.6975 25.9531C53.6975 25.3471 53.8088 24.8381 54.0313 24.4261C54.2538 24.0142 54.5569 23.6828 54.9404 23.4318C55.3239 23.1809 55.7595 22.9915 56.2472 22.8636C56.7396 22.7358 57.2557 22.6458 57.7955 22.5938C58.43 22.5275 58.9413 22.4659 59.3296 22.4091C59.7178 22.3475 59.9996 22.2576 60.1748 22.1392C60.35 22.0208 60.4375 21.8456 60.4375 21.6136V21.571C60.4375 21.1212 60.2955 20.7732 60.0114 20.527C59.7321 20.2808 59.3343 20.1577 58.8182 20.1577C58.2737 20.1577 57.8405 20.2784 57.5185 20.5199C57.1965 20.7566 56.9835 21.0549 56.8793 21.4148L54.081 21.1875C54.2231 20.5246 54.5024 19.9517 54.9191 19.4688C55.3357 18.9811 55.8732 18.607 56.5313 18.3466C57.1942 18.0814 57.9612 17.9489 58.8324 17.9489C59.4385 17.9489 60.0185 18.0199 60.5725 18.1619C61.1312 18.304 61.626 18.5241 62.0569 18.8224C62.4925 19.1207 62.8357 19.5043 63.0867 19.973C63.3376 20.437 63.4631 20.9934 63.4631 21.642V29H60.5938V27.4872H60.5086C60.3334 27.8281 60.099 28.1288 59.8054 28.3892C59.5119 28.6449 59.1591 28.8461 58.7472 28.9929C58.3353 29.1349 57.8594 29.206 57.3196 29.206ZM58.1861 27.1179C58.6312 27.1179 59.0242 27.0303 59.3651 26.8551C59.706 26.6752 59.9735 26.4337 60.1677 26.1307C60.3618 25.8277 60.4589 25.4844 60.4589 25.1009V23.9432C60.3642 24.0047 60.2339 24.0616 60.0682 24.1136C59.9072 24.161 59.725 24.206 59.5214 24.2486C59.3178 24.2865 59.1142 24.322 58.9106 24.3551C58.707 24.3835 58.5223 24.4096 58.3566 24.4332C58.0015 24.4853 57.6913 24.5682 57.4262 24.6818C57.161 24.7955 56.9551 24.9493 56.8083 25.1435C56.6615 25.3329 56.5881 25.5696 56.5881 25.8537C56.5881 26.2656 56.7373 26.5805 57.0356 26.7983C57.3386 27.0114 57.7221 27.1179 58.1861 27.1179ZM74.8871 21.2017L72.1172 21.3722C72.0699 21.1354 71.9681 20.9223 71.8118 20.733C71.6556 20.5388 71.4496 20.3849 71.1939 20.2713C70.943 20.1529 70.6423 20.0938 70.2919 20.0938C69.8232 20.0938 69.4278 20.1932 69.1059 20.392C68.7839 20.5862 68.6229 20.8466 68.6229 21.1733C68.6229 21.4337 68.7271 21.6539 68.9354 21.8338C69.1437 22.0137 69.5012 22.1581 70.0079 22.267L71.9823 22.6648C73.0429 22.8826 73.8336 23.233 74.3544 23.7159C74.8753 24.1989 75.1357 24.8333 75.1357 25.6193C75.1357 26.3343 74.925 26.9616 74.5036 27.5014C74.0869 28.0412 73.514 28.4626 72.7848 28.7656C72.0604 29.0639 71.2247 29.2131 70.2777 29.2131C68.8336 29.2131 67.683 28.9124 66.826 28.3111C65.9738 27.705 65.4742 26.8812 65.3275 25.8395L68.3033 25.6832C68.3933 26.1236 68.6111 26.4598 68.9567 26.6918C69.3024 26.919 69.7451 27.0327 70.2848 27.0327C70.8151 27.0327 71.2413 26.9309 71.5633 26.7273C71.89 26.5189 72.0557 26.2514 72.0604 25.9247C72.0557 25.6501 71.9397 25.4252 71.7124 25.25C71.4851 25.0701 71.1348 24.9328 70.6613 24.8381L68.7721 24.4616C67.7067 24.2486 66.9136 23.8793 66.3928 23.3537C65.8767 22.8281 65.6187 22.1581 65.6187 21.3438C65.6187 20.643 65.808 20.0393 66.1868 19.5327C66.5704 19.026 67.1078 18.6354 67.7991 18.3608C68.4951 18.0862 69.3095 17.9489 70.2422 17.9489C71.6201 17.9489 72.7044 18.2401 73.4951 18.8224C74.2905 19.4048 74.7545 20.1979 74.8871 21.2017ZM77.0409 33.0909V18.0909H80.0238V19.9233H80.1588C80.2914 19.6297 80.4831 19.3314 80.7341 19.0284C80.9897 18.7206 81.3212 18.465 81.7284 18.2614C82.1403 18.053 82.6517 17.9489 83.2625 17.9489C84.0579 17.9489 84.7918 18.1572 85.4642 18.5739C86.1365 18.9858 86.6739 19.6084 87.0764 20.4418C87.4789 21.2704 87.6801 22.3097 87.6801 23.5597C87.6801 24.7765 87.4836 25.804 87.0906 26.642C86.7023 27.4754 86.172 28.1075 85.4997 28.5384C84.8321 28.9645 84.084 29.1776 83.2554 29.1776C82.6682 29.1776 82.1687 29.0805 81.7568 28.8864C81.3496 28.6922 81.0158 28.4484 80.7554 28.1548C80.495 27.8565 80.2961 27.5559 80.1588 27.2528H80.0665V33.0909H77.0409ZM80.0025 23.5455C80.0025 24.1941 80.0925 24.7599 80.2724 25.2429C80.4523 25.7259 80.7128 26.1023 81.0537 26.3722C81.3946 26.6373 81.8089 26.7699 82.2966 26.7699C82.789 26.7699 83.2057 26.6349 83.5466 26.3651C83.8875 26.0904 84.1455 25.7116 84.3207 25.2287C84.5006 24.741 84.5906 24.1799 84.5906 23.5455C84.5906 22.9157 84.503 22.3617 84.3278 21.8835C84.1526 21.4053 83.8946 21.0312 83.5537 20.7614C83.2128 20.4915 82.7937 20.3565 82.2966 20.3565C81.8041 20.3565 81.3875 20.4867 81.0466 20.7472C80.7104 21.0076 80.4523 21.3769 80.2724 21.8551C80.0925 22.3333 80.0025 22.8968 80.0025 23.5455ZM89.6971 29V18.0909H92.6304V19.9943H92.744C92.9429 19.3172 93.2767 18.8059 93.7454 18.4602C94.2142 18.1098 94.754 17.9347 95.3647 17.9347C95.5163 17.9347 95.6796 17.9441 95.8548 17.9631C96.03 17.982 96.1839 18.008 96.3165 18.0412V20.7259C96.1744 20.6832 95.9779 20.6454 95.727 20.6122C95.476 20.5791 95.2464 20.5625 95.038 20.5625C94.593 20.5625 94.1952 20.6596 93.8449 20.8537C93.4992 21.0431 93.2246 21.3082 93.021 21.6491C92.8221 21.9901 92.7227 22.383 92.7227 22.8281V29H89.6971Z" fill="#0E1117"></path><path d="M56.9197 14V7.45455H59.3167C59.7812 7.45455 60.1658 7.53125 60.4705 7.68466C60.7752 7.83594 61.0032 8.04155 61.1545 8.30149C61.3057 8.5593 61.3814 8.85014 61.3814 9.17401C61.3814 9.44673 61.3313 9.67685 61.2312 9.86435C61.131 10.0497 60.9968 10.1989 60.8285 10.3118C60.6623 10.4226 60.479 10.5036 60.2787 10.5547V10.6186C60.4961 10.6293 60.7081 10.6996 60.9147 10.8295C61.1236 10.9574 61.2961 11.1396 61.4325 11.3761C61.5689 11.6126 61.637 11.9002 61.637 12.239C61.637 12.5735 61.5582 12.8739 61.4005 13.1403C61.245 13.4045 61.0042 13.6143 60.6782 13.7699C60.3522 13.9233 59.9357 14 59.4286 14H56.9197ZM57.9073 13.1531H59.3327C59.8057 13.1531 60.1445 13.0614 60.3491 12.8782C60.5536 12.695 60.6559 12.4659 60.6559 12.1911C60.6559 11.9844 60.6037 11.7947 60.4993 11.6222C60.3949 11.4496 60.2457 11.3121 60.0518 11.2099C59.8601 11.1076 59.6321 11.0565 59.3679 11.0565H57.9073V13.1531ZM57.9073 10.2862H59.2304C59.452 10.2862 59.6513 10.2436 59.8281 10.1584C60.0071 10.0732 60.1488 9.95384 60.2532 9.80043C60.3597 9.64489 60.413 9.46165 60.413 9.25071C60.413 8.98011 60.3182 8.7532 60.1285 8.56996C59.9389 8.38672 59.6481 8.2951 59.256 8.2951H57.9073V10.2862ZM65.8414 11.9641V9.09091H66.8002V14H65.8606V13.1499H65.8095C65.6965 13.4119 65.5154 13.6303 65.2661 13.805C65.019 13.9776 64.7111 14.0639 64.3425 14.0639C64.0271 14.0639 63.748 13.9947 63.5051 13.8562C63.2644 13.7156 63.0747 13.5078 62.9362 13.233C62.7999 12.9581 62.7317 12.6183 62.7317 12.2134V9.09091H63.6873V12.0984C63.6873 12.4329 63.78 12.6992 63.9654 12.8974C64.1507 13.0955 64.3915 13.1946 64.6877 13.1946C64.8666 13.1946 65.0445 13.1499 65.2214 13.0604C65.4004 12.9709 65.5484 12.8356 65.6656 12.6545C65.785 12.4734 65.8435 12.2433 65.8414 11.9641ZM68.0842 14V9.09091H69.0398V14H68.0842ZM68.5668 8.33345C68.4006 8.33345 68.2579 8.27805 68.1386 8.16726C68.0214 8.05433 67.9628 7.9201 67.9628 7.76456C67.9628 7.60689 68.0214 7.47266 68.1386 7.36186C68.2579 7.24893 68.4006 7.19247 68.5668 7.19247C68.733 7.19247 68.8747 7.24893 68.9919 7.36186C69.1112 7.47266 69.1709 7.60689 69.1709 7.76456C69.1709 7.9201 69.1112 8.05433 68.9919 8.16726C68.8747 8.27805 68.733 8.33345 68.5668 8.33345ZM71.281 7.45455V14H70.3254V7.45455H71.281ZM74.8582 9.09091V9.85795H72.1767V9.09091H74.8582ZM72.8958 7.91477H73.8514V12.5586C73.8514 12.744 73.8791 12.8835 73.9345 12.9773C73.9899 13.0689 74.0613 13.1317 74.1487 13.1658C74.2382 13.1978 74.3351 13.2138 74.4395 13.2138C74.5162 13.2138 74.5833 13.2085 74.6409 13.1978C74.6984 13.1871 74.7431 13.1786 74.7751 13.1722L74.9477 13.9616C74.8923 13.983 74.8135 14.0043 74.7112 14.0256C74.6089 14.049 74.4811 14.0618 74.3277 14.0639C74.0762 14.0682 73.8419 14.0234 73.6245 13.9297C73.4072 13.8359 73.2314 13.6911 73.0972 13.495C72.963 13.299 72.8958 13.0529 72.8958 12.7567V7.91477ZM79.3614 14L77.9168 9.09091H78.9044L79.8664 12.696H79.9143L80.8795 9.09091H81.8671L82.8259 12.68H82.8738L83.8294 9.09091H84.817L83.3756 14H82.4008L81.4037 10.4556H81.3301L80.333 14H79.3614ZM85.7239 14V9.09091H86.6795V14H85.7239ZM86.2065 8.33345C86.0403 8.33345 85.8975 8.27805 85.7782 8.16726C85.661 8.05433 85.6024 7.9201 85.6024 7.76456C85.6024 7.60689 85.661 7.47266 85.7782 7.36186C85.8975 7.24893 86.0403 7.19247 86.2065 7.19247C86.3727 7.19247 86.5144 7.24893 86.6315 7.36186C86.7509 7.47266 86.8105 7.60689 86.8105 7.76456C86.8105 7.9201 86.7509 8.05433 86.6315 8.16726C86.5144 8.27805 86.3727 8.33345 86.2065 8.33345ZM90.2566 9.09091V9.85795H87.5752V9.09091H90.2566ZM88.2943 7.91477H89.2499V12.5586C89.2499 12.744 89.2776 12.8835 89.333 12.9773C89.3884 13.0689 89.4598 13.1317 89.5471 13.1658C89.6366 13.1978 89.7336 13.2138 89.838 13.2138C89.9147 13.2138 89.9818 13.2085 90.0393 13.1978C90.0968 13.1871 90.1416 13.1786 90.1735 13.1722L90.3461 13.9616C90.2907 13.983 90.2119 14.0043 90.1096 14.0256C90.0073 14.049 89.8795 14.0618 89.7261 14.0639C89.4747 14.0682 89.2403 14.0234 89.023 13.9297C88.8056 13.8359 88.6299 13.6911 88.4956 13.495C88.3614 13.299 88.2943 13.0529 88.2943 12.7567V7.91477ZM92.3748 11.0852V14H91.4192V7.45455H92.362V9.88991H92.4227C92.5378 9.62571 92.7136 9.41584 92.9501 9.2603C93.1866 9.10476 93.4955 9.02699 93.8769 9.02699C94.2136 9.02699 94.5076 9.09624 94.759 9.23473C95.0126 9.37322 95.2086 9.5799 95.3471 9.85476C95.4877 10.1275 95.558 10.4684 95.558 10.8775V14H94.6024V10.9925C94.6024 10.6325 94.5097 10.3533 94.3244 10.1552C94.139 9.9549 93.8812 9.85476 93.5509 9.85476C93.3251 9.85476 93.1227 9.9027 92.9437 9.99858C92.7668 10.0945 92.6273 10.2351 92.525 10.4205C92.4249 10.6037 92.3748 10.8253 92.3748 11.0852Z" fill="#0E1117"></path></svg></span>
              </a>
            </div>
          </div>
        </div>
      </footer>
    </div>
    <script>
    const sidenav = document.getElementById('sidenav');
    if (sidenav) {
      const activeEntries = sidenav.querySelectorAll('.nav-link.active');
      if (activeEntries.length > 0) {
        const activeEntry = activeEntries[activeEntries.length - 1];
        
        sidenav.scrollTo({
          top: activeEntry.offsetTop - window.innerHeight / 3,
        });
      }
    }
    </script>
          
  </body>
</html>
