Flutter實戰(zhàn)教程之酷炫的開關(guān)動畫效果
更新時間：2020年11月27日 09:31:50 作者：老孟
這篇文章主要給大家介紹了關(guān)于Flutter實戰(zhàn)教程之酷炫的開關(guān)動畫效果的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
前言
此動畫效果是我在瀏覽文章時發(fā)現(xiàn)的一個非常酷炫的效果，于是就使用 Flutter 實現(xiàn)了。
更多動畫效果及Flutter資源： https://github.com/781238222/flutter-do
添加依賴
在項目的 pubspec.yaml 文件中添加依賴：
dependencies: wheel_switch: ^0.0.1
執(zhí)行命令：
flutter pub get
使用
WheelSwitch( value: false, )
組件默認的寬高分別是80、30，也可以指定寬高：
WheelSwitch( value: false, width: 150, height: 50, )
開關(guān)發(fā)生變化回調(diào)：
WheelSwitch(
value: false,
onChanged: (value){
print('WheelSwitch : $value');
},
)
設(shè)置其軌道顏色，分為激活（開）和未激活（關(guān)）狀態(tài)的顏色：
WheelSwitch( value: false, width: 150, height: 50, activeTrackColor: Colors.red, inactiveTrackColor: Colors.green, )
設(shè)置滑塊的顏色：
WheelSwitch( value: false, width: 150, height: 50, activeTrackColor: Colors.red, inactiveTrackColor: Colors.green, activeThumbColor: Colors.blue, inactiveThumbColor: Colors.green, )
未激活狀態(tài)（關(guān)）：
激活狀態(tài)（開）：
設(shè)置文字和文字樣式：
WheelSwitch( value: false, width: 150, height: 50, activeText: '開', inactiveText: '關(guān)', activeTextStyle: TextStyle(color: Colors.white,fontSize: 20), inactiveTextStyle: TextStyle(color: Colors.cyanAccent,fontSize: 10), )
交流
老孟Flutter博客（330個控件用法+實戰(zhàn)入門系列文章）： http://laomengit.com
到此這篇關(guān)于Flutter實戰(zhàn)教程之酷炫的開關(guān)動畫效果的文章就介紹到這了,更多相關(guān)Flutter開關(guān)動畫效果內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Android中關(guān)于相對布局RelativeLayout的技巧匯總
RelativeLayout是相對布局控件，以控件之間相對位置或相對父容器位置進行排列。下面這篇文章主要給大家介紹了關(guān)于Android中相對布局RelativeLayout的一些技巧，需要的朋友可以參考借鑒，下面來一起看看吧。2017-02-02
這篇文章主要為大家詳細介紹了Android仿微信圖片點擊瀏覽的效果，Android 2D平滑放大顯示ImageView,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
Jetpack Compose是用于構(gòu)建原生Android UI的現(xiàn)代工具包。Jetpack Compose使用更少的代碼，強大的工具和直觀的Kotlin API，簡化并加速了Android上的UI開發(fā)。本文將利用Jetpack Compose繪制可愛的天氣動畫，感興趣的可以了解一下2022-01-01
這篇文章主要介紹了Android Coil對比Glide，Coil是Android上的一個全新的圖片加載框架，它的全名叫做coroutine image loader,即協(xié)程圖片加載庫2023-02-02
這篇文章主要為大家詳細介紹了android實現(xiàn)可以滑動的平滑曲線圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要介紹了Android中View跟隨手指移動效果，代碼簡單易懂，非常不錯，需要的朋友參考下2017-01-01
本文主要介紹了Kotlin的::符號怎么用，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
Android開發(fā)中ProgressDialog簡單用法示例
這篇文章主要介紹了Android開發(fā)中ProgressDialog簡單用法,結(jié)合實例形式分析了Android使用ProgressDialog的進度條顯示與關(guān)閉、更新等事件響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下2017-10-10
本文主要介紹Android 獲取手機號的實現(xiàn)方法，這里提供了實現(xiàn)方法，和具體操作流程，并符實現(xiàn)代碼，有需要的小伙伴可以參考下2016-09-09
現(xiàn)在Fragment的應(yīng)用真的是越來越廣泛了，之前Android在3.0版本加入Fragment的時候，主要是為了解決Android Pad屏幕比較大，空間不能充分利用的問題，但現(xiàn)在即使只是在手機上，也有很多的場景可以運用到Fragment了，這篇文章給大家介紹了Android中Fragment的解析和使用。2016-11-11