Flutter文本输入插件type_text的使用

Type Text 是一个简单的Flutter小部件，它可以让你的文本像打字机一样逐字显示。以下是如何在Flutter项目中使用这个插件的详细步骤和示例代码。

插件简介

这是一个简单的Flutter小部件，它将你的文本以打字机的方式显示出来。

基本用法

你可以将你的 Text 小部件替换为 TypeText 小部件，并提供一个 Duration 字段来控制文本的显示速度。

TypeText(
    """Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Sed at scelerisque dui, ut tristique neque. 
    Sed feugiat quis lacus non venenatis. 
    Sed ultricies tellus nunc.""",
    duration: const Duration(seconds: 5),
    style: TextStyle(fontSize: 36),
    onType: (progress) {
        // 在这里可以添加进度回调函数
    },
    // 你还可以使用所有其他Text小部件的字段
)

使用RichText

你也可以使用 TypeRichText 来实现富文本效果：

TypeRichText(
    text: const TextSpan(
    text: 'Hello ',
    style: TextStyle(
        color: Colors.black,
    ),
    children: <TextSpan>[
        TextSpan(
        text: 'bold',
        style: TextStyle(
            fontWeight: FontWeight.bold, color: Colors.red),
        ),
        TextSpan(
        text: ' world!',
        style: TextStyle(color: Colors.blue),
        ),
    ],
    ),
    duration: const Duration(seconds: 1),
    onType: (progress) {
        debugPrint("Rich text %${(progress * 100).toStringAsFixed(0)} completed.");
    },
)

完整示例

下面是一个完整的示例应用程序，展示了如何使用 TypeText 和 TypeRichText：

import 'package:flutter/material.dart';
import 'package:type_text/type_text.dart';
import 'package:type_text/type_rich_text.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(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo'),
    );
  }
}

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> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Center(
          child: Column(
            children: [
              TypeText(
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit. 🙂 Donec sollicitudin velit id finibus aliquet. ",
                duration: const Duration(seconds: 1),
                onType: (progress) {
                  debugPrint("Normal text %${(progress * 100).toStringAsFixed(0)} completed.");
                },
              ),
              TypeRichText(
                text: const TextSpan(
                  text: 'Hello ',
                  style: TextStyle(
                    color: Colors.black,
                  ),
                  children: <TextSpan>[
                    TextSpan(
                      text: 'bold',
                      style: TextStyle(
                          fontWeight: FontWeight.bold, color: Colors.red),
                    ),
                    TextSpan(
                      text: ' world!',
                      style: TextStyle(color: Colors.blue),
                    ),
                  ],
                ),
                duration: const Duration(seconds: 1),
                onType: (progress) {
                  debugPrint("Rich text %${(progress * 100).toStringAsFixed(0)} completed.");
                },
              )
            ],
          ),
        ),
      ),
    );
  }
}