doc: update flutter.md #58 #149

README.md

@@ -24,6 +24,7 @@ Quick Reference
 [C#](./docs/cs.md)<!--rehype:style=background: rgb(6 147 13/var(\-\-bg\-opacity));&class=contributing-->
 [Django](./docs/djiango.md)<!--rehype:style=background: rgb(12 75 51/var(\-\-bg\-opacity));&class=contributing tag&data-lang=Python-->
 [FFmpeg](./docs/ffmpeg.md)<!--rehype:style=background: rgb(0 193 9/var(\-\-bg\-opacity));&class=contributing-->
+[Flutter](./docs/flutter.md)<!--rehype:style=background: rgb(150 220 254/var(\-\-bg\-opacity));&class=contributing tag&data-lang=Dart-->
 [LaTeX](./docs/latex.md)<!--rehype:style=background: rgb(0 128 128/var(\-\-bg\-opacity));&class=contributing-->
 [Lua](./docs/lua.md)<!--rehype:style=background: rgb(3 3 128/var(\-\-bg\-opacity));-->
 [MATLAB](./docs/matlab.md)<!--rehype:style=background: rgb(0 118 168/var(\-\-bg\-opacity));&class=contributing-->

docs/flutter.md

@@ -1,11 +1,64 @@
 Flutter 备忘清单
 ===
 
-包含Flutter常用的组件、布局、方法等。初学者的完整快速参考
+包含 Flutter 常用的组件、布局、方法等。初学者的完整快速参考
 
 入门
 ---
 
-### 介绍 (卡片)
+### macOS 操作系统上安装和配置
 
-卡片内容
+```bash
+$ sudo softwareupdate --install-rosetta --agree-to-license
+```
+<!--rehype:className=wrap-text-->
+
+在 [Apple 芯片的 Mac 电脑](https://support.apple.com/zh-cn/HT211814) 上，还需要安装 [Rosetta 2](https://github.com/flutter/website/pull/7119#issuecomment-1124537969) 环境因为 一些辅助工具 仍然需要，通过手动运行上面的命令来安装
+
+#### 获取 Flutter SDK
+
+- 安装包来获取最新的 stable Flutter SDK：
+  - Intel [`flutter_macos_3.3.8-stable.zip`](https://storage.flutter-io.cn/flutter_infra_release/releases/stable/macos/flutter_macos_3.3.8-stable.zip)
+  - Apple 芯片 [`flutter_macos_arm64_3.3.8-stable.zip`](https://storage.flutter-io.cn/flutter_infra_release/releases/stable/macos/flutter_macos_arm64_3.3.8-stable.zip)  
+
+    想要获取到其他版本的安装包，请参阅 [SDK 版本列表](https://flutter.cn/docs/development/tools/sdk/releases) 页面
+- 将文件解压到目标路径, 比如:
+
+    ```bash
+    $ cd ~/development
+    $ unzip ~/Downloads/flutter_macos_3.3.8-stable.zip
+    ```
+    <!--rehype:className=wrap-text-->
+- 配置 `flutter` 的 PATH 环境变量：
+
+    ```bash
+    $ export PATH="$PATH:`pwd`/flutter/bin"
+    ```
+
+- 运行 `flutter doctor` 命令
+<!--rehype:className=style-timeline-->
+
+### Windows 操作系统上安装和配置
+
+- 点击下方的安装包，获取 stable 发行通道的 Flutter SDK 最新版本：
+  - [flutter_windows_3.3.8-stable.zip](https://storage.flutter-io.cn/flutter_infra_release/releases/stable/windows/flutter_windows_3.3.8-stable.zip)
+  - 要查看其他发行通道和以往的版本，请参阅 [SDK 版本列表](https://flutter.cn/docs/development/tools/sdk/releases) 页面
+- 将压缩包解压，然后把其中的 `flutter` 目录整个放在你想放置 `Flutter SDK` 的路径中（例如 `C:\src\flutter`）
+- 更新 `path` 环境变量，在开始菜单的搜索功能键入`「env」`，然后选择 `编辑系统环境变量`。在 **`用户变量`** 一栏中，检查是否有 **`Path`** 这个条目：
+  - 如果存在这个条目，以 `;` 分隔已有的内容，加入 `flutter\bin` 目录的完整路径。
+  - 如果不存在的话，在用户环境变量中创建一个新的 Path 变量，然后将 `flutter\bin` 所在的完整路径作为新变量的值
+<!--rehype:className=style-timeline-->
+
+如果你不想安装指定版本的安装包。可以忽略步骤 `1` 和 `2`。从 `GitHub` 上的 `Flutter repo` 获取源代码，并根据需要，切换到指定的分支或标签
+
+```bash
+C:\src>git clone https://github.com/flutter/flutter.git -b stable
+```
+<!--rehype:className=wrap-text-->
+
+另见
+---
+
+- [Dart 备忘清单](./dart.md) _(jaywcjlove.github.io)_
+- [flutter 官网](https://flutter.dev) _(flutter.dev)_
+- [flutter 中文开发者社区](https://flutterchina.club/) _(flutterchina.club)_

scripts/style/style.css

@@ -853,11 +853,11 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
 .h2wrap-body ul.style-timeline {
   counter-reset: stepCount;
 }
-.h2wrap-body ul.style-timeline li:first-child:before {
+.h2wrap-body ul.style-timeline > li:first-child:before {
   background-color: #228e6c;
   color: rgb(226 232 240/1);
 }
-.h2wrap-body ul.style-timeline li::before {
+.h2wrap-body ul.style-timeline > li::before {
   color: #228e6c;
   background-color: var(--color-canvas-default);
   counter-increment: stepCount;
@@ -873,10 +873,10 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
   top: -1px;
   left: -14px;
 }
-.h2wrap-body ul.style-timeline li:last-child {
+.h2wrap-body ul.style-timeline > li:last-child {
   border-image: linear-gradient(to bottom, #46c69e96, rgba(0, 0, 0, 0)) 1 100%;
 }
-.h2wrap-body ul.style-timeline li {
+.h2wrap-body ul.style-timeline > li {
   border-bottom: 0 !important;
   padding-top: 0 !important;
   padding-bottom: 25px !important;
@@ -884,7 +884,7 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
   margin-left: 30px;
   border-left-color: #46c69e96;
 }
-.h2wrap-body ul.style-timeline li > pre {
+.h2wrap-body ul.style-timeline > li > pre {
   padding: 0 !important;
   padding-top: 10px !important;
   height: initial !important;