Abebe is a Flutter package that dynamically adjusts the speed of a Lottie animation based on the user's typing speed. It provides real-time synchronization between typing activity and animation playback, creating a responsive and engaging user experience.
- Real-time Animation Control: Adjusts animation speed based on typing speed.
- Smooth Transitions: Uses exponential decay for smooth speed changes.
- Customizable Sensitivity: Control how much the animation responds to typing speed.
- Progress Preservation: Maintains animation progress during speed changes.
- Inactivity Reset: Automatically resets to normal speed after 1 second of inactivity.
- Comprehensive Testing: Includes unit and widget tests for reliability.
Add the Abebe
package to your pubspec.yaml
file:
dependencies:
abebe: ^1.1.0
Then, run the following command to install the package:
flutter pub get
-
Import the package:
import 'package:abebe/abebe.dart';
-
Add the
Lottie
package to yourpubspec.yaml
file (if not already added):dependencies: lottie: ^2.0.0
-
Place your Lottie JSON file in the
assets
folder and updatepubspec.yaml
:flutter: assets: - assets/sample.json
Here’s a simple example of how to use the Abebe
package:
import 'package:flutter/material.dart';
import 'package:abebe/abebe.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Abebe Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
final TextEditingController _controller = TextEditingController();
late AnimationController _animationController;
@override
void initState() {
super.initState();
_animationController = AnimationController(
vsync: this,
duration: const Duration(seconds: 1),
);
}
@override
void dispose() {
_animationController.dispose();
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Abebe Example'),
),
body: Column(
children: [
Abebe(
assetPath: 'assets/sample.json',
textController: _controller,
animationController: _animationController,
sensitivity: 0.3, // Adjust sensitivity here
),
Padding(
padding: const EdgeInsets.all(20.0),
child: TextField(
controller: _controller,
decoration: const InputDecoration(
hintText: 'Type here to control the animation...',
border: OutlineInputBorder(),
),
autofocus: true,
),
),
],
),
);
}
}
Parameter | Description |
---|---|
assetPath (required) |
Path to the Lottie JSON file. |
textController (required) |
TextEditingController linked to the text field. |
animationController (required) |
AnimationController to control the animation. |
sensitivity (optional) |
Controls how much the animation responds to typing speed. Default is 0.2 . |
For a complete example, check out the example folder in the repository.
The package includes comprehensive unit and widget tests. To run the tests:
flutter test test/abebe_test.dart
This package is open source and available under the MIT License. See the LICENSE file for more information.
Contributions are welcome! Feel free to fork the repository, make improvements, and submit pull requests. Please ensure your code follows the project's coding standards and includes appropriate tests.
For any issues or questions, feel free to open an issue in the GitHub repository or contact the maintainers.