Skip to content

Commit

Permalink
🔧 Update Pack V1 #17
Browse files Browse the repository at this point in the history
  • Loading branch information
@SaadArdati
SaadArdati committed Dec 22, 2023
1 parent 1b1d9e6 commit 6937581
Show file tree
Hide file tree
Showing 6 changed files with 162 additions and 41 deletions.
45 changes: 31 additions & 14 deletions example/lib/stories/text_animation.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,7 @@ class _TextAnimationState extends State<TextAnimation> {
SizedBox(height: 32),
LikeButton(),
SizedBox(height: 32),
Flexible(
flex: 10,
child: IPhone()),
Flexible(flex: 10, child: IPhone()),
],
);
}
Expand Down Expand Up @@ -111,14 +109,15 @@ class _EmojiLineState extends State<EmojiLine> {
.roll(
'World🧳🌂☂️🧵🪡🪢🪭🧶👓🕶🥽🥼🦺👔👖🧣Effect',
tapeStrategy: const ConsistentSymbolTapeStrategy(4),
tapeSlideDirection: TapeSlideDirection.alternating,
tapeCurve: Curves.easeInOutQuart,
widthCurve: Curves.easeOutQuart,
symbolDistanceMultiplier: 2,
)
.animate(
toggle: toggle,
reverse: true,
duration: const Duration(milliseconds: 1000),
duration: const Duration(milliseconds: 1500),
),
),
);
Expand Down Expand Up @@ -220,6 +219,7 @@ class _TagLineState extends State<TagLine> {
.roll(
tagLines[tagLine],
symbolDistanceMultiplier: 2,
tapeSlideDirection: TapeSlideDirection.down,
tapeCurve: Curves.easeInOutCubic,
widthCurve: Curves.easeOutCubic,
widthDuration: const Duration(milliseconds: 1000),
Expand Down Expand Up @@ -385,7 +385,11 @@ class _LikeButtonState extends State<LikeButton> {
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.thumb_up_sharp, size: 18, color: Colors.white,),
const Icon(
Icons.thumb_up_sharp,
size: 18,
color: Colors.white,
),
const SizedBox(width: 8),
Text(
'${lastCounter}K',
Expand All @@ -412,7 +416,11 @@ class _LikeButtonState extends State<LikeButton> {
indent: 4,
endIndent: 4,
),
const Icon(Icons.thumb_down_sharp, size: 18, color: Colors.white,),
const Icon(
Icons.thumb_down_sharp,
size: 18,
color: Colors.white,
),
],
),
),
Expand All @@ -435,7 +443,11 @@ class _LikeButtonState extends State<LikeButton> {
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.share, size: 18, color: Colors.white,),
const Icon(
Icons.share,
size: 18,
color: Colors.white,
),
const SizedBox(width: 8),
Text(
'Share',
Expand Down Expand Up @@ -481,7 +493,11 @@ class _LikeButtonState extends State<LikeButton> {
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.download, size: 18, color: Colors.white,),
const Icon(
Icons.download,
size: 18,
color: Colors.white,
),
const SizedBox(width: 8),
Text(
switch ((downloadIteration - 1) % 3) {
Expand Down Expand Up @@ -639,7 +655,7 @@ class _ColorPalettePageState extends State<ColorPalettePage> {
theme: ThemeData(
brightness: Brightness.light,
colorSchemeSeed: Colors.blue,
textTheme: GoogleFonts.interTextTheme(),
// textTheme: GoogleFonts.robotoTextTheme(),
),
home: Padding(
padding: const EdgeInsets.only(left: 32, right: 32, top: 100),
Expand Down Expand Up @@ -675,20 +691,21 @@ class _ColorPalettePageState extends State<ColorPalettePage> {
).createShader(rect),
child: Text(
palettes.keys.elementAt(lastPage).toUpperCase(),
style: GoogleFonts.inter().copyWith(
fontWeight: FontWeight.w900,
color: Colors.white,
),
style: const TextStyle(
fontWeight: FontWeight.w700, color: Colors.white),
)
.roll(
palettes.keys.elementAt(currentPage).toUpperCase(),
staggerSoftness: 4,
staggerSoftness: 6,
reverseStaggerDirection: false,
tapeSlideDirection: TapeSlideDirection.down,
tapeCurve: Curves.easeOutBack,
widthCurve: Curves.easeOutQuart,
widthDuration: const Duration(milliseconds: 500),
)
.animate(
toggle: currentPage,
curve: Curves.linear,
duration: const Duration(milliseconds: 800),
),
),
Expand Down
4 changes: 2 additions & 2 deletions lib/src/effects/effects.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ export 'effect.dart';
export 'opacity_effect.dart';
export 'rotation_effect.dart';
export 'scale_effect.dart';
export 'shake_effect.dart';
export 'skew_effect.dart';
export 'text/text_extensions.dart';
export 'transform_effect.dart';
export 'translate_effect.dart';
export 'shake_effect.dart';
export 'text/text_extensions.dart';
53 changes: 39 additions & 14 deletions lib/src/effects/text/rolling_text_controller.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@ class RollingTextController with ChangeNotifier {
/// new text.
final SymbolTapeStrategy tapeStrategy;

/// Determines the direction in which each tape of characters will
/// slide.
final TapeSlideDirection tapeSlideDirection;

/// If non-null, the style to use for this text.
///
/// If the style's "inherit" property is true, the style will be merged with
Expand Down Expand Up @@ -95,6 +99,7 @@ class RollingTextController with ChangeNotifier {
required this.oldText,
required this.newText,
required this.tapeStrategy,
this.tapeSlideDirection = TapeSlideDirection.up,
this.style,
this.strutStyle,
this.textAlign,
Expand Down Expand Up @@ -175,14 +180,21 @@ class RollingTextController with ChangeNotifier {
Widget paintTape(
int tapeIndex,
double value, {
bool? directionReversed,
Curve widthCurve = appleEaseInOut,
Duration widthDuration = const Duration(milliseconds: 350),
double? fixedWidth,
}) {
final painter = tapePainters[tapeIndex];
directionReversed ??= switch (tapeSlideDirection) {
TapeSlideDirection.up => false,
TapeSlideDirection.down => true,
TapeSlideDirection.alternating => tapeIndex % 2 == 0,
TapeSlideDirection.random => Random('$tapeIndex'.hashCode).nextBool(),
};
final selection = selectionAtTapeIndexNearValue(
tapeIndex,
value > 0.5,
value > 0.5 ? !directionReversed : directionReversed,
);
final rects = painter
.getBoxesForSelection(selection, boxHeightStyle: ui.BoxHeightStyle.max)
Expand Down Expand Up @@ -210,19 +222,32 @@ class RollingTextController with ChangeNotifier {

/// Builds a list of tapes that represent the characters to roll through
/// for each character index between the old and new text.
List<String> buildTapes() => [
for (int i = 0;
i < max(oldText.characters.length, newText.characters.length);
i++)
tapeStrategy.build(
oldText.characters.length <= i
? _kZeroWidth
: oldText.characters.elementAt(i),
newText.characters.length <= i
? _kZeroWidth
: newText.characters.elementAt(i),
),
];
List<String> buildTapes() {
final tapes = <String>[];
final longest = max(oldText.characters.length, newText.characters.length);
for (int i = 0; i < longest; i++) {
final String tape = tapeStrategy.build(
oldText.characters.length <= i
? _kZeroWidth
: oldText.characters.elementAt(i),
newText.characters.length <= i
? _kZeroWidth
: newText.characters.elementAt(i),
);

tapes.add(switch (tapeSlideDirection) {
TapeSlideDirection.up => tape,
TapeSlideDirection.down => tape.characters.toList().reversed.join(''),
TapeSlideDirection.alternating =>
i % 2 == 0 ? tape : tape.characters.toList().reversed.join(''),
TapeSlideDirection.random => Random('$i'.hashCode).nextBool()
? tape
: tape.characters.toList().reversed.join(''),
});
}

return tapes;
}

/// Builds a list of painters that represent each tape of characters
/// from [tapes].
Expand Down
Loading

0 comments on commit 6937581

Please sign in to comment.