Flutter文本随机选择动画插件random_selection_text_animation的使用

Flutter文本随机选择动画插件random_selection_text_animation的使用

演示

可配置字段

  • 每个字符变化的帧数
  • 移动到下一个符号时的变化频率
  • 动画的最大时间限制
  • 符号集

示例代码

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Random Selection Text Animation'),
    );
  }
}

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

  final String title;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          children: const [
            // 第一个示例
            LetterSelectionAnimatedText(
              textWidget: Text(
                "HELLO",
                style: TextStyle(fontFamily: 'Courier New', fontSize: 50),
              ),
              charSets: {CharSet.englishAlphabetUpperCase}, // 使用大写英文字母集
            ),
            // 第二个示例
            LetterSelectionAnimatedText(
              textWidget: Text(
                "FLUTTER",
                style: TextStyle(fontSize: 80),
              ),
              charSets: {CharSet.digits}, // 使用数字集
              framesPerSymbolChange: 4, // 每个字符变化的帧数
            ),
            // 第三个示例
            LetterSelectionAnimatedText(
              textWidget: Text(
                "community",
                style: TextStyle(
                  fontFamily: 'Monospace',
                  fontSize: 30,
                ),
              ),
              charSets: {CharSet.custom}, // 自定义字符集
              customCharSet: '0_oO', // 自定义字符集为 '0_oO'
              framesPerSymbolChange: 7, // 每个字符变化的帧数
              symbolChangesPerPosition: 7, // 每个位置的字符变化频率
              timeLimit: Duration(seconds: 10), // 动画的最大时间限制
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter文本随机选择动画插件random_selection_text_animation的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter文本随机选择动画插件random_selection_text_animation的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


random_selection_text_animation 是一个 Flutter 插件，用于在文本中随机选择字符并应用动画效果。这个插件可以为你的应用程序增添一些动态和趣味性，尤其是在需要突出显示某些文本内容时。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  random_selection_text_animation: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装插件。

使用插件

以下是一个简单的示例，展示了如何使用 random_selection_text_animation 插件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Random Selection Text Animation'),
        ),
        body: Center(
          child: RandomSelectionTextAnimation(
            text: 'Hello, Flutter!',
            textStyle: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
            animationDuration: Duration(seconds: 2),
            selectionColor: Colors.blue,
            onTap: () {
              print('Text tapped!');
            },
          ),
        ),
      ),
    );
  }
}
回到顶部