Flutter动画文本插件basic_animated_text的使用

Flutter动画文本插件basic_animated_text的使用

BasicAnimatedText 是一个自定义的 Flutter 小部件，用于创建一个动画文本效果，其中文本逐字符出现然后逐字符消失。此小部件非常适合在您的 Flutter 应用程序中创建吸引人的文本动画。

Buy Me A Coffee ☕️

Buy Me A Coffee

特性

  • 可定制的文本：将任何 List<String> 设置为动画文本。
  • 可配置的持续时间：指定写入和删除动画的持续时间。
  • 自定义文本样式：应用任何 TextStyle 到动画文本。

使用

导入小部件：

import 'package:basic_animated_text/basic_animated_text.dart';

在您的 Flutter 应用程序中实现该小部件：

BasicAnimatedText(
  texts: "Your Animated Text Here".split(' '), //['Your', 'Animated', 'Text', 'Here']
  writeDuration: Duration(milliseconds: 150),
  deleteDuration: Duration(milliseconds: 50),
  textStyle: TextStyle(fontSize: 24, color: Colors.black),
)

参数

  • texts (List<String>，必需）：要进行动画处理的文本。
  • writeDuration (Duration，可选）：每个字符写入的持续时间。默认为 150 毫秒。
  • deleteDuration (Duration，可选）：每个字符删除的持续时间。默认为 50 毫秒。
  • textStyle (TextStyle，可选）：文本的样式。默认为 TextStyle(fontSize: 24)。

示例

Example GIF 
BasicAnimatedText(
  texts: "Your Animated Text Here".split(' '), //['Your', 'Animated', 'Text', 'Here']
  writeDuration: Duration(milliseconds: 200),
  deleteDuration: Duration(milliseconds: 100),
  textStyle: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
)

完整示例代码

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

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: BasicAnimatedText(
            texts: ['Hello, world!', 'Hello, Flutter!'],
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


basic_animated_text 是一个用于在 Flutter 应用中创建简单文本动画的插件。它提供了几种基本的动画效果，如逐字显示、淡入淡出等。以下是如何使用 basic_animated_text 插件的步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  basic_animated_text: ^1.0.0  # 请检查最新版本

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

2. 导入包

在你的 Dart 文件中导入 basic_animated_text 包：

import 'package:basic_animated_text/basic_animated_text.dart';

3. 使用 BasicAnimatedText

BasicAnimatedText 是一个小部件，你可以像使用普通 Text 小部件一样使用它。你可以通过设置不同的属性来控制动画效果。

基本用法

BasicAnimatedText(
  'Hello, Flutter!',
  style: TextStyle(fontSize: 24),
  duration: Duration(seconds: 2),
  animationType: AnimatedTextType.fadeIn, // 动画类型
);

参数说明

  • text: 要显示的文本。
  • style: 文本的样式，类似于 Text 小部件的 style 参数。
  • duration: 动画的持续时间。
  • animationType: 动画类型，可选值包括：
    • AnimatedTextType.fadeIn: 淡入效果。
    • AnimatedTextType.typer: 逐字显示效果。
    • AnimatedTextType.slideIn: 滑动进入效果。
    • AnimatedTextType.scale: 缩放效果。
  • textAlign: 文本对齐方式。
  • textDirection: 文本方向。

示例代码

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('BasicAnimatedText Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              BasicAnimatedText(
                'Welcome to Flutter!',
                style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
                duration: Duration(seconds: 3),
                animationType: AnimatedTextType.fadeIn,
              ),
              SizedBox(height: 20),
              BasicAnimatedText(
                'Learn Flutter with fun!',
                style: TextStyle(fontSize: 24),
                duration: Duration(seconds: 2),
                animationType: AnimatedTextType.typer,
              ),
              SizedBox(height: 20),
              BasicAnimatedText(
                'Slide in effect!',
                style: TextStyle(fontSize: 24),
                duration: Duration(seconds: 2),
                animationType: AnimatedTextType.slideIn,
              ),
            ],
          ),
        ),
      ),
    );
  }
}
回到顶部