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

2024-10-18 22:59:44

前言

此动画效果是我在浏览文章时发现的一个非常酷炫的效果，于是就使用 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开关动画效果内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Flutter进阶之实现动画效果（二）

在上一篇文章:Flutter进阶-实现动画效果(一)的最后,我们说到需要一个处理程序混乱的概念.在这一篇文章中,我们会引入补间,它是构建动画代码的一个非常简单的概念,主要作用是用面向对象的方法替代之前面向过程的方法.tween是一个值,它描述了其他值的空间中的两个点之间的路径,比如条形图的动画值从0运行到1. 补间在Dart中表示类型为Tween的对象 abstract class Tween<T> { final T begin; final T end; Tween(this.begin,
Flutter进阶之实现动画效果（八）

通过学习前面的文章,我们现在终于能为更复杂的图表制作动画效果了.接着上一篇文章讲,如果公司的产品销往全国各地,那么我们的图表要展示的内容就需要加上地区.我们可以使用堆叠条形图来试试效果,实际效果如下图所示: 堆叠条用于数据集,其中类别是二维的,并且将由bar高度表示的数值加起来是合理的.其中一个颜色表示一个地区,每个条形表示一个产品,产品条形图使公司可以对比全国市场上各个产品的销售额,同时按区域堆叠显示各个地区的销售额. 动画效果用于可视化数据集更改,从而引入附加维度(通常为时间),且不会使图表
Flutter进阶之实现动画效果（九）

在上一篇文章中,我们实现了统计每个产品和地区的销售额,如果现在需要统计每个产品和地区所占市场份额的百分比,那么使用堆叠条形图是不合适的,我们可以使用分组条形图,因为它可以同时在两个类别维度上进行定量比较.分组条形图的实际效果如下图所示: 要实现上面的效果,我们需要更新bar.dart文件的代码: import 'package:flutter/material.dart'; import 'package:flutter/animation.dart'; import 'dart:ui' sho
Flutter进阶之实现动画效果（七）

我们假设一种情况,如果应用程序使用条形图显示给定年份的产品类别的销售额,用户可以选择另一年,然后该应用程序将动画到该年的条形图.如果产品类别在两年内是相同的,或者恰好是相同的,除了在其中一个图表中右侧显示的其他类别,我们可以使用我们现有的代码.但如果公司在2016年有A,B,C和X类产品,但是在2017年中断了B并推出了D? 动画效果可以做得非常好看,但仍然会让用户感到困惑.为什么?因为它不保留语义.它将表示产品类别B的图形元素转换为代表类别C的一个图形元素,而将C的图形元素转换到其他地方.正因
Flutter进阶之实现动画效果（三）

在上一篇文章:Flutter进阶-实现动画效果(二)的最后,我们实现了一个控件,其中包含各种布局和状态处理控件.以及使用自定义的动画感知绘图代码绘制单个Bar的控件.还有一个浮动按钮控件,用于启动条形图高度的动画变化. 现在开始向我们的单个条形添加颜色,在Bar类的height字段下添加一个color字段,并且更新Bar.lerp以使其两者兼容.在上一篇文章中,介绍过"lerp"是"线性内插"或"线性插值"的一种简短形式. class Bar {
Flutter进阶之实现动画效果（四）

在上一篇文章:Flutter进阶-实现动画效果(三)中,实现了一个随机高度.颜色的条形.这一篇文章我们会实现多个条形,同样是随机高度.颜色. 首先在bar.dart中创建BarChart类,并使用固定长度的Bar实例列表.我们将使用5个条形,表示一周的5个工作日.然后,我们需要将创建空白和随机实例的责任从Bar转移到BarChart. import 'package:flutter/material.dart'; import 'package:flutter/animation.dart';
Flutter进阶之实现动画效果（一）

上一篇文章我们了解了Flutter的动画基础,这一篇文章我们就来实现一个图表的动画效果. 首先,我们需要创建一个新项目myapp,然后把main.dart的内容替换成下面的代码 import 'package:flutter/material.dart'; import 'dart:math'; void main() { runApp(new MyApp()); } class MyApp extends StatelessWidget { @override Widget build(Bui
Flutter进阶之实现动画效果（六）

在上一篇文章中,我们之前对BarChart.lerp的定义并不是高效的,我们正在创建的Bar实例,仅作为Bar.lerp的参数给出,并且针对动画参数t的每个值重复出现.每秒60帧,这意味着可能很多Bar实例被送到垃圾收集器,即使是相对较短的动画. 我们可以采用以下三种解决方案: Bar实例可以通过在Bar类中仅创建一次而不是每次调用collapsed来重复使用,但这种方法不适合我们的应用程序. 重用可以通过BarChartTween来处理,通过使其构造函数创建一个列表_tween的BarTwee
Flutter进阶之实现动画效果（五）

在本篇文章开始前,我们先来回顾一下之前我们都做了哪些事情.在第一篇文章中,我们在动画值更改时调用double lerpDouble(num a, num b, double t)重新绘制条形.在第二篇文章中,我们首先用Tween类帮助我们管理动画值,并重新绘制条形,然后把绘制条形动画相关的类提取到bar.dart文件.在第三篇文章中,我们首先在Bar类中增加颜色的字段,再新建color_palette.dart文件,用于获取颜色值,同时用工厂构造函数Bar.empty和Bar.random分别创
Flutter进阶之实现动画效果（十）

前面的两篇文章[动画效果(八).动画效果(九)]中,我们只需要统计产品和地区,如果现在增加一个统计项目--销售渠道,那么使用之前的堆叠条形图和分组条形图都不适合.我们可以将两者结合,使用分组+堆叠条形图,实际效果如下图所示: 如上图,我们使用同一种颜色的不同透明度表示不同的销售渠道,为了实现不同的透明度,我们需要先更新一下color_palette.dart文件的代码: import 'package:flutter/material.dart'; import 'dart:math'; cla

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

相关推荐

随机推荐