<!DOCTYPE html>
<html lang="zh" dir="ltr">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta content="zh" http-equiv="Content-Language"/>
    <title>Animation and motion widgets</title>
    <meta name="description" content="A catalog of Flutter's animation and motion widgets. Bring animations to your app."/>
    <link href="https://docs.flutter.cn/ui/widgets/animation" rel="canonical"/>
    <link sizes="64x64" href="/assets/images/cn/flutter-icon.png" rel="icon"/>
    <link href="/assets/images/cn/flutter-320px.png" rel="apple-touch-icon"/>
    <meta name="twitter:card" content="summary"/>
    <meta name="twitter:site" content="@flutterchina"/>
    <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 name="twitter:image" content="https://docs.flutter.cn/assets/images/cn/flutter-320px.png"/>
    <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="https://docs.flutter.cn/ui/widgets/animation"/>
    <meta property="og:image" content="https://docs.flutter.cn/assets/images/cn/flutter-320px.png"/>
    <link href="https://fonts.googleapis.cn" rel="preconnect"/>
    <link crossorigin href="https://fonts.gstatic.cn" rel="preconnect"/>
    <link href="https://files.flutter-io.cn" rel="preconnect"/>
    <link href="https://files.flutter-io.cn/fonts/flutter/fonts.css" rel="stylesheet"/>
    <link href="https://files.flutter-io.cn/fonts/material-icons/material-icons-symbols-outlined.css" rel="stylesheet"/>
    <link href="/assets/css/main.css?hash=jPMoT09o0tFe" rel="stylesheet"/>
    <link title="Markdown" href="/ui/widgets/animation.md" rel="alternate" type="text/markdown"/>
    <script type="application/ld+json">
      {"@context":"https://schema.org","@graph":[{"@type":"WebSite","@id":"https://docs.flutter.cn/#website","url":"https://docs.flutter.cn/","name":"Flutter 中文文档","description":"用于学习 Flutter 并通过其构建多平台应用的官方文档， 其中包括指南、教程、示例和参考资料。","inLanguage":"en"},{"@type":"WebPage","@id":"https://docs.flutter.cn/ui/widgets/animation#webpage","url":"https://docs.flutter.cn/ui/widgets/animation","name":"Animation and motion widgets","description":"A catalog of Flutter's animation and motion widgets. Bring animations to your app.","inLanguage":"en","dateModified":"2026-05-31T17:25:01.000Z","isPartOf":{"@id":"https://docs.flutter.cn/#website"},"breadcrumb":{"@id":"https://docs.flutter.cn/ui/widgets/animation#breadcrumb"}},{"@type":"BreadcrumbList","@id":"https://docs.flutter.cn/ui/widgets/animation#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"UI","item":"https://docs.flutter.cn/ui"},{"@type":"ListItem","position":2,"name":"核心 Widget","item":"https://docs.flutter.cn/ui/widgets"},{"@type":"ListItem","position":3,"name":"Animation and motion","item":"https://docs.flutter.cn/ui/widgets/animation"}]}]}
    </script>
    <script type="module" integrity="sha256-dSKwIYLvKdlkLGLp9ZRLJilBuGFSM5beizYOSvK1LeQ" crossorigin="anonymous" referrerpolicy="no-referrer" src="https://files.flutter-io.cn/static/deps/lite-youtube/1.8.1/lite-youtube.js"></script>
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-HPSFTRXK91"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-HPSFTRXK91');
    </script>
    <script>
      var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?c50919183c6e001b47301f55de682929";
        var s = document.getElementsByTagName("script")[0]; 
        s.parentNode.insertBefore(hm, s);
      })();
    </script>
    
    <script type="speculationrules">{"prefetch":[{"where":{"href_matches":"/*"},"eagerness":"moderate"}],"prerender":[{"where":{"and":[{"href_matches":"/*"},{"not":{"selector_matches":".no-prerender"}}]},"eagerness":"conservative"}]}</script>
    <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=G-HPSFTRXK91" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <a id="skip-to-main" class="filled-button" tabindex="1" href="#site-content-title">跳转至正文</a>
    <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 CN logo" src="/assets/images/cn/flutter-cn-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="/">指南</a></li>
          <li><a class="nav-link text-button" href="/learn/pathway">学习</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-io.cn">API 参考</a>
          </li>
          <li><a class="nav-link text-button" href="/about">关于中文文档</a></li>
        </ul>
        <div class="navbar-contents">
          <form id="header-search" action="/search/">
            <input id="q" class="search-field" autocomplete="off" placeholder="搜索" aria-label="搜索" type="search" name="q"/>
          </form>
          <a id="fallback-search-button" class="icon-button" aria-label="导航至 docs.flutter.cn 搜索页。" title="导航至 docs.flutter.cn 搜索页。" href="/search"><span class="material-symbols" aria-hidden="true" translate="no">search</span></a>
          <!--@site_shared: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>浅色</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>深色</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>跟随系统</span></button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!--/@site_shared:theme_switcher-->
          <!--@site_shared:site_switcher data={"isFlutter":true}-->
          <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="导航至 Flutter 网站" aria-label="导航至 Flutter 网站" href="https://flutter.cn"><img alt="Flutter logo" width="28" src="/assets/images/cn/flutter-cn-logo-default.svg"/><span class="name" translate="no">Flutter</span></a>
                  </li>
                  <li role="presentation">
                    <a class="site-wordmark current-site" role="menuitem" title="导航至 Flutter Docs 网站" aria-label="导航至 Flutter Docs 网站" href="/"><img alt="Flutter logo" width="28" src="/assets/images/cn/flutter-cn-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="导航至 Flutter API 网站" aria-label="导航至 Flutter API 网站" href="https://api.flutter-io.cn"><img alt="Flutter logo" width="28" src="/assets/images/cn/flutter-cn-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="导航至 Flutter Blog 网站" aria-label="导航至 Flutter Blog 网站" href="https://blog.flutter.dev"><img alt="Flutter logo" width="28" src="/assets/images/cn/flutter-cn-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="导航至 Dart 网站" aria-label="导航至 Dart 网站" href="https://dart.cn"><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="导航至 DartPad 网站" aria-label="导航至 DartPad 网站" href="https://dartpad.cn"><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="导航至 pub.dev 网站" aria-label="导航至 pub.dev 网站" href="https://pub-web.flutter-io.cn"><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_shared:site_switcher-->
          <a id="call-to-action" class="filled-button" href="/learn/pathway">开始使用</a>
          <!--@site_shared: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>
          <!--/@site_shared: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>指南</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>学习</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-io.cn"><span class="material-symbols" aria-hidden="true" translate="no">api</span>API 参考</a>
            </li>
            <li class="nav-item">
              <a class="nav-button" href="/about"><span class="material-symbols" aria-hidden="true" translate="no">favorite</span>关于中文文档</a>
            </li>
            <li aria-hidden="true"><div class="sidenav-divider"></div></li>
          </ul>
          <nav>
            <ul>
              <li class="nav-header">开始使用</li>
              <li class="nav-item"><a class="nav-link" href="/install/quick"><div><span>快速入门</span></div></a></li>
              <li class="nav-item"><a class="nav-link" href="/install/custom"><div><span>自定义安装</span></div></a></li>
              <li class="nav-item"><a class="nav-link" href="/learn"><div><span>学习 Flutter</span></div></a></li>
              <li aria-hidden="true"><div class="sidenav-divider"></div></li>
              <li class="nav-header">用户界面</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>概览</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 目录</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>概览</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>设计系统</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>基础 Widget</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>布局</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>概览</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/layout/tutorial"><div><span>构建布局</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>列表 &amp; 网格</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>构建与使用列表</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/lists/horizontal-list"><div><span>构建一个横向列表</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/lists/grid-lists"><div><span>构建一个网格视图</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/lists/mixed-list"><div><span>构建包含不同类型元素的列表</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/lists/spaced-items"><div><span>构建元素之间包含间隔的列表</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/lists/long-lists"><div><span>处理长列表</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>滚动</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>概览</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/layout/scrolling/slivers"><div><span>使用 Sliver 实现各种酷炫滚动效果</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/lists/floating-app-bar"><div><span>在列表开头添加一个浮动的顶栏</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/effects/parallax-scrolling"><div><span>构建一个平行错位滚动的效果</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>自适应 &amp; 响应式设计</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>概览</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/adaptive-responsive/general"><div><span>通用方法</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>大屏幕 &amp; 可折叠设备</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/adaptive-responsive/input"><div><span>用户输入 &amp; 无障碍 (A11y)</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/adaptive-responsive/capabilities"><div><span>功能 &amp; 政策</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/adaptive-responsive/platform-adaptations"><div><span>不同平台的自动适配</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/adaptive-responsive/best-practices"><div><span>最佳实践</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/adaptive-responsive/more-info"><div><span>其他资源</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>设计 &amp; 主题</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>共享主题样式</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/design/material"><div><span>Material 设计</span></div></a></li><li class="nav-item"><a class="nav-link" href="/release/breaking-changes/material-3-migration"><div><span>迁移至 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>文字</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>字体 &amp; 版式</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/design/fonts"><div><span>使用自定义字体</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/design/package-fonts"><div><span>将字体从 package 中对外暴露</span></div></a></li><li class="nav-item"><a class="nav-link" rel="noopener" href="https://pub.flutter-io.cn/packages/google_fonts" target="_blank"><div><span>Google 字体 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>自定义图形</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>使用自定义的着色器</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>交互</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>为你的应用添加交互</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>手势</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>概览</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/gestures/handling-taps"><div><span>处理点击</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/interactivity/gestures/drag-outside"><div><span>跨应用拖放对象</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/effects/drag-a-widget"><div><span>拖动界面元素</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/gestures/ripples"><div><span>添加 Material 风格的水波纹</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/gestures/dismissible"><div><span>实现滑动取消</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>输入 &amp; 表单</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>创建输入框并且调整样式</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/forms/retrieve-input"><div><span>读取输入框的内容</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/forms/text-field-changes"><div><span>处理输入框的内容变动</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/forms/focus"><div><span>管理输入框之间的焦点</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/forms/validation"><div><span>构建具有校验功能的表单</span></div></a></li></ul></li><li class="nav-item"><a class="nav-link" href="/cookbook/design/snackbars"><div><span>展示 SnackBar</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/interactivity/actions-and-shortcuts"><div><span>实现快捷方式和捷径</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/interactivity/focus"><div><span>管理键盘焦点</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>资源 &amp; 媒体</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>添加资源和图片</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/images/network-image"><div><span>加载网络图片</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/images/fading-in-images"><div><span>从占位图过渡到图片</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/plugins/play-video"><div><span>播放及暂停视频</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/assets/asset-transformation"><div><span>在构建时转换资源</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>导航 &amp; 路由</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>概览</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/design/tabs"><div><span>在应用中添加 Tab (标签页切换) 导航</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/navigation/navigation-basics"><div><span>导航至新页面并返回</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/navigation/passing-data"><div><span>传递数据到新页面</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/navigation/returning-data"><div><span>从新页面返回数据</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/design/drawer"><div><span>在页面上添加抽屉</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/design/cupertino-sheets"><div><span>显示 Cupertino Sheet</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/navigation/deep-linking"><div><span>设置 Deeplink</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/navigation/set-up-app-links"><div><span>设置 Android Deeplink</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/navigation/set-up-universal-links"><div><span>设置 iOS Universal Link</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/navigation/url-strategies"><div><span>设置 Web 的 URL 策略</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>动画 &amp; 过渡</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>概览</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/animations/tutorial"><div><span>教程</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/animations/implicit-animations"><div><span>隐式动画</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/animation/animated-container"><div><span>过渡 Container 的属性</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/animation/opacity-animation"><div><span>渐入渐出 widget</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/animations/hero-animations"><div><span>Hero（跨页面共享元素）动画</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/animation/page-route-animation"><div><span>页面转场动画</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/animation/physics-simulation"><div><span>模拟物理特性动画</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/animations/staggered-animations"><div><span>交错动画</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/effects/staggered-menu-animation"><div><span>构建菜单的交错动画</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/animations/overview"><div><span>API 概览</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>无障碍 (a11y)</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>概览</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/accessibility/ui-design-and-styling"><div><span>UI 设计 &amp; 样式</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/accessibility/assistive-technologies"><div><span>辅助技术</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/accessibility/accessibility-testing"><div><span>测试无障碍</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/accessibility/web-accessibility"><div><span>Web 无障碍</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>国际化 (i18n)</span></div></a>
              </li>
              <li aria-hidden="true"><div class="sidenav-divider"></div></li>
              <li class="nav-header">界面以外的开发</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>数据调用 &amp; 后端</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>状态管理</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>概览</span></div></a></li><li class="nav-item"><a class="nav-link" href="/data-and-backend/state-mgmt/declarative"><div><span>从声明式的角度思考</span></div></a></li><li class="nav-item"><a class="nav-link" href="/data-and-backend/state-mgmt/ephemeral-vs-app"><div><span>短暂状态 &amp; 持久状态</span></div></a></li><li class="nav-item"><a class="nav-link" href="/data-and-backend/state-mgmt/simple"><div><span>简单的状态管理</span></div></a></li><li class="nav-item"><a class="nav-link" href="/data-and-backend/state-mgmt/options"><div><span>状态管理参考</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>网络 &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>概览</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/networking/fetch-data"><div><span>从网络上获取数据</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/networking/authenticated-requests"><div><span>构建需要认证的请求</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/networking/send-data"><div><span>发送数据到服务器</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/networking/update-data"><div><span>更新网络上的数据</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/networking/delete-data"><div><span>删除网络上的数据</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/networking/web-sockets"><div><span>WebSocket 通信</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>序列化</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 序列化</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/networking/background-parsing"><div><span>在后台处理 JSON 解析</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>持久化</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>将键值对 (Key-Value) 数据存储在硬盘上</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/persistence/reading-writing-files"><div><span>读写文件</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/persistence/sqlite"><div><span>利用 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>概览</span></div></a></li><li class="nav-item"><a class="nav-link" rel="noopener" href="https://firebase.google.cn/docs/flutter/setup" target="_blank"><div><span>将 Firebase 添加到 Flutter 应用中</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>应用架构</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>概览</span></div></a></li><li class="nav-item"><a class="nav-link" href="/app-architecture/concepts"><div><span>架构设计理念</span></div></a></li><li class="nav-item"><a class="nav-link" href="/app-architecture/guide"><div><span>应用架构指南</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>架构实践案例</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>概览</span></div></a></li><li class="nav-item"><a class="nav-link" href="/app-architecture/case-study/ui-layer"><div><span>UI 层</span></div></a></li><li class="nav-item"><a class="nav-link" href="/app-architecture/case-study/data-layer"><div><span>数据层</span></div></a></li><li class="nav-item"><a class="nav-link" href="/app-architecture/case-study/dependency-injection"><div><span>依赖注入</span></div></a></li><li class="nav-item"><a class="nav-link" href="/app-architecture/case-study/testing"><div><span>测试各层级</span></div></a></li></ul></li><li class="nav-item"><a class="nav-link" href="/app-architecture/recommendations"><div><span>架构建议</span></div></a></li><li class="nav-item"><a class="nav-link" href="/app-architecture/design-patterns"><div><span>设计模式</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>平台集成</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>支持的平台</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/desktop"><div><span>构建桌面端应用</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/platform-channels"><div><span>撰写平台代码 (插件编写实现)</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/bind-native-code"><div><span>绑定到原生代码</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>配置 Android 开发</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/android/splash-screen"><div><span>添加闪屏页</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/android/predictive-back"><div><span>添加预测性返回</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/android/platform-views"><div><span>托管 Android 原生视图</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/android/call-jetpack-apis"><div><span>调用 JetPack API</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/android/compose-activity"><div><span>启动 Jetpack Compose Activity</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/android/restore-state-android"><div><span>在 Android 上恢复状态</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/android/chromeos"><div><span>构建适合 ChromeOS 的 Android 应用</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/android/sensitive-content"><div><span>保护应用的敏感内容</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>配置 iOS 开发</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/ios-latest"><div><span>最新版 iOS 上的 Flutter</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/install-ios"><div><span>将 iOS 添加为构建目标</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/ios-latest"><div><span>最新 iOS 版本上的 Flutter</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/apple-frameworks"><div><span>使用 Apple 的系统库</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/launch-screen"><div><span>添加启动页</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/ios-app-clip"><div><span>添加 iOS App Clip 支持</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/app-extensions"><div><span>添加 iOS App 扩展</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/platform-views"><div><span>托管 iOS 原生视图</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/ios-debugging"><div><span>iOS 平台调试</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/restore-state-ios"><div><span>在 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>配置 Linux 开发</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/linux/building"><div><span>构建 Linux 桌面软件</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>配置 macOS 开发</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/macos/building"><div><span>构建 macOS 应用</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/macos/platform-views"><div><span>托管 macOS 原生视图</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>Flutter 的 Web 支持</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/setup"><div><span>配置 Web 开发</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/web-dev-config-file"><div><span>设置配置文件</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/building"><div><span>构建 Web 应用</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/wasm"><div><span>编译为 WebAssembly</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/initialization"><div><span>自定义 Web 应用初始化</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/embedding-flutter-web"><div><span>将 Flutter 添加到任意 Web 应用中</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/web-content-in-flutter"><div><span>Flutter 中的 Web 内容</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/web-images"><div><span>在 Web 里显示图片</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/faq"><div><span>Web 平台常见问题</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>配置 Windows 开发</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/windows/building"><div><span>构建 Windows 桌面软件</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>Package 和插件</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>使用 package 和插件</span></div></a></li><li class="nav-item"><a class="nav-link" href="/packages-and-plugins/dependency-management"><div><span>Package 依赖管理</span></div></a></li><li class="nav-item"><a class="nav-link" href="/packages-and-plugins/developing-packages"><div><span>开发 Package 和插件</span></div></a></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-23-4" role="button" aria-expanded="false" aria-controls="sidenav-23-4"><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-4" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/packages-and-plugins/swift-package-manager/for-app-developers"><div><span>针对应用开发者</span></div></a></li><li class="nav-item"><a class="nav-link" href="/packages-and-plugins/swift-package-manager/for-plugin-authors"><div><span>针对插件作者</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.flutter-io.cn/flutter" target="_blank"><div><span>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-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>测试和调试</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">测试</li><li class="nav-item"><a class="nav-link" href="/testing/overview"><div><span>概览</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>单元测试</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>概览</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/testing/unit/mocking"><div><span>模拟依赖</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 测试</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>概览</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/testing/widget/finders"><div><span>寻找 widgets</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/testing/widget/scrolling"><div><span>模拟滚动</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/testing/widget/tap-drag"><div><span>模拟用户操作</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>集成测试</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>概览</span></div></a></li><li class="nav-item"><a class="nav-link" href="/testing/integration-tests"><div><span>编写并运行集成测试</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/testing/integration/profiling"><div><span>衡量集成测试的性能指标</span></div></a></li></ul></li><li class="nav-item"><a class="nav-link" href="/testing/testing-plugins"><div><span>测试插件</span></div></a></li><li class="nav-item"><a class="nav-link" href="/testing/plugins-in-tests"><div><span>在测试中处理插件代码</span></div></a></li><li class="nav-header">调试</li><li class="nav-item"><a class="nav-link" href="/testing/debugging"><div><span>调试工具</span></div></a></li><li class="nav-item"><a class="nav-link" href="/testing/code-debugging"><div><span>通过代码调试应用</span></div></a></li><li class="nav-item"><a class="nav-link" href="/testing/native-debugging"><div><span>使用原生语言的调试</span></div></a></li><li class="nav-item"><a class="nav-link" href="/testing/common-errors"><div><span>常见的 Flutter 错误</span></div></a></li><li class="nav-item"><a class="nav-link" href="/testing/errors"><div><span>处理错误</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/maintenance/error-reporting"><div><span>将错误上报到收集服务</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>性能优化</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>概览</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>性能最佳实践</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/app-size"><div><span>应用大小</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/deferred-components"><div><span>延迟加载组件</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/rendering-performance"><div><span>渲染性能</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/ui-performance"><div><span>性能分析</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/web-performance"><div><span>Web 性能分析</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/metrics"><div><span>性能指标</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/isolates"><div><span>并发与隔离</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/faq"><div><span>性能常见问题和回答</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/appendix"><div><span>附录</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>打包部署</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>混淆 Dart 代码</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/flavors"><div><span>为 Android 配置 flavor</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/flavors-ios"><div><span>为 iOS 和 macOS 配置 flavor</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/android"><div><span>构建和发布为 Android 应用</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/ios"><div><span>构建和发布为 iOS 应用</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/macos"><div><span>构建和发布为 macOS 应用</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/linux"><div><span>构建和发布为 Linux 应用</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/windows"><div><span>构建和发布为 Windows 应用</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/web"><div><span>构建和发布为 Web 应用</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/cd"><div><span>持续部署</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>将 Flutter 添加到现有应用</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>概览</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>添加到现有 Android 应用</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>工程设定</span></div></a></li><li class="nav-item"><a class="nav-link" href="/add-to-app/android/add-flutter-screen"><div><span>添加单个 Flutter 页面</span></div></a></li><li class="nav-item"><a class="nav-link" href="/add-to-app/android/add-flutter-fragment"><div><span>添加一个 Flutter Fragment</span></div></a></li><li class="nav-item"><a class="nav-link" href="/add-to-app/android/add-flutter-view"><div><span>添加 Flutter 视图</span></div></a></li><li class="nav-item"><a class="nav-link" href="/add-to-app/android/plugin-setup"><div><span>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>添加到现有 iOS 应用</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>工程设定</span></div></a></li><li class="nav-item"><a class="nav-link" href="/add-to-app/ios/add-flutter-screen"><div><span>添加单个 Flutter 页面</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-27-4" role="button" aria-expanded="false" aria-controls="sidenav-27-4"><div><span>添加到现有 macOS 应用</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-27-4" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/add-to-app/macos/project-setup"><div><span>工程设定</span></div></a></li><li class="nav-item"><a class="nav-link" href="/add-to-app/macos/add-flutter-screen"><div><span>添加单个 Flutter 页面</span></div></a></li></ul></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/embedding-flutter-web"><div><span>添加到现有 Web 应用</span></div></a></li><li class="nav-item"><a class="nav-link" href="/add-to-app/debugging"><div><span>调试内嵌的 Flutter module</span></div></a></li><li class="nav-item"><a class="nav-link" href="/add-to-app/multiple-flutters"><div><span>多个 Flutter 实例</span></div></a></li><li class="nav-item"><a class="nav-link" href="/add-to-app/performance"><div><span>加载顺序和性能</span></div></a></li></ul>
              </li>
              <li aria-hidden="true"><div class="sidenav-divider"></div></li>
              <li class="nav-header">资源</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>工具 &amp; 代码编辑器</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"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-30-3" role="button" aria-expanded="false" aria-controls="sidenav-30-3"><div><span>DevTools</span></div><span class="material-symbols expander" aria-hidden="true" translate="no">expand_more</span></button><ul id="sidenav-30-3" class="nav collapse"><li class="nav-item"><a class="nav-link" href="/tools/devtools"><div><span>概览</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/android-studio"><div><span>在 Android Studio &amp; IntelliJ 中运行 DevTools</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/vscode"><div><span>在 VS Code 中运行 DevTools</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/cli"><div><span>利用终端命令运行 DevTools</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>旧版 Flutter inspector</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/performance"><div><span>性能视图</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/cpu-profiler"><div><span>CPU 性能视图</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/memory"><div><span>内存视图</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/console"><div><span>调试控制条视图</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/network"><div><span>网络视图</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>日志视图</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/app-size"><div><span>应用体积工具</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/extensions"><div><span>DevTools 扩展工具</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/custom-tool"><div><span>构建自定义工具</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/deep-links"><div><span>验证深层链接 (Deep Link)</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/release-notes"><div><span>发布日志</span></div></a></li></ul></li><li class="nav-item"><a class="nav-link" href="/tools/widget-previewer"><div><span>Flutter Widget 预览器</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/property-editor"><div><span>Flutter 属性编辑器</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/sdk"><div><span>SDK 概览</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/pubspec"><div><span>Flutter pubspec 选项</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/flutter-fix"><div><span>自动修复</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/formatting"><div><span>代码格式化</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 相关概念</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>Flutter 架构概览</span></div></a></li><li class="nav-item"><a class="nav-link" href="/resources/inside-flutter"><div><span>Flutter 工作原理</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/layout/constraints"><div><span>理解布局约束</span></div></a></li><li class="nav-item"><a class="nav-link" href="/testing/build-modes"><div><span>Flutter 构建模式</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/hot-reload"><div><span>热重载</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>应用解决方案</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>使用 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>概览</span></div></a></li><li class="nav-item"><a class="nav-link" rel="noopener" href="https://firebase.google.cn/docs/flutter" target="_blank"><div><span>探索如何将 Firebase 用于 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.bilibili.com/video/BV1eBkoYaE8i/" target="_blank"><div><span>了解如何将 Firebase 用于 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.cn/codelabs/firebase-auth-in-flutter-apps" target="_blank"><div><span>使用 FirebaseUI 向 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.cn/codelabs/firebase-get-to-know-web" target="_blank"><div><span>了解如何将 Firebase 用于 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>构建多平台游戏</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>概览</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/games/achievements-leaderboard"><div><span>添加成就和排行榜</span></div></a></li><li class="nav-item"><a class="nav-link" rel="noopener" href="https://firebase.google.cn/codelabs/build-leaderboards-with-firestore#0" target="_blank"><div><span>使用 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>添加广告</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/games/firestore-multiplayer"><div><span>添加多人游戏支持</span></div></a></li><li class="nav-item"><a class="nav-link" rel="noopener" href="https://codelabs.developers.google.cn/codelabs/flutter-in-app-purchases" target="_blank"><div><span>添加应用内购功能</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.cn/codelabs/firebase-auth-in-flutter-apps" target="_blank"><div><span>添加用户身份验证</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.cn/docs/crashlytics/get-started?platform=flutter" target="_blank"><div><span>使用 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.cn/codelabs/flutter-flame-brick-breaker" target="_blank"><div><span>Flutter Flame 入门</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>让你的应用盈利</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>广告集成</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>广告概览</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/plugins/google-mobile-ads"><div><span>添加广告</span></div></a></li><li class="nav-item"><a class="nav-link" rel="noopener" href="https://codelabs.developers.google.cn/codelabs/admob-ads-in-flutter" target="_blank"><div><span>在 Flutter 应用中添加 AdMob 广告</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.cn/codelabs/admob-inline-ads-in-flutter" target="_blank"><div><span>添加 AdMob 横幅广告和原生内嵌广告</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>集成多媒体广告（视频）</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.cn/admob/flutter/mediation" target="_blank"><div><span>Google AdMob 中介广告变现</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.flutter-io.cn/packages/interactive_media_ads" target="_blank"><div><span>交互式媒体广告插件</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>支付支持</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>支付概览</span></div></a></li><li class="nav-item"><a class="nav-link" rel="noopener" href="https://pub-web.flutter-io.cn/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.cn/codelabs/flutter-in-app-purchases" target="_blank"><div><span>添加应用内购功能</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>地图集成</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.cn/codelabs/google-maps-in-flutter" target="_blank"><div><span>为应用程序添加 Google 地图</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.cn/maps/flutter-package" target="_blank"><div><span>Google 地图 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>拥有其他平台开发经验？</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>给 Android 开发者的 Flutter 指南</span></div></a></li><li class="nav-item"><a class="nav-link" href="/flutter-for/compose-devs"><div><span>给 Android Jetpack Compose 开发者的 Flutter 指南</span></div></a></li><li class="nav-item"><a class="nav-link" href="/flutter-for/swiftui-devs"><div><span>给 iOS SwiftUI 开发者的 Flutter 指南</span></div></a></li><li class="nav-item"><a class="nav-link" href="/flutter-for/uikit-devs"><div><span>给 iOS UIKit 开发者的 Flutter 指南</span></div></a></li><li class="nav-item"><a class="nav-link" href="/flutter-for/react-native-devs"><div><span>给 React Native 开发者的 Flutter 指南</span></div></a></li><li class="nav-item"><a class="nav-link" href="/flutter-for/web-devs"><div><span>给 Web 开发者的 Flutter 指南</span></div></a></li><li class="nav-item"><a class="nav-link" href="/flutter-for/xamarin-forms-devs"><div><span>给 Xamarin.Forms 开发者的 Flutter 指南</span></div></a></li><li class="nav-item"><a class="nav-link" href="/flutter-for/declarative"><div><span>声明式 UI 概览</span></div></a></li><li class="nav-item"><a class="nav-link" href="/flutter-for/dart-swift-concurrency"><div><span>Flutter 对比 Swift 的并发</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>保持版本更新</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>版本发行注记</span></div></a></li><li class="nav-item"><a class="nav-link" href="/release/breaking-changes"><div><span>破坏性改动</span></div></a></li><li class="nav-item"><a class="nav-link" href="/release/compatibility-policy"><div><span>兼容性策略</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 文章</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>最近更新</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>管理安装</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>概览</span></div></a></li><li class="nav-item"><a class="nav-link" href="/install/manual"><div><span>手动安装</span></div></a></li><li class="nav-item"><a class="nav-link" href="/install/with-vs-code"><div><span>使用 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 版本列表</span></div></a></li><li class="nav-item"><a class="nav-link" href="/install/upgrade"><div><span>升级 SDK</span></div></a></li><li class="nav-item"><a class="nav-link" href="/install/add-to-path"><div><span>添加到环境变量</span></div></a></li><li class="nav-item"><a class="nav-link" href="/install/troubleshoot"><div><span>安装常见问题</span></div></a></li><li class="nav-item"><a class="nav-link" href="/install/uninstall"><div><span>卸载 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>开发者资源列表</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>示例 &amp; 教程</span></div></a></li><li class="nav-item"><a class="nav-link" href="/resources/faq"><div><span>常见问题解答</span></div></a></li><li class="nav-item"><a class="nav-link" href="/resources/videos"><div><span>相关视频</span></div></a></li><li class="nav-item"><a class="nav-link" href="/resources/courses"><div><span>相关课程</span></div></a></li><li class="nav-item"><a class="nav-link" href="/resources/glossary"><div><span>术语表</span></div></a></li><li class="nav-item"><a class="nav-link" href="/resources/support"><div><span>获取支持和帮助</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>贡献</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>为 Flutter 做出贡献</span></div></a></li><li class="nav-item"><a class="nav-link" href="/resources/bug-reports"><div><span>创建有效的 Bug 报告</span></div></a></li><li class="nav-item"><a class="nav-link" href="/resources/design-docs"><div><span>了解提议的功能</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>参考资料</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>了解 Dash</span></div></a></li><li class="nav-item"><a class="nav-link" href="/reference/widgets"><div><span>Flutter Widget 列表</span></div></a></li><li class="nav-item"><a class="nav-link" href="/reference/create-new-app"><div><span>创建新的应用</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-io.cn" target="_blank"><div><span>Flutter API 文档</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 3.44 正式发布！了解 <a rel="noopener" href="https://www.youtube.com/watch?v=I1uIbGh1dGE" target="_blank">新特性</a>
               以及阅读 <a rel="noopener" href="https://blog.flutter.dev/whats-new-in-flutter-3-44-b0cc1ad3c527" target="_blank">博客文章</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">
                    <li class="breadcrumb-item">
                      <a href="/ui">UI</a><span class="material-symbols" aria-hidden="true" translate="no">chevron_right</span>
                    </li>
                    <li class="breadcrumb-item">
                      <a href="/ui/widgets">核心 Widget</a><span class="material-symbols" aria-hidden="true" translate="no">chevron_right</span>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page"><a href="/ui/widgets/animation">Animation and motion</a></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>
                <!--@site_shared:page_header_options data={"title":"Animation and motion widgets","markdownUrl":"/ui/widgets/animation.md","sourceUrl":null,"issueUrl":"https://github.com/cfug/flutter.cn/issues/new?template=1_page_issue.yml&amp;page-url=https://docs.flutter.cn/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">link</span>复制链接</button>
                        </li>
                        <li>
                          <button class="text-button" aria-describedby="page-header-options-copy-status" title="Copy this page as Markdown to your clipboard."><span class="material-symbols" aria-hidden="true" translate="no">content_copy</span>Copy as Markdown</button><span id="page-header-options-copy-status" class="copy-markdown-status" role="status" aria-live="polite" aria-atomic="true"></span>
                        </li>
                        <li>
                          <a class="text-button" target="_blank" rel="noopener" href="/ui/widgets/animation.md"><span class="material-symbols" aria-hidden="true" translate="no">markdown</span>View as Markdown</a>
                        </li>
                        <li class="dropdown-divider" aria-hidden="true" role="separator"></li>
                        <li>
                          <a class="text-button" target="_blank" rel="noopener" href="https://github.com/cfug/flutter.cn/issues/new?template=1_page_issue.yml&amp;page-url=https://docs.flutter.cn/ui/widgets/animation"><span class="material-symbols" aria-hidden="true" translate="no">bug_report</span>为本页面内容提出建议</a>
                        </li>
                      </ul>
                    </nav>
                  </div>
                </div>
                <!--/@site_shared:page_header_options-->
              </header>
              <p>Bring animations to your app.</p>
              <div class="card-grid">
                <a class="card outlined-card" href="https://api.flutter-io.cn/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-io.cn/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-io.cn/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-io.cn/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-io.cn/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-io.cn/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-io.cn/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-io.cn/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-io.cn/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-io.cn/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-io.cn/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-io.cn/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-io.cn/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-io.cn/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-io.cn/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-io.cn/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-io.cn/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-io.cn/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-io.cn/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-io.cn/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-io.cn/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-io.cn/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-io.cn/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-io.cn/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-io.cn/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-io.cn/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-io.cn/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-io.cn/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-io.cn/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>更多 widget 请查看 <a href="/ui/widgets">widget 目录</a>。</p>
              <div id="trailing-content" data-nosnippet="true">
                <!--@site_shared:feedback data={"issueUrl":"https://github.com/cfug/flutter.cn/issues/new?template=1_page_issue.yml&amp;page-url=https://docs.flutter.cn/ui/widgets/animation"}-->
                <div id="page-feedback">
                  <div class="feedback">
                    <div>本页内容对你有帮助吗？</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>
                <!--/@site_shared:feedback-->
                <p id="page-github-links">
                  <span>除非另有说明，本文档之所提及适用于 Flutter 3.44.7 版本。本页面最后更新时间：2026-05-31。</span><a title="为本页面内容提出建议" target="_blank" rel="noopener" href="https://github.com/cfug/flutter.cn/issues/new?template=1_page_issue.yml&amp;page-url=https://docs.flutter.cn/ui/widgets/animation">为本页面内容提出建议</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/cn/flutter-cn-logo-text-horizontal-white.svg"/>
          </a>
          <div class="footer-social-links">
            <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">引用中文内容需注明本站及链接作为出处，英文内容和示例代码均遵从源站授权协议。</div>
          <div class="footer-utility-links">
            <ul>
              <li><a title="Terms of use" href="/tos">使用条款</a></li>
              <li><a title="Brand usage guidelines" href="/brand">品牌指南</a></li>
              <li>
                <a rel="noopener" title="Privacy policy" href="https://policies.google.com/privacy" target="_blank">隐私权说明</a>
              </li>
              <li><a title="Security philosophy and practices" href="/security">安全性</a></li>
              <li><a title="Flutter 社区中文资源网站特别说明及免责条款" href="/disclaimer">免责声明</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>
