Flutter文本打字效果插件typewrite_text的使用

typewrite_text

typewrite_text 是一个带有自定义功能的打字机文本动画包装器。它支持iOS、Android、Web、Windows、macOS和Linux平台。

动机

在创建个人网站时，我决定通过添加一个小而引人注目的文本动画来为网站增添魅力。这一细节不仅使我的网站更加美观，还带来了动态感，使其在众多网站中脱颖而出。虽然有一些包提供了几乎满足需求的功能，但它们并不能完全符合我的预期。

功能

• 支持设置前进和反向动画的不同延迟。
• 支持设置动画开始前和结束后的不同延迟。
• 可以仅使用“前进”模式。
• 任何Unicode符号都可以用作“光标”符号。
• 可以选择是否使用动画文本光标。
• 支持设置文本主题。
• 在Android和iOS设备上可以使用振动效果。

使用方法

基本动画

只需添加文本行并指定文本样式：

TypewriteText(
  linesOfText: ['Hello World', 'Hello Flutter', 'Hello Dart'],
  textStyle: TextStyle(color: Colors.red),
  cursorSymbol: '|',
),

单边动画（不显示动画文本光标）

TypewriteText(
  linesOfText: ['Hello World', 'Hello Flutter', 'Hello Dart'],
  textStyle: TextStyle(color: Colors.blue, fontSize: 20, fontWeight: FontWeight.bold),
  reverseAnimationDuration: Duration.zero,
  beforeAnimationDuration: Duration.zero,
)

更多示例可以在包的"example"文件夹中找到。

文档

示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用typewrite_text：

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

void main() => runApp(const TextPackageApp());

const list1 = [
  'Hello World',
  'Hello Flutter',
  'Hello Dart',
];

const list2 = [
  "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
];

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text Package Demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('typewrite_text demo'),
        ),
        body: const SingleChildScrollView(
          child: Padding(
            padding: EdgeInsets.all(24),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                /// basic animation
                TypewriteText(
                  linesOfText: list1,
                  textStyle: TextStyle(color: Colors.red),
                  cursorSymbol: '|',
                ),
                SizedBox(height: 20),

                /// oneside animation (without reverse animation)
                TypewriteText(
                  linesOfText: list1,
                  textStyle: TextStyle(
                      color: Colors.blue,
                      fontSize: 20,
                      fontWeight: FontWeight.bold),
                  reverseAnimationDuration: Duration.zero,
                  beforeAnimationDuration: Duration.zero,
                ),
                SizedBox(height: 20),

                /// multiline text animation
                SizedBox(
                  height: 100,
                  child: TypewriteText(
                    linesOfText: list2,
                    textStyle: TextStyle(color: Colors.black),
                    forwardAnimationDuration: Duration(milliseconds: 50),
                    reverseAnimationDuration: Duration(milliseconds: 20),
                    cursorColor: Colors.red,
                    cursorSymbol: '|',
                  ),
                ),

                SizedBox(height: 20),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

通过以上代码，您可以在Flutter应用中实现多种打字机文本动画效果。希望这对您有所帮助！