aagarwal1012 / aagarwal1012/Animated-Text-Kit

Added maxlines to TypewriterAnimatedText

Open Beginner friendly
#334 1 comment 2 reactions 0 assignees View on GitHub
Dominant language
Dart
Stars
1.8k
Forks
321
PR merge metrics
No merged PRs in 30d

Description

Who faced with having problem for maxlines can use this:

Just Modify `TypewriterAnimatedText`

to

```
import 'package:flutter/material.dart';
import 'animated_text.dart';

/// Animated Text that displays a [Text] element as if it is being typed one
/// character at a time. Similar to [TyperAnimatedText], but shows a cursor.
///
/// ![Typewriter example](https://raw.githubusercontent.com/aagarwal1012/Animated-Text-Kit/master/display/typewriter.gif)
class TypewriterAnimatedText extends AnimatedText {
// The text length is padded to cause extra cursor blinking after typing.
static const extraLengthForBlinks = 8;

/// The [Duration] of the delay between the apparition of each characters
///
/// By default it is set to 30 milliseconds.
final Duration speed;

/// The [Curve] of the rate of change of animation over time.
///
/// By default it is set to Curves.linear.
final Curve curve;

/// Cursor text. Defaults to underscore.
final String cursor;
final int? maxLines;

TypewriterAnimatedText(
String text, {
TextAlign textAlign = TextAlign.start,
TextStyle? textStyle,
this.speed = const Duration(milliseconds: 30),
this.curve = Curves.linear,
this.maxLines,
this.cursor = '_',
}) : super(
text: text,
textAlign: textAlign,
textStyle: textStyle,
duration: speed * (text.characters.length + extraLengthForBlinks),
);

late Animation _typewriterText;

@override
Duration get remaining =>
speed *
(textCharacters.length + extraLengthForBlinks - _typewriterText.value);

@override
void initAnimation(AnimationController controller) {
_typewriterText = CurveTween(
curve: curve,
).animate(controller);
}

@override
Widget completeText(BuildContext context) => RichText(
text: TextSpan(
children: [
TextSpan(text: text),
TextSpan(
text: cursor,
style: const TextStyle(color: Colors.transparent),
)
],
style: DefaultTextStyle.of(context).style.merge(textStyle),
),
maxLines: maxLines, // Apply maxLines here
textAlign: textAlign,
);

/// Widget showing partial text
@override
Widget animatedBuilder(BuildContext context, Widget? child) {
/// Output of CurveTween is in the range [0, 1] for majority of the curves.
/// It is converted to [0, textCharacters.length + extraLengthForBlinks].
final textLen = textCharacters.length;
final typewriterValue = (_typewriterText.value.clamp(0, 1) *
(textCharacters.length + extraLengthForBlinks))
.round();

var showCursor = true;
var visibleString = text;
if (typewriterValue == 0) {
visibleString = '';
showCursor = false;
} else if (typewriterValue > textLen) {
showCursor = (typewriterValue - textLen) % 2 == 0;
} else {
visibleString = textCharacters.take(typewriterValue).toString();
}

return RichText(
text: TextSpan(
children: [
TextSpan(text: visibleString),
TextSpan(
text: cursor,
style:
showCursor ? null : const TextStyle(color: Colors.transparent),
)
],
style: DefaultTextStyle.of(context).style.merge(textStyle),
),
maxLines: maxLines, // Apply maxLines here
textAlign: textAlign,
);
}
}

/// Animation that displays [text] elements, as if they are being typed one
/// character at a time. Similar to [TyperAnimatedTextKit], but shows a cursor.
///
/// ![Typewriter example](https://raw.githubusercontent.com/aagarwal1012/Animated-Text-Kit/master/display/typewriter.gif)
@Deprecated('Use AnimatedTextKit with TypewriterAnimatedText instead.')
class TypewriterAnimatedTextKit extends AnimatedTextKit {
TypewriterAnimatedTextKit({
Key? key,
required List text,
TextAlign textAlign = TextAlign.start,
required TextStyle textStyle,
Duration speed = const Duration(milliseconds: 30),
Duration pause = const Duration(milliseconds: 1000),
bool displayFullTextOnTap = false,
bool stopPauseOnTap = false,
VoidCallback? onTap,
void Function(int, bool)? onNext,
void Function(int, bool)? onNextBeforePause,
VoidCallback? onFinished,
bool isRepeatingAnimation = true,
bool repeatForever = true,
int totalRepeatCount = 3,
Curve curve = Curves.linear,
}) : super(
key: key,
animatedTexts:
_animatedTexts(text, textAlign, textStyle, speed, curve),
pause: pause,
displayFullTextOnTap: displayFullTextOnTap,
stopPauseOnTap: stopPauseOnTap,
onTap: onTap,
onNext: onNext,
onNextBeforePause: onNextBeforePause,
onFinished: onFinished,
isRepeatingAnimation: isRepeatingAnimation,
repeatForever: repeatForever,
totalRepeatCount: totalRepeatCount,
);

static List _animatedTexts(
List text,
TextAlign textAlign,
TextStyle textStyle,
Duration speed,
Curve curve,
) =>
text
.map((_) => TypewriterAnimatedText(
_,
textAlign: textAlign,
textStyle: textStyle,
speed: speed,
curve: curve,
))
.toList();
}

```

Contributor guide

Open the contributing guide

Research direction

The issue provides a full code snippet for adding maxLines to TypewriterAnimatedText. Start by locating the existing TypewriterAnimatedText class in the codebase, likely in lib/src/typewriter.dart. Compare the provided code with the current implementation to see what changes are needed. Add the maxLines parameter to the constructor and apply it to the RichText widgets in completeText and animatedBuilder. Test the change by running the example app or existing tests to ensure the animation still works correctly with the new parameter.

Written by the indexing model from the issue text.

Assessment

Tech stack
dart, flutter
Domain
frontend, mobile
Issue type
Feature
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
75/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.