先看效果
通過此專案可以學習到 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,
),
),
代碼倉庫
- Github - flutter_audio_recording_widget
視頻教程
- YouTube
- BiliBili
- 西瓜視頻
關于我
- 15 年～18 年，使用
Android原生做智能硬體相關的 App 研發 - 18 年 5 月，一次偶然的機會接觸到了
Flutter，然后開始自學，可以看 weather_flutter 是我練習 Flutter 的入門實戰專案（我現在依然覺得他非常適合 Flutter 入門練習使用） - 18 年 8 月，頂著巨大的壓力（Flutter 當時還沒有 Release 1.0）開始使用 Flutter 開發企業級專案，并且開發維護了十幾個 Flutter 插件包（當時插件資源非常的匱乏）
- 截止目前主導并參與上線了 4 款企業級
FlutterApp，當前正在負責開發的一款 App 累計用戶120W+，使用Flutter得到了極佳的體驗
參考鏈接
- AnimatedSwitcher - 本周 Flutter 小部件
- FadeTransition - Flutter 檔案
- ScaleTransition - Flutter 檔案
- RotationTransition - Flutter 檔案
- Container - Flutter 檔案
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/272791.html
標籤：其他
上一篇：【C語言】標準C輸出當前時間，時間差，詳細決議（4種方法）
下一篇：頻域的銳化