脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → Android → Flutter开关动画效果

Flutter实战教程之酷炫的开关动画效果

 更新时间：2020年11月27日 09:31:50   作者：老孟  
这篇文章主要给大家介绍了关于Flutter实战教程之酷炫的开关动画效果的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

前言

此动画效果是我在浏览文章时发现的一个非常酷炫的效果，于是就使用 Flutter 实现了。

更多动画效果及Flutter资源： https://github.com/781238222/flutter-do

添加依赖

在项目的 pubspec.yaml 文件中添加依赖：

dependencies:
 wheel_switch: ^0.0.1

执行命令：

flutter pub get

使用

WheelSwitch(
 value: false,
)

组件默认的宽高分别是80、30，也可以指定宽高：

WheelSwitch(
 value: false,
 width: 150,
 height: 50,
)

开关发生变化回调：

WheelSwitch(
 value: false,
 onChanged: (value){
 print('WheelSwitch : $value');
 },
)

设置其轨道颜色，分为激活（开）和未激活（关）状态的颜色：

WheelSwitch(
 value: false,
 width: 150,
 height: 50,
 activeTrackColor: Colors.red,
 inactiveTrackColor: Colors.green,
)

设置滑块的颜色：

WheelSwitch(
 value: false,
 width: 150,
 height: 50,
 activeTrackColor: Colors.red,
 inactiveTrackColor: Colors.green,
 activeThumbColor: Colors.blue,
 inactiveThumbColor: Colors.green,
)

未激活状态（关）：

激活状态（开）：

设置文字和文字样式：

WheelSwitch(
 value: false,
 width: 150,
 height: 50,
 activeText: '开',
 inactiveText: '关',
 activeTextStyle: TextStyle(color: Colors.white,fontSize: 20),
 inactiveTextStyle: TextStyle(color: Colors.cyanAccent,fontSize: 10),
)

交流

老孟Flutter博客（330个控件用法+实战入门系列文章）： http://laomengit.com

到此这篇关于Flutter实战教程之酷炫的开关动画效果的文章就介绍到这了,更多相关Flutter开关动画效果内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Android中关于相对布局RelativeLayout的技巧汇总

    Android中关于相对布局RelativeLayout的技巧汇总

    RelativeLayout是相对布局控件，以控件之间相对位置或相对父容器位置进行排列。下面这篇文章主要给大家介绍了关于Android中相对布局RelativeLayout的一些技巧，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-02-02
  • Android仿微信图片点击浏览的效果

    Android仿微信图片点击浏览的效果

    这篇文章主要为大家详细介绍了Android仿微信图片点击浏览的效果，Android 2D平滑放大显示ImageView,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-09-09
  • 利用Jetpack Compose绘制可爱的天气动画

    利用Jetpack Compose绘制可爱的天气动画

    Jetpack Compose是用于构建原生Android UI的现代工具包。Jetpack Compose使用更少的代码，强大的工具和直观的Kotlin API，简化并加速了Android上的UI开发。本文将利用Jetpack Compose绘制可爱的天气动画，感兴趣的可以了解一下
    2022-01-01
  • Android Coil对比Glide深入分析探究

    Android Coil对比Glide深入分析探究

    这篇文章主要介绍了Android Coil对比Glide，Coil是Android上的一个全新的图片加载框架，它的全名叫做coroutine image loader,即协程图片加载库
    2023-02-02
  • android实现可以滑动的平滑曲线图

    android实现可以滑动的平滑曲线图

    这篇文章主要为大家详细介绍了android实现可以滑动的平滑曲线图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-06-06
  • Android中View跟随手指移动效果

    Android中View跟随手指移动效果

    这篇文章主要介绍了Android中View跟随手指移动效果，代码简单易懂，非常不错，需要的朋友参考下
    2017-01-01
  • Kotlin的::符号怎么用

    Kotlin的::符号怎么用

    本文主要介绍了Kotlin的::符号怎么用，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-01-01
  • Android开发中ProgressDialog简单用法示例

    Android开发中ProgressDialog简单用法示例

    这篇文章主要介绍了Android开发中ProgressDialog简单用法,结合实例形式分析了Android使用ProgressDialog的进度条显示与关闭、更新等事件响应相关操作技巧,需要的朋友可以参考下
    2017-10-10
  • Android 手机获取手机号实现方法

    Android 手机获取手机号实现方法

    本文主要介绍Android 获取手机号的实现方法，这里提供了实现方法，和具体操作流程，并符实现代码，有需要的小伙伴可以参考下
    2016-09-09
  • Android中Fragment的解析和使用详解

    Android中Fragment的解析和使用详解

    现在Fragment的应用真的是越来越广泛了，之前Android在3.0版本加入Fragment的时候，主要是为了解决Android Pad屏幕比较大，空间不能充分利用的问题，但现在即使只是在手机上，也有很多的场景可以运用到Fragment了，这篇文章给大家介绍了Android中Fragment的解析和使用。
    2016-11-11

最新评论