Flutter打字指示器插件flutter_typing_indicator的使用

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

Flutter打字指示器插件flutter_typing_indicator的使用

Flutter Typing Indicator

一个用于Flutter应用程序的可定制化打字指示器小部件，非常适合模拟“正在输入…”的效果，并且带有动画点。该小部件提供了全面的颜色、大小、形状、阴影、渐变等自定义选项。

Demo

快速演示

快速演示

完整演示

完整演示

特性

  • 可以自定义点的颜色、形状、渐变、边框、阴影等。
  • 可以使用图像而不是纯色作为点。
  • 灵活控制点的数量和动画持续时间。
  • 适用于聊天应用或任何需要“正在输入…”动画的场景。

安装

将此小部件直接添加到您的Flutter项目：

  1. 在pubspec.yaml文件中添加以下依赖项：

    dependencies:
  flutter:
    sdk: flutter

  2. 在Dart文件中导入TypingIndicator小部件：

    import 'package:flutter_typing_indicator/flutter_typing_indicator.dart';

使用

以下是使用TypingIndicator的基本示例：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Typing Indicator Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const Scaffold(
        body: Center(
          child: TypingIndicator(
            dotColor: Colors.blue,
            backgroundColor: Colors.white,
            dotSize: 10.0,
            dotCount: 4,
            duration: Duration(milliseconds: 1500),
            padding: 12.0,
            dotShape: BoxShape.circle,
            borderRadius: BorderRadius.all(Radius.circular(15.0)),
            dotShadow: [BoxShadow(blurRadius: 2, color: Colors.black)],
            isGradient: true,
            dotGradient: LinearGradient(
              colors: [Colors.blue, Colors.lightBlueAccent],
            ),
            isDotImage: true,
            dotImage: DecorationImage(
              image: AssetImage('assets/images/typing_indicator.png'),
              fit: BoxFit.cover,
            ),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter打字指示器插件flutter_typing_indicator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter打字指示器插件flutter_typing_indicator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中集成和使用flutter_typing_indicator插件的一个简单示例。这个插件通常用于在聊天应用中显示用户正在输入的状态。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  flutter_typing_indicator: ^2.0.0  # 请检查最新版本号

2. 导入插件

在你的Dart文件中导入插件：

import 'package:flutter_typing_indicator/flutter_typing_indicator.dart';

3. 使用插件

下面是一个简单的例子，展示了如何在聊天界面中使用flutter_typing_indicator。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ChatScreen(),
    );
  }
}

class ChatScreen extends StatefulWidget {
  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> with SingleTickerProviderStateMixin {
  bool isTyping = false;
  Timer? typingTimer;

  void startTyping() {
    setState(() {
      isTyping = true;
    });

    typingTimer = Timer(Duration(seconds: 5), () {  // 模拟用户停止输入
      setState(() {
        isTyping = false;
      });
    });
  }

  void stopTyping() {
    typingTimer?.cancel();
    setState(() {
      isTyping = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chat Screen'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Message from other user...',
              style: TextStyle(fontSize: 18),
            ),
            SizedBox(height: 20),
            TypingIndicator(
              isTyping: isTyping,
              typingStyle: TypingDotsStyle(
                dotCount: 3,
                dotSize: 18.0,
                dotSpacing: 8.0,
                dotColor: Colors.blue,
                duration: Duration(milliseconds: 500),
              ),
              emptyStyle: TypingDotsStyle(
                dotCount: 3,
                dotSize: 18.0,
                dotSpacing: 8.0,
                dotColor: Colors.grey,
              ),
            ),
            SizedBox(height: 20),
            TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                hintText: 'Type a message...',
              ),
              onChanged: (value) {
                if (value.isNotEmpty) {
                  startTyping();
                } else {
                  stopTyping();
                }
              },
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    typingTimer?.cancel();
    super.dispose();
  }
}

解释

  1. 添加依赖：在pubspec.yaml中添加flutter_typing_indicator。
  2. 导入插件：在Dart文件中导入flutter_typing_indicator。
  3. 创建UI：
    • 使用TypingIndicator组件来显示输入指示器。
    • 通过TextField的onChanged回调来控制isTyping状态。
    • 使用Timer来模拟用户在5秒内停止输入。

这个示例展示了如何在聊天应用中动态显示和隐藏打字指示器。你可以根据需要调整样式和逻辑。

回到顶部