Flutter键盘音效插件clackety的使用

Flutter键盘音效插件clackety的使用

clackety 是一个轻量级的 Flutter 包（无外部依赖），用于模拟文本输入（类似于打字机/打字员）。你可以通过控制器提供新的输入目标，并且 clackety 将会更新已经写入的文本。

特性

• 实时纠正文本，当新的输入目标被提供时
• 无需控制器即可轻松使用
• 无依赖，轻量且优化
• 点击以快速前进
• 支持 onComplete 回调

开始使用

首先，在你的项目中安装该包：

flutter pub add clackety

基本用法

作为 Text() 小部件的替代品：

Clackety.text("Clackety Example")

高级用法

使用 Clackety 控制器：

// 创建一个 ClacketyController
_clacketyController = ClacketyController(value: '');

// 在你的 UI 小部件树中添加 Clackety 小部件
Clackety(
    controller: _clacketyController,
    builder: (context, text) => Text(text)),

// 当需要时输入新文本！
_clacketyController.type('... Happy clacking!');

完整示例

以下是一个完整的示例代码，展示了如何使用 clackety 插件：

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(MaterialApp(
      title: 'Clackety Example',
      theme: ThemeData.dark().copyWith(
        appBarTheme: const AppBarTheme(color: Colors.pink),
        textTheme: ThemeData.dark().textTheme.copyWith(
            bodyMedium: const TextStyle(color: Colors.white, fontSize: 24)),
      ),
      home: ClacketyExample()));
}

class ClacketyExample extends StatelessWidget {
  final _clacketyController = ClacketyController(value: '');

  ClacketyExample({super.key}) {
    WidgetsBinding.instance.addPostFrameCallback((_) => _startTyping());
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
          child: Icon(Icons.restart_alt),
          onPressed: () {
            _startTyping();
          }),
      // 你可以在任何小部件中使用 Clackety，甚至是在应用栏中！
      appBar: AppBar(
        title: Clackety.text(
          "Clackety Example",
        ),
        actions: [
          IconButton(onPressed: () {}, icon: const Icon(Icons.settings))
        ],
      ),

      body: Padding(
        padding: const EdgeInsets.all(48),
        // 这演示了一个更高级的用例，使用了控制器
        child: Clackety(
            controller: _clacketyController,
            builder: (context, text) => Text(text)),
      ),
    );
  }

  // 示例：使用控制器输入文本
  Future _startTyping() async {
    // 你不会像这样使用，但只是为了演示！
    _clacketyController.type(
      'Hello World!',
      onComplete: () async {
        _clacketyController.type("Hello, I'm Clackety!",
            onComplete: _asyncSimulation);
      },
    );
  }

  /// 这只是模拟使用 clackety 更新进度
  Future _asyncSimulation([int? step]) async {
    final progress = ((step ?? 0) + 1) * 10;

    _clacketyController.type(
        step == null ? 'Progress simulation...' : 'Progress $progress%',
        onComplete:
            progress >= 100 ? _bye : () => _asyncSimulation((step ?? 0) + 1));
  }

  Future _bye() async {
    _clacketyController.type('... Happy clacking!');
  }
}