Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Code Review #81

Merged
merged 5 commits into from
May 26, 2020
Merged

Code Review #81

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4024a29
Code Review
awhitford May 24, 2020
42f4af8
Renamed more internal State classes to match their counterpart Statef…
awhitford May 25, 2020
4a02d3d
Merge branch 'master' into codeReview200524
awhitford May 25, 2020
5170144
Further optimization for AnimatedBuilder.
awhitford May 25, 2020
c161948
More consistency. Simplified some comparison expressions, added chil…
awhitford May 25, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
12 changes: 6 additions & 6 deletions example/lib/main.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import 'package:flutter/material.dart';
import 'package:animated_text_kit/animated_text_kit.dart';

void main() => runApp(new MyApp());
void main() => runApp(MyApp());

const List<String> labels = [
"Rotate",
Expand All @@ -17,18 +17,18 @@ class MyApp extends StatefulWidget {
/// This widget is the root of your application.
@override
MyAppState createState() {
return new MyAppState();
return MyAppState();
}
}

class MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return new MaterialApp(
return MaterialApp(
title: 'Animated Text Kit',
debugShowCheckedModeBanner: false,
theme: ThemeData.dark(),
home: new MyHomePage(title: 'Animated Text Kit'),
home: MyHomePage(title: 'Animated Text Kit'),
);
}
}
Expand All @@ -42,7 +42,7 @@ class MyHomePage extends StatefulWidget {
}) : super(key: key);

@override
_MyHomePageState createState() => new _MyHomePageState();
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
Expand Down Expand Up @@ -168,7 +168,7 @@ class _MyHomePageState extends State<MyHomePage> {

@override
Widget build(BuildContext context) {
return new Scaffold(
return Scaffold(
body: Column(
children: <Widget>[
SizedBox(
Expand Down
54 changes: 18 additions & 36 deletions lib/src/colorize.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import 'dart:async';

class ColorizeAnimatedTextKit extends StatefulWidget {
/// List of [String] that would be displayed subsequently in the animation.
final List text;
final List<String> text;

/// Gives [TextStyle] to the text strings.
final TextStyle textStyle;
Expand All @@ -29,12 +29,7 @@ class ColorizeAnimatedTextKit extends StatefulWidget {
/// Adds the onNext [VoidCallback] to the animated widget.
///
/// Will be called right before the next text, after the pause parameter
final Function onNext;

/// Adds the onNextBeforePause [VoidCallback] to the animated widget.
///
/// Will be called at the end of n-1 animation, before the pause parameter
final Function onNextBeforePause;
final void Function(int, bool) onNext;

/// Adds [AlignmentGeometry] property to the text in the widget.
///
Expand Down Expand Up @@ -76,7 +71,6 @@ class ColorizeAnimatedTextKit extends StatefulWidget {
this.pause,
this.onTap,
this.onNext,
this.onNextBeforePause,
this.onFinished,
this.alignment = AlignmentDirectional.topStart,
this.textAlign = TextAlign.start,
Expand All @@ -86,10 +80,10 @@ class ColorizeAnimatedTextKit extends StatefulWidget {
: super(key: key);

@override
_RotatingTextState createState() => new _RotatingTextState();
_ColorizeTextState createState() => _ColorizeTextState();
}

class _RotatingTextState extends State<ColorizeAnimatedTextKit>
class _ColorizeTextState extends State<ColorizeAnimatedTextKit>
with TickerProviderStateMixin {
AnimationController _controller;

Expand All @@ -111,30 +105,16 @@ class _RotatingTextState extends State<ColorizeAnimatedTextKit>
void initState() {
super.initState();

_speed = widget.speed ?? Duration(milliseconds: 200);
_pause = widget.pause ?? Duration(milliseconds: 1000);
_speed = widget.speed ?? const Duration(milliseconds: 200);
_pause = widget.pause ?? const Duration(milliseconds: 1000);

_index = -1;

_currentRepeatCount = 0;

for (int i = 0; i < widget.text.length; i++) {
try {
if (!widget.text[i].containsKey('text')) throw new Error();

_texts.add({
'text': widget.text[i]['text'],
'speed': widget.text[i].containsKey('speed')
? widget.text[i]['speed']
: _speed,
'pause': widget.text[i].containsKey('pause')
? widget.text[i]['pause']
: _pause,
});
} catch (e) {
_texts.add({'text': widget.text[i], 'speed': _speed, 'pause': _pause});
}
}
widget.text.forEach((text) {
_texts.add({'text': text, 'speed': _speed, 'pause': _pause});
});

_nextAnimation();
}
Expand Down Expand Up @@ -179,13 +159,13 @@ class _RotatingTextState extends State<ColorizeAnimatedTextKit>
}

void _nextAnimation() {
bool isLast = _index == widget.text.length - 1;
final bool isLast = _index == widget.text.length - 1;

_isCurrentlyPausing = false;

// Handling onNext callback
if (_index > -1) {
if (widget.onNext != null) widget.onNext(_index, isLast);
widget.onNext?.call(_index, isLast);
}

if (isLast) {
Expand All @@ -197,7 +177,7 @@ class _RotatingTextState extends State<ColorizeAnimatedTextKit>
_currentRepeatCount++;
}
} else {
if (widget.onFinished != null) widget.onFinished();
widget.onFinished?.call();
return;
}
} else {
Expand All @@ -206,7 +186,7 @@ class _RotatingTextState extends State<ColorizeAnimatedTextKit>

if (mounted) setState(() {});

_controller = new AnimationController(
_controller = AnimationController(
duration: _texts[_index]['speed'] * _texts[_index]['text'].length,
vsync: this,
);
Expand All @@ -217,16 +197,18 @@ class _RotatingTextState extends State<ColorizeAnimatedTextKit>
(_texts[_index]['text'].length / 15.0);

_fadeIn = Tween<double>(begin: 0.0, end: 1.0).animate(CurvedAnimation(
parent: _controller, curve: Interval(0.0, 0.1, curve: Curves.easeOut)));
parent: _controller,
curve: const Interval(0.0, 0.1, curve: Curves.easeOut)));

_fadeOut = Tween<double>(begin: 1.0, end: 1.0).animate(CurvedAnimation(
parent: _controller, curve: Interval(0.9, 1.0, curve: Curves.easeIn)));
parent: _controller,
curve: const Interval(0.9, 1.0, curve: Curves.easeIn)));

_colorShifter =
Tween<double>(begin: 0.0, end: widget.colors.length * _tuning).animate(
CurvedAnimation(
parent: _controller,
curve: Interval(0.0, 1.0, curve: Curves.easeIn)))
curve: const Interval(0.0, 1.0, curve: Curves.easeIn)))
..addStatusListener(_animationEndCallback);

_controller?.forward();
Expand Down
75 changes: 28 additions & 47 deletions lib/src/fade.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import 'dart:math';

class FadeAnimatedTextKit extends StatefulWidget {
/// List of [String] that would be displayed subsequently in the animation.
final List text;
final List<String> text;

/// Gives [TextStyle] to the text strings.
final TextStyle textStyle;
Expand Down Expand Up @@ -32,12 +32,12 @@ class FadeAnimatedTextKit extends StatefulWidget {
/// Adds the onNext [VoidCallback] to the animated widget.
///
/// Will be called right before the next text, after the pause parameter
final Function onNext;
final void Function(int, bool) onNext;

/// Adds the onNextBeforePause [VoidCallback] to the animated widget.
///
/// Will be called at the end of n-1 animation, before the pause parameter
final Function onNextBeforePause;
final void Function(int, bool) onNextBeforePause;

/// Adds [AlignmentGeometry] property to the text in the widget.
///
Expand Down Expand Up @@ -95,10 +95,10 @@ class FadeAnimatedTextKit extends StatefulWidget {
: super(key: key);

@override
_RotatingTextState createState() => new _RotatingTextState();
_FadeTextState createState() => _FadeTextState();
}

class _RotatingTextState extends State<FadeAnimatedTextKit>
class _FadeTextState extends State<FadeAnimatedTextKit>
with TickerProviderStateMixin {
Animation _fadeIn, _fadeOut;

Expand All @@ -107,7 +107,7 @@ class _RotatingTextState extends State<FadeAnimatedTextKit>

Duration _pause;

List<Map> _texts = [];
List<Map<String, dynamic>> _texts = [];

int _index;

Expand All @@ -123,39 +123,25 @@ class _RotatingTextState extends State<FadeAnimatedTextKit>
void initState() {
super.initState();

_pause = widget.pause ?? Duration(milliseconds: 500);
_pause = widget.pause ?? const Duration(milliseconds: 500);

_index = -1;

_currentRepeatCount = 0;

if (widget.duration == null) {
_duration = Duration(milliseconds: 2000);
} else {
_duration = widget.duration;
}
_duration = widget.duration ?? const Duration(milliseconds: 2000);

widget.text.forEach((text) {
_texts.add({'text': text, 'pause': _pause});
});

for (int i = 0; i < widget.text.length; i++) {
try {
if (!widget.text[i].containsKey('text')) throw Error();

_texts.add({
'text': widget.text[i]['text'],
'pause': widget.text[i].containsKey('pause')
? widget.text[i]['pause']
: _pause
});
} catch (e) {
_texts.add({'text': widget.text[i], 'pause': _pause});
}
}
_nextAnimation();
}

@override
void dispose() {
_controller?.stop();
_controller.dispose();
_controller?.dispose();
super.dispose();
}

Expand All @@ -173,9 +159,8 @@ class _RotatingTextState extends State<FadeAnimatedTextKit>
animation: _controller,
builder: (BuildContext context, Widget child) {
return Opacity(
opacity: !(_fadeIn.value == 1.0)
? _fadeIn.value
: _fadeOut.value,
opacity:
_fadeIn.value != 1.0 ? _fadeIn.value : _fadeOut.value,
child: Text(
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@awhitford Make this Text widget a child of the AnimatedBuilder and reference it using the child property given in the builder function.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good idea.

_texts[_index]['text'],
style: widget.textStyle,
Expand All @@ -187,13 +172,13 @@ class _RotatingTextState extends State<FadeAnimatedTextKit>
}

void _nextAnimation() {
bool isLast = _index == widget.text.length - 1;
final bool isLast = _index == widget.text.length - 1;

_isCurrentlyPausing = false;

// Handling onNext callback
if (_index > -1) {
if (widget.onNext != null) widget.onNext(_index, isLast);
widget.onNext?.call(_index, isLast);
}

if (isLast) {
Expand All @@ -205,7 +190,7 @@ class _RotatingTextState extends State<FadeAnimatedTextKit>
_currentRepeatCount++;
}
} else {
if (widget.onFinished != null) widget.onFinished();
widget.onFinished?.call();
return;
}
} else {
Expand All @@ -214,30 +199,31 @@ class _RotatingTextState extends State<FadeAnimatedTextKit>

if (mounted) setState(() {});

_controller = new AnimationController(
_controller = AnimationController(
duration: _duration,
vsync: this,
);

_fadeIn = Tween<double>(begin: 0.0, end: 1.0).animate(CurvedAnimation(
parent: _controller, curve: Interval(0.0, 0.5, curve: Curves.linear)));
parent: _controller,
curve: const Interval(0.0, 0.5, curve: Curves.linear)));

_fadeOut = Tween<double>(begin: 1.0, end: 0.0).animate(CurvedAnimation(
parent: _controller, curve: Interval(0.8, 1.0, curve: Curves.linear)))
parent: _controller,
curve: const Interval(0.8, 1.0, curve: Curves.linear)))
..addStatusListener(_animationEndCallback);

_controller.forward();
}

void _setPause() {
bool isLast = _index == widget.text.length - 1;
final bool isLast = _index == widget.text.length - 1;

_isCurrentlyPausing = true;
if (mounted) setState(() {});

// Handle onNextBeforePause callback
if (widget.onNextBeforePause != null)
widget.onNextBeforePause(_index, isLast);
widget.onNextBeforePause?.call(_index, isLast);
}

void _animationEndCallback(state) {
Expand All @@ -248,18 +234,15 @@ class _RotatingTextState extends State<FadeAnimatedTextKit>
}

void _onTap() {
int pause;
int left;

if (widget.displayFullTextOnTap) {
if (_isCurrentlyPausing) {
if (widget.stopPauseOnTap) {
_timer?.cancel();
_nextAnimation();
}
} else {
pause = _texts[_index]['pause'].inMilliseconds;
left = widget.duration.inMilliseconds;
final int pause = _texts[_index]['pause'].inMilliseconds;
final int left = widget.duration.inMilliseconds;

_controller?.stop();

Expand All @@ -270,8 +253,6 @@ class _RotatingTextState extends State<FadeAnimatedTextKit>
}
}

if (widget.onTap != null) {
widget.onTap();
}
widget.onTap?.call();
}
}