先看效果
通過此專案可以學習到 Container、AnimatedSwitcher、FadeTransition、ScaleTransition 等元件的基礎用法，最終我們將構建一個靈動動畫的錄音狀態切換按鈕
這裡按鈕全部是用
Container編寫的，圓環和圓形都是Container的屬性效果，具體可以看下面的文章或視訊
核心程式碼
1、繪製最外層的灰色邊框
Container(
height: 80,
width: 80,
padding: EdgeInsets.all(2),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Color(0x999999).withOpacity(.3),
width: 3,
),
),
child: $blueWidget
),
複製程式碼2、繪製內部藍色區域
// blueWidget
Container(
width: 70,
height: 70,
decoration: BoxDecoration(
color: Colors.blueAccent,
shape: BoxShape.circle,
),
child: #iconWidget
),
複製程式碼3、繪製內部 Icon
// iconWidget
Icon(
Icons.play_circle_filled,
color: Colors.white.withOpacity(.9),
size: 40,
)
複製程式碼4、新增動畫
// 錄製狀態
bool recroding = false;
AnimatedSwitcher(
duration: Duration(milliseconds: 200),
transitionBuilder:
(Widget child, Animation<double> animation) {
// 縮放動畫
return ScaleTransition(
scale: animation,
// 漸隱漸顯動畫，保證切換不那麼突兀的
child: FadeTransition(
child: child,
opacity: animation,
),
);
},
child: Icon(
// 通過控制狀態改變icon
recroding
? Icons.pause_circle_filled
: Icons.play_circle_filled,
// 這一句是關鍵，如果不加上切換是沒有效果的
key: ValueKey<bool>(recroding),
color: Colors.white.withOpacity(.9),
size: 40,
),
),
複製程式碼程式碼倉庫
視訊教程
關於我
- 15 年～18 年，使用
Android原生做智慧硬體相關的 App 研發 - 18 年 5 月，一次偶然的機會接觸到了
Flutter，然後開始自學，可以看 weather_flutter 是我練習 Flutter 的入門實戰專案（我現在依然覺得他非常適合 Flutter 入門練習使用） - 18 年 8 月，頂著巨大的壓力（Flutter 當時還沒有 Release 1.0）開始使用 Flutter 開發企業級專案，並且開發維護了十幾個 Flutter 外掛包（當時外掛資源非常的匱乏）
- 截止目前主導並參與上線了 4 款企業級
FlutterApp，當前正在負責開發的一款 App 累計使用者120W+，使用Flutter得到了極佳的體驗