Flutter旋转动画切换插件rotated_animated_switcher的使用

Flutter旋转动画切换插件rotated_animated_switcher的使用

特性

  • 可自定义宽度、高度、激活颜色和禁用颜色。
  • 支持动画过渡。
  • 可选的勾号旋转。

安装

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

dependencies:
  rotated_animated_switcher: ^0.0.1

使用

首先，在你的 Dart 文件中导入 rotated_animated_switcher 包：

import 'package:rotated_animated_switcher/rotated_animated_switcher.dart';

示例

下面是一个完整的示例代码，展示了如何使用 RotatedAnimatedSwitcher 插件。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '自定义Cupertino切换器示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _switcherValue = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('自定义Cupertino切换器示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            RotatedAnimatedSwitcher(
              initialValue: _switcherValue,
              width: 60.0,
              height: 30.0,
              activeColor: Colors.green,
              disabledColor: Colors.red,
              duration: const Duration(milliseconds: 300),
              shouldRotate: true,
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _switcherValue = !_switcherValue;
                });
              },
              child: const Text('切换开关'),
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter旋转动画切换插件rotated_animated_switcher的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


当然，以下是一个关于如何在Flutter中使用rotated_animated_switcher插件来实现旋转动画切换的示例代码。这个插件提供了类似于AnimatedSwitcher的功能，但它通过旋转动画来进行子widget之间的切换。

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

dependencies:
  flutter:
    sdk: flutter
  rotated_animated_switcher: ^0.3.0  # 请检查最新版本号

然后，运行flutter pub get来获取依赖。

接下来，你可以在你的Flutter应用中使用RotatedAnimatedSwitcher。以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Rotated Animated Switcher Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Rotated Animated Switcher Demo'),
      ),
      body: Center(
        child: RotatedAnimatedSwitcher(
          duration: Duration(seconds: 1),
          child: _buildChild(_currentIndex),
          key: ValueKey<int>(_currentIndex),  // 使用ValueKey来确保正确的动画匹配
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _currentIndex = (_currentIndex + 1) % 3;  // 循环切换三个子widget
          });
        },
        tooltip: 'Next',
        child: Icon(Icons.navigate_next),
      ),
    );
  }

  Widget _buildChild(int index) {
    switch (index) {
      case 0:
        return Container(
          color: Colors.red,
          width: 100,
          height: 100,
          child: Center(child: Text('Red')),
        );
      case 1:
        return Container(
          color: Colors.green,
          width: 100,
          height: 100,
          child: Center(child: Text('Green')),
        );
      case 2:
        return Container(
          color: Colors.blue,
          width: 100,
          height: 100,
          child: Center(child: Text('Blue')),
        );
      default:
        return Container();
    }
  }
}

在这个示例中：

  1. 我们创建了一个简单的Flutter应用，其中包含一个RotatedAnimatedSwitcher。
  2. RotatedAnimatedSwitcher有三个子widget，分别是红色、绿色和蓝色的容器。
  3. 使用floatingActionButton来触发状态更改，从而切换_currentIndex的值，这将导致RotatedAnimatedSwitcher在子widget之间进行旋转动画切换。
  4. key: ValueKey<int>(_currentIndex)确保在子widget切换时，RotatedAnimatedSwitcher能够正确地匹配新旧widget，从而实现平滑的动画效果。

你可以根据需要调整动画的持续时间（duration）和子widget的布局。

回到顶部