Flutter数字动画切换插件animated_number_switcher的使用

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

Flutter数字动画切换插件animated_number_switcher的使用

animated_number_switcher 是一个用于在 Flutter 中实现数字动画切换的包。它特别适用于需要展示数字变化时的平滑过渡效果。

开始使用

要使用这个包，在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  animated_number_switcher: ^x.x.x

然后运行 flutter pub get 来安装该包。

使用方法

示例

下面是一个简单的示例，展示了如何使用 animated_number_switcher 包来实现数字动画切换的效果。

演示

示例代码

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:animated_number_switcher/animated_number_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: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  final _random = Random();

  void _incrementCounter() {
    setState(() {
      _counter = _random.nextInt(_list.length);
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '点击按钮以查看动画',
            ),
            AnimatedNumberSwitcher.text(
              _list[_counter],
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

const _list = [
  '避免',
  '远离',
  '婴儿',
  '后面',
  '坏的',
  '包',
  '球',
  '书',
  '出生',
  '两者',
  '盒子',
  '男孩',
  '卡片',
  '关心',
  '机会',
  '文明',
  '声称',
  '班级',
  '清楚',
  '清晰地',
  '关闭',
  '教练',
];

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

Harmonyos Next教程
1 回复

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


当然，animated_number_switcher 是一个用于在 Flutter 中实现数字平滑过渡的动画插件。下面是一个简单的代码示例，展示如何使用 animated_number_switcher 来实现数字动画切换。

首先，确保你的 pubspec.yaml 文件中已经添加了 animated_number_switcher 依赖：

dependencies:
  flutter:
    sdk: flutter
  animated_number_switcher: ^2.0.0  # 请使用最新版本号

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

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

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _currentNumber = 0;

  void _incrementNumber() {
    setState(() {
      _currentNumber += 10; // 每次增加10作为示例
      if (_currentNumber > 100) {
        _currentNumber = 0; // 超过100则重置为0
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Animated Number Switcher Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              AnimatedNumberSwitcher(
                animationDuration: const Duration(seconds: 1), // 动画持续时间
                from: _currentNumber - (_currentNumber % 10), // 从当前数字的整十开始
                to: _currentNumber,
                builder: (context, number) {
                  return Text(
                    '$_number',
                    style: TextStyle(fontSize: 48, fontWeight: FontWeight.bold),
                  );
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _incrementNumber,
                child: Text('Increment Number'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

代码解释

  1. 依赖引入：在 pubspec.yaml 文件中添加 animated_number_switcher 依赖。
  2. 状态管理：使用 StatefulWidget 和 _MyAppState 来管理数字的状态。
  3. 数字动画：使用 AnimatedNumberSwitcher 来实现数字的平滑过渡。
    • animationDuration：设置动画的持续时间。
    • from 和 to：设置动画的起始值和结束值。这里我们从当前数字的整十开始，到当前数字结束。
    • builder：用于构建显示数字的组件。
  4. 按钮：使用 ElevatedButton 来触发数字的增加。

这个示例展示了如何使用 animated_number_switcher 来创建一个简单的数字动画效果。你可以根据需要调整动画的持续时间、起始值和结束值等参数。

回到顶部