Flutter动画开关插件animated_icon_switch的使用

发布于 1周前 作者 itying888 来自 Flutter

Flutter 动画开关插件 animated_icon_switch 的使用

开始使用

首先，你需要将 animated_icon_switch 包导入到你的项目中。

import 'package:animated_icon_switch.dart';

使用示例

这里有一个简单的开/关动画开关示例，带有锁/解锁图标。

// Simple lock/unlock switch with animations
AnimatedIconSwitch(
    withIcons: true, // 是否在开关上显示图标
    iconOnThumb: true, // 图标是否在滑块上
    withIconAnimation: true, // 图标是否具有弹出动画
    activeIconColor: Colors.red, // 激活状态下的图标颜色
    activeColor: Colors.red, // 激活状态下的开关颜色
    inactiveIconColor: Colors.green, // 非激活状态下的图标颜色
    inactiveColor: Colors.green, // 非激活状态下的开关颜色
    activeIcon: Icons.lock, // 激活状态下的图标
    inactiveIcon: Icons.lock_open, // 非激活状态下的图标
    shadowColor: Colors.grey.withAlpha(150), // 阴影颜色
    elevation: 6, // 高度阴影
    value: value, // 当前值（true 或 false）
    onChanged: (v) { // 值改变时的回调
        value = v;
        setState(() {}); // 更新状态
    },
),

这里还有一个简单的亮/暗模式开关示例。

// Simple light/dark mode switch with animations
AnimatedIconSwitch(
    withIcons: true, // 是否在开关上显示图标
    withIconAnimation: true, // 图标是否具有弹出动画
    activeColor: Colors.grey.shade900, // 激活状态下的开关颜色
    activeIcon: Icons.brightness_2, // 激活状态下的图标
    inactiveIcon: Icons.sunny, // 非激活状态下的图标
    shadowColor: Colors.grey.withAlpha(150), // 阴影颜色
    elevation: 6, // 高度阴影
    value: value, // 当前值（true 或 false）
    onChanged: (v) { // 值改变时的回调
        value = v;
        setState(() {}); // 更新状态
    },
),

更多关于Flutter动画开关插件animated_icon_switch的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter动画开关插件animated_icon_switch的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter中使用animated_icon_switch插件的一个简单示例。animated_icon_switch是一个用于创建带有动画图标的开关控件的Flutter包。

首先，你需要在pubspec.yaml文件中添加依赖项：

dependencies:
  flutter:
    sdk: flutter
  animated_icon_switch: ^x.y.z  # 请将x.y.z替换为当前最新版本号

然后，运行flutter pub get来安装依赖项。

接下来，在你的Dart文件中，你可以按照以下方式使用AnimatedIconSwitch：

import 'package:flutter/material.dart';
import 'package:animated_icon_switch/animated_icon_switch.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Icon Switch Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Animated Icon Switch Example'),
        ),
        body: Center(
          child: AnimatedIconSwitchExample(),
        ),
      ),
    );
  }
}

class AnimatedIconSwitchExample extends StatefulWidget {
  @override
  _AnimatedIconSwitchExampleState createState() => _AnimatedIconSwitchExampleState();
}

class _AnimatedIconSwitchExampleState extends State<AnimatedIconSwitchExample> {
  bool isSwitchedOn = false;

  void handleSwitchChanged(bool value) {
    setState(() {
      isSwitchedOn = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedIconSwitch(
      value: isSwitchedOn,
      onChanged: handleSwitchChanged,
      activeIcon: Icons.star,
      inactiveIcon: Icons.star_border,
      activeColor: Colors.amber,
      inactiveColor: Colors.grey,
      size: 48.0,
    );
  }
}

在这个示例中：

  • AnimatedIconSwitch是一个自定义的开关控件，它接受多个参数来配置其行为和外观。
  • value参数表示开关的当前状态（开或关）。
  • onChanged是一个回调函数，当开关状态改变时会被调用。
  • activeIcon和inactiveIcon分别指定开关在开和关状态下的图标。
  • activeColor和inactiveColor分别指定开关在开和关状态下的颜色。
  • size参数用于设置图标的大小。

你可以根据需要调整这些参数以适应你的应用程序的UI和逻辑需求。这个示例展示了如何使用animated_icon_switch插件来创建一个具有动画效果的开关控件。

回到顶部