mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-17 12:41:20 +08:00
111 lines
15 KiB
HTML
111 lines
15 KiB
HTML
<!doctype html>
|
||
<html lang="en" data-color-mode="dark">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Flutter 备忘清单
|
||
& flutter cheatsheet & Quick Reference</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta description="包含 Flutter 常用的组件、布局、方法等。初学者的完整快速参考为开发人员分享快速参考备忘单。">
|
||
<meta keywords="Quick,Reference,cheatsheet,flutter">
|
||
<link rel="icon" href="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20width%3D%221em%22%3E%20%3Cpath%20d%3D%22m21.66%2010.44-.98%204.18c-.84%203.61-2.5%205.07-5.62%204.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2%201.17-2.42%203.16-3.07%206.5-2.28l1.67.39c4.19.98%205.47%203.05%204.49%207.23Z%22%20fill%3D%22%23c9d1d9%22%2F%3E%20%3Cpath%20d%3D%22M15.06%2019.39c-.62.42-1.4.77-2.35%201.08l-1.58.52c-3.97%201.28-6.06.21-7.35-3.76L2.5%2013.28c-1.28-3.97-.22-6.07%203.75-7.35l1.58-.52c.41-.13.8-.24%201.17-.31-.3.61-.54%201.35-.74%202.2l-.98%204.19c-.98%204.18.31%206.24%204.48%207.23l1.68.4c.58.14%201.12.23%201.62.27Zm2.43-8.88c-.06%200-.12-.01-.19-.02l-4.85-1.23a.75.75%200%200%201%20.37-1.45l4.85%201.23a.748.748%200%200%201-.18%201.47Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3Cpath%20d%3D%22M14.56%2013.89c-.06%200-.12-.01-.19-.02l-2.91-.74a.75.75%200%200%201%20.37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3C%2Fsvg%3E" type="image/svg+xml">
|
||
<link rel="stylesheet" href="../style/style.css">
|
||
<link rel="stylesheet" href="../style/katex.css">
|
||
</head>
|
||
<body><nav class="header-nav"><div class="max-container"><a href="../index.html" class="logo"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
|
||
<path d="m21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z" fill="#c9d1d9"></path>
|
||
<path d="M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z" fill="#228e6c"></path>
|
||
<path d="M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z" fill="#228e6c"></path>
|
||
</svg>
|
||
<span class="title">Quick Reference</span></a><div class="menu"><a href="javascript:void(0);" class="searchbtn" id="searchbtn"><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
|
||
<path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
|
||
</svg><span>搜索</span><span>⌘K</span></a><a href="https://github.com/jaywcjlove/reference/blob/main/docs/flutter.md" class="" target="__blank"><svg viewBox="0 0 36 36" fill="currentColor" height="1em" width="1em"><path d="m33 6.4-3.7-3.7a1.71 1.71 0 0 0-2.36 0L23.65 6H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V11.76l3-3a1.67 1.67 0 0 0 0-2.36ZM18.83 20.13l-4.19.93 1-4.15 9.55-9.57 3.23 3.23ZM29.5 9.43 26.27 6.2l1.85-1.85 3.23 3.23Z"></path><path fill="none" d="M0 0h36v36H0z"></path></svg><span>编辑</span></a><button id="darkMode" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="light" height="1em" width="1em">
|
||
<path d="M6.995 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007-2.246-5.007-5.007-5.007S6.995 9.239 6.995 12zM11 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2H2zm17 0h3v2h-3zM5.637 19.778l-1.414-1.414 2.121-2.121 1.414 1.414zM16.242 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.344 7.759 4.223 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path>
|
||
</svg>
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="dark" height="1em" width="1em">
|
||
<path d="M12 11.807A9.002 9.002 0 0 1 10.049 2a9.942 9.942 0 0 0-5.12 2.735c-3.905 3.905-3.905 10.237 0 14.142 3.906 3.906 10.237 3.905 14.143 0a9.946 9.946 0 0 0 2.735-5.119A9.003 9.003 0 0 1 12 11.807z"></path>
|
||
</svg>
|
||
</button><script src="../js/dark.js"></script><a href="https://github.com/jaywcjlove/reference" class="" target="__blank"><svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></nav><div class="wrap h1body-exist max-container"><header class="wrap-header h1wrap"><h1 id="flutter-备忘清单"><svg viewBox="0 0 256 317" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" height="1em" width="1em">
|
||
<defs>
|
||
<linearGradient x1="3.952%" y1="26.993%" x2="75.897%" y2="52.919%" id="a">
|
||
<stop offset="0%"></stop>
|
||
<stop stop-opacity="0" offset="100%"></stop>
|
||
</linearGradient>
|
||
</defs>
|
||
<path fill="#47C5FB" d="M157.666 0 0 157.667l48.8 48.8L255.268.001zm-1.099 145.397L72.15 229.815l48.984 49.716 48.71-48.71 85.425-85.424z"></path>
|
||
<path fill="#00569E" d="m121.133 279.531 37.082 37.082h97.052l-85.425-85.792z"></path>
|
||
<path fill="#00B5F8" d="m71.6 230.364 48.801-48.801 49.441 49.258-48.71 48.71z"></path>
|
||
<path fill-opacity="0.8" fill="url(#a)" d="m121.133 279.531 40.56-13.459 4.029-31.13z"></path>
|
||
</svg>
|
||
<a aria-hidden="true" tabindex="-1" href="#flutter-备忘清单"><span class="icon icon-link"></span></a>Flutter 备忘清单</h1><div class="wrap-body">
|
||
<p>包含 Flutter 常用的组件、布局、方法等。初学者的完整快速参考</p>
|
||
</div></header><div class="menu-tocs"><div class="menu-btn"><svg aria-hidden="true" fill="currentColor" height="1em" width="1em" viewBox="0 0 16 16" version="1.1" data-view-component="true">
|
||
<path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path>
|
||
</svg></div><div class="menu-modal"><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#入门">入门</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#macos-操作系统上安装和配置">macOS 操作系统上安装和配置</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#获取-flutter-sdk">获取 Flutter SDK</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#windows-操作系统上安装和配置">Windows 操作系统上安装和配置</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#另见">另见</a></div></div><div class="h1wrap-body"><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="入门"><a aria-hidden="true" tabindex="-1" href="#入门"><span class="icon icon-link"></span></a>入门</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-exist"><div class="wrap-header h3wrap"><h3 id="macos-操作系统上安装和配置"><a aria-hidden="true" tabindex="-1" href="#macos-操作系统上安装和配置"><span class="icon icon-link"></span></a>macOS 操作系统上安装和配置</h3><div class="wrap-body">
|
||
<pre class="wrap-text"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token function">sudo</span> softwareupdate --install-rosetta --agree-to-license
|
||
</span></code></pre>
|
||
<!--rehype:className=wrap-text-->
|
||
<p>在 <a href="https://support.apple.com/zh-cn/HT211814">Apple 芯片的 Mac 电脑</a> 上，还需要安装 <a href="https://github.com/flutter/website/pull/7119#issuecomment-1124537969">Rosetta 2</a> 环境因为 一些辅助工具 仍然需要，通过手动运行上面的命令来安装</p>
|
||
<h4 id="获取-flutter-sdk"><a aria-hidden="true" tabindex="-1" href="#获取-flutter-sdk"><span class="icon icon-link"></span></a>获取 Flutter SDK</h4>
|
||
<ul class="style-timeline">
|
||
<li>
|
||
<p>安装包来获取最新的 stable Flutter SDK：</p>
|
||
<ul>
|
||
<li>
|
||
<p>Intel <a href="https://storage.flutter-io.cn/flutter_infra_release/releases/stable/macos/flutter_macos_3.3.8-stable.zip"><code>flutter_macos_3.3.8-stable.zip</code></a></p>
|
||
</li>
|
||
<li>
|
||
<p>Apple 芯片 <a href="https://storage.flutter-io.cn/flutter_infra_release/releases/stable/macos/flutter_macos_arm64_3.3.8-stable.zip"><code>flutter_macos_arm64_3.3.8-stable.zip</code></a></p>
|
||
<p>想要获取到其他版本的安装包，请参阅 <a href="https://flutter.cn/docs/development/tools/sdk/releases">SDK 版本列表</a> 页面</p>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<p>将文件解压到目标路径, 比如:</p>
|
||
<pre class="wrap-text"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token builtin class-name">cd</span> ~/development
|
||
</span><span class="code-line">$ <span class="token function">unzip</span> ~/Downloads/flutter_macos_3.3.8-stable.zip
|
||
</span></code></pre>
|
||
<!--rehype:className=wrap-text-->
|
||
</li>
|
||
<li>
|
||
<p>配置 <code>flutter</code> 的 PATH 环境变量：</p>
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token builtin class-name">export</span> <span class="token assign-left variable"><span class="token environment constant">PATH</span></span><span class="token operator">=</span><span class="token string">"<span class="token environment constant">$PATH</span>:<span class="token variable"><span class="token variable">`</span><span class="token builtin class-name">pwd</span><span class="token variable">`</span></span>/flutter/bin"</span>
|
||
</span></code></pre>
|
||
</li>
|
||
<li>
|
||
<p>运行 <code>flutter doctor</code> 命令</p>
|
||
</li>
|
||
</ul>
|
||
<!--rehype:className=style-timeline-->
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="windows-操作系统上安装和配置"><a aria-hidden="true" tabindex="-1" href="#windows-操作系统上安装和配置"><span class="icon icon-link"></span></a>Windows 操作系统上安装和配置</h3><div class="wrap-body">
|
||
<ul class="style-timeline">
|
||
<li>点击下方的安装包，获取 stable 发行通道的 Flutter SDK 最新版本：
|
||
<ul>
|
||
<li><a href="https://storage.flutter-io.cn/flutter_infra_release/releases/stable/windows/flutter_windows_3.3.8-stable.zip">flutter_windows_3.3.8-stable.zip</a></li>
|
||
<li>要查看其他发行通道和以往的版本，请参阅 <a href="https://flutter.cn/docs/development/tools/sdk/releases">SDK 版本列表</a> 页面</li>
|
||
</ul>
|
||
</li>
|
||
<li>将压缩包解压，然后把其中的 <code>flutter</code> 目录整个放在你想放置 <code>Flutter SDK</code> 的路径中（例如 <code>C:\src\flutter</code>）</li>
|
||
<li>更新 <code>path</code> 环境变量，在开始菜单的搜索功能键入<code>「env」</code>，然后选择 <code>编辑系统环境变量</code>。在 <strong><code>用户变量</code></strong> 一栏中，检查是否有 <strong><code>Path</code></strong> 这个条目：
|
||
<ul>
|
||
<li>如果存在这个条目，以 <code>;</code> 分隔已有的内容，加入 <code>flutter\bin</code> 目录的完整路径。</li>
|
||
<li>如果不存在的话，在用户环境变量中创建一个新的 Path 变量，然后将 <code>flutter\bin</code> 所在的完整路径作为新变量的值</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<!--rehype:className=style-timeline-->
|
||
<p>如果你不想安装指定版本的安装包。可以忽略步骤 <code>1</code> 和 <code>2</code>。从 <code>GitHub</code> 上的 <code>Flutter repo</code> 获取源代码，并根据需要，切换到指定的分支或标签</p>
|
||
<pre class="wrap-text"><code class="language-bash code-highlight"><span class="code-line">C:<span class="token punctuation">\</span>src<span class="token operator">></span>git clone https://github.com/flutter/flutter.git <span class="token parameter variable">-b</span> stable
|
||
</span></code></pre>
|
||
<!--rehype:className=wrap-text-->
|
||
</div></div></div></div></div><div class="wrap h2body-not-exist"><div class="wrap-header h2wrap"><h2 id="另见"><a aria-hidden="true" tabindex="-1" href="#另见"><span class="icon icon-link"></span></a>另见</h2><div class="wrap-body">
|
||
<ul>
|
||
<li><a href="./dart.html">Dart 备忘清单</a> <em>(jaywcjlove.github.io)</em></li>
|
||
<li><a href="https://flutter.dev">flutter 官网</a> <em>(flutter.dev)</em></li>
|
||
<li><a href="https://flutterchina.club/">flutter 中文开发者社区</a> <em>(flutterchina.club)</em></li>
|
||
</ul>
|
||
</div></div><div class="h2wrap-body"></div></div></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 Kenny Wang.</footer></footer><script src="../data.js" defer></script><script src="../js/fuse.min.js" defer></script><script src="../js/main.js" defer></script><div id="mysearch"><div class="mysearch-box"><div class="mysearch-input"><div><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
|
||
<path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
|
||
</svg><input id="mysearch-input" type="search"><div class="mysearch-clear"></div></div><button id="mysearch-close" type="button">取消</button></div><div class="mysearch-result"><div id="mysearch-menu"></div><div id="mysearch-content"></div></div></div></div></body>
|
||
</html>
|