CSE431

Mobile Programming

MODULE 9:
Animation and TTS&STT
 Animation and Motion widgets
• AnimatedAlign • AnimatedPositioned
• AnimatedBuilder • AnimatedSize
• AnimatedContainer • AnimatedWidget
• AnimatedCrossFade • ImplicitlyAnimatedWidget
• AnimatedDefaultTextStyle • DecoratedBoxTransition
• AnimatedList • Hero
• PositionedTransition
• AnimatedListState
• RotationTransition
• AnimatedModalBarrier
• ScaleTransition
• AnimatedOpacity • SizeTransition
• AnimatedPhysicalModel • SlideTransition

https://docs.flutter.dev/ui/widgets/animation
 AnimatedAlign
Animated version of Align which automatically transitions the child's position
over a given duration whenever the given alignment changes.

https://api.flutter.dev/flutter/widgets/AnimatedAlign-
class.html?_gl=1*176mj7c*_ga*MTEyNDcwNDgxNS4xNzIwNDA4NjI2*_ga_0
4YGWK0175*MTcyMzM5ODM4NC4xNS4xLjE3MjMzOTk4MjkuMC4wLjA.
import 'package:flutter/material.dart'; AnimatedAlign - Example
/// Flutter code sample for [AnimatedAlign].

void main() => runApp(const @override

AnimatedAlignExampleApp()); State<AnimatedAlignExample> createState() => _AnimatedAlignExampleState();
}
class AnimatedAlignExampleApp extends StatelessWidget
{ class _AnimatedAlignExampleState extends State<AnimatedAlignExample> {
const AnimatedAlignExampleApp({super.key}); bool selected = false;

static const Duration duration = Duration(seconds: 1); @override

static const Curve curve = Curves.fastOutSlowIn; Widget build(BuildContext context) {
return GestureDetector(
@override onTap: () {
Widget build(BuildContext context) { setState(() {
return MaterialApp( selected = !selected;
home: Scaffold( });
appBar: AppBar(title: const Text('AnimatedAlign },
Sample')), child: Center(
body: const AnimatedAlignExample( child: Container(
duration: duration, width: 250.0,
curve: curve, height: 250.0,
), color: Colors.red,
), child: AnimatedAlign(
); alignment: selected ? Alignment.topRight : Alignment.bottomLeft,
} duration: widget.duration,
} curve: widget.curve,
child: const FlutterLogo(size: 50.0),
class AnimatedAlignExample extends StatefulWidget { ),
const AnimatedAlignExample({ ),
required this.duration, ),
required this.curve, );
super.key, }
}); }

final Duration duration; https://api.flutter.dev/flutter/widgets/AnimatedAlign-

class.html?_gl=1*176mj7c*_ga*MTEyNDcwNDgxNS4xNzIwNDA4NjI2*_ga_0
final Curve curve; 4YGWK0175*MTcyMzM5ODM4NC4xNS4xLjE3MjMzOTk4MjkuMC4wLjA.
 Animation and Motion widgets
• AnimatedAlign • AnimatedPositioned
• AnimatedBuilder • AnimatedSize
• AnimatedContainer • AnimatedWidget
• AnimatedCrossFade • ImplicitlyAnimatedWidget
• AnimatedDefaultTextStyle • DecoratedBoxTransition
• AnimatedList • Hero
• PositionedTransition
• AnimatedListState
• RotationTransition
• AnimatedModalBarrier
• ScaleTransition
• AnimatedOpacity • SizeTransition
• AnimatedPhysicalModel • SlideTransition

https://docs.flutter.dev/ui/widgets/animation
import 'dart:math' as math; AnimatedBuilder - Example
import 'package:flutter/material.dart';
/// AnimationControllers can be created with `vsync: this` because of
/// Flutter code sample for [AnimatedBuilder].
/// TickerProviderStateMixin.
class _AnimatedBuilderExampleState extends State<AnimatedBuilderExample>
void main() => runApp(const
with TickerProviderStateMixin {
AnimatedBuilderExampleApp());
late final AnimationController _controller = AnimationController(
duration: const Duration(seconds: 10),
class AnimatedBuilderExampleApp extends
vsync: this,
StatelessWidget {
)..repeat();
const AnimatedBuilderExampleApp({super.key});
@override
@override
void dispose() {
Widget build(BuildContext context) {
_controller.dispose();
return const MaterialApp(
super.dispose();
home: AnimatedBuilderExample(),
}
);
}
@override
}
Widget build(BuildContext context) {
return AnimatedBuilder(
class AnimatedBuilderExample extends StatefulWidget {
animation: _controller,
const AnimatedBuilderExample({super.key});
child: Container(
width: 200.0,
@override
height: 200.0,
State<AnimatedBuilderExample> createState() =>
color: Colors.green,
_AnimatedBuilderExampleState();
child: const Center(
}
child: Text('Whee!'),
),
),
builder: (BuildContext context, Widget? child) {
return Transform.rotate(
angle: _controller.value * 2.0 * math.pi,
child: child,
);
},
https://api.flutter.dev/flutter/widgets/AnimatedBuilder-
);
class.html?_gl=1*16cdspi*_ga*MTEyNDcwNDgxNS4xNzIwNDA4NjI2*_ga_0
} 4YGWK0175*MTcyMzM5ODM4NC4xNS4xLjE3MjM0MDA5NDMuMC4wLjA.
}
 Animation and Motion widgets
• AnimatedAlign • AnimatedPositioned
• AnimatedBuilder • AnimatedSize
• AnimatedContainer • AnimatedWidget
• AnimatedCrossFade • ImplicitlyAnimatedWidget
• AnimatedDefaultTextStyle • DecoratedBoxTransition
• AnimatedList • Hero
• PositionedTransition
• AnimatedListState
• RotationTransition
• AnimatedModalBarrier
• ScaleTransition
• AnimatedOpacity • SizeTransition
• AnimatedPhysicalModel • SlideTransition

https://docs.flutter.dev/ui/widgets/animation
import 'package:flutter/material.dart'; AnimatedContainer - Example
/// Flutter code sample for [AnimatedContainer].

void main() => runApp(const Animated version of Container that gradually

AnimatedContainerExampleApp());
changes its values over a period of time.
class AnimatedContainerExampleApp extends
StatelessWidget {
const AnimatedContainerExampleApp({super.key}); @override
Widget build(BuildContext context) {
@override return GestureDetector(
Widget build(BuildContext context) { onTap: () {
return MaterialApp( setState(() {
home: Scaffold( selected = !selected;
appBar: AppBar(title: const Text('AnimatedContainer
});
Sample')),
body: const AnimatedContainerExample(),
},
), child: Center(
); child: AnimatedContainer(
} width: selected ? 200.0 : 100.0,
} height: selected ? 100.0 : 200.0,
color: selected ? Colors.red : Colors.blue,
class AnimatedContainerExample extends StatefulWidget alignment:
{ selected ? Alignment.center : AlignmentDirectional.topCenter,
const AnimatedContainerExample({super.key}); duration: const Duration(seconds: 2),
curve: Curves.fastOutSlowIn,
@override
State<AnimatedContainerExample> createState() =>
child: const FlutterLogo(size: 75),
_AnimatedContainerExampleState(); ),
} ),
);
class _AnimatedContainerExampleState extends }
State<AnimatedContainerExample> { }
bool selected = false;

https://api.flutter.dev/flutter/widgets/AnimatedContainer-class.html
 Animation and Motion widgets
• AnimatedAlign • AnimatedPositioned
• AnimatedBuilder • AnimatedSize
• AnimatedContainer • AnimatedWidget
• AnimatedCrossFade • ImplicitlyAnimatedWidget
• AnimatedDefaultTextStyle • DecoratedBoxTransition
• AnimatedList • Hero
• PositionedTransition
• AnimatedListState
• RotationTransition
• AnimatedModalBarrier
• ScaleTransition
• AnimatedOpacity • SizeTransition
• AnimatedPhysicalModel • SlideTransition

https://docs.flutter.dev/ui/widgets/animation
 AnimatedCrossFade - Example
A widget that cross-fades between two given
children and animates itself between their sizes.

This code fades between two representations of the Flutter logo. It depends on a
boolean field _first; when _first is true, the first logo is shown, otherwise the second
logo is shown. When the field changes state, the AnimatedCrossFade widget cross-
fades between the two forms of the logo over three seconds.

AnimatedCrossFade(
duration: const Duration(seconds: 3),
firstChild: const FlutterLogo(style: FlutterLogoStyle.horizontal, size: 100.0),
secondChild: const FlutterLogo(style: FlutterLogoStyle.stacked, size: 100.0),
crossFadeState: _first ? CrossFadeState.showFirst : CrossFadeState.showSecond,
)

https://api.flutter.dev/flutter/widgets/AnimatedCrossFade-
class.html?_gl=1*1ws87vt*_ga*MTEyNDcwNDgxNS4xNzIwNDA4NjI2*_ga_0
4YGWK0175*MTcyMzM5ODM4NC4xNS4xLjE3MjM0MDEzNjYuMC4wLjA.
 Animation and Motion widgets
• AnimatedAlign • AnimatedPositioned
• AnimatedBuilder • AnimatedSize
• AnimatedContainer • AnimatedWidget
• AnimatedCrossFade • ImplicitlyAnimatedWidget
• AnimatedDefaultTextStyle • DecoratedBoxTransition
• AnimatedList • Hero
• PositionedTransition
• AnimatedListState
• RotationTransition
• AnimatedModalBarrier
• ScaleTransition
• AnimatedOpacity • SizeTransition
• AnimatedPhysicalModel • SlideTransition

https://docs.flutter.dev/ui/widgets/animation
 AnimatedDefaultTextStyle - Example

Animated version of DefaultTextStyle which automatically transitions the default text

style (the text style to apply to descendant Text widgets without explicit style) over a
given duration whenever the given style changes.

For the animation, you can

choose a curve as well as a
duration and the widget will
automatically animate to
the new default text style.

https://api.flutter.dev/flutter/widgets/AnimatedDefaultTextStyle-
class.html?_gl=1*1gjsn6o*_ga*MTEyNDcwNDgxNS4xNzIwNDA4NjI2*_ga_0
4YGWK0175*MTcyMzM5ODM4NC4xNS4xLjE3MjM0MDE1NTUuMC4wLjA.
 Animation and Motion widgets
• AnimatedAlign • AnimatedPositioned
• AnimatedBuilder • AnimatedSize
• AnimatedContainer • AnimatedWidget
• AnimatedCrossFade • ImplicitlyAnimatedWidget
• AnimatedDefaultTextStyle • DecoratedBoxTransition
• AnimatedList • Hero
• PositionedTransition
• AnimatedListState
• RotationTransition
• AnimatedModalBarrier
• ScaleTransition
• AnimatedOpacity • SizeTransition
• AnimatedPhysicalModel • SlideTransition

https://docs.flutter.dev/ui/widgets/animation
 AnimatedList - Example
A scrolling container that animates items when they are inserted or removed.
By default, AnimatedList will automatically pad the limits of the list's scrollable to
avoid partial obstructions indicated by MediaQuery's padding. To avoid this
behavior, override with a zero padding property.

The following example demonstrates how to override the default top and bottom
padding using MediaQuery.removePadding.

Widget myWidget(BuildContext context) {

return MediaQuery.removePadding(
context: context,
removeTop: true,
removeBottom: true,
child: AnimatedList(
initialItemCount: 50,
itemBuilder: (BuildContext context, int index, Animation<double> animation) {
return Card(
color: Colors.amber,
child: Center(child: Text('$index')),
);
}
), https://api.flutter.dev/flutter/widgets/AnimatedList-
); class.html?_gl=1*13f2ckt*_ga*MTEyNDcwNDgxNS4xNzIwNDA4NjI2*_ga_0
4YGWK0175*MTcyMzM5ODM4NC4xNS4xLjE3MjM0MDE3NDguMC4wLjA.
}
 Animation and Motion widgets
• AnimatedAlign • AnimatedPositioned
• AnimatedBuilder • AnimatedSize
• AnimatedContainer • AnimatedWidget
• AnimatedCrossFade • ImplicitlyAnimatedWidget
• AnimatedDefaultTextStyle • DecoratedBoxTransition
• AnimatedList • Hero
• PositionedTransition
• AnimatedListState
• RotationTransition
• AnimatedModalBarrier
• ScaleTransition
• AnimatedOpacity • SizeTransition
• AnimatedPhysicalModel • SlideTransition

https://docs.flutter.dev/ui/widgets/animation
 AnimatedModalBarrier

A widget that prevents the user from interacting with widgets behind itself, and can be
configured with an animated color value.

The modal barrier is the scrim that is rendered behind each route, which generally
prevents the user from interacting with the route below the current route, and
normally partially obscures such routes.

For example, when a dialog is on the screen, the page below the dialog is usually
darkened by the modal barrier.

This widget is similar to ModalBarrier except that it takes an animated color instead of a
single color.
 Animation and Motion widgets
• AnimatedAlign • AnimatedPositioned
• AnimatedBuilder • AnimatedSize
• AnimatedContainer • AnimatedWidget
• AnimatedCrossFade • ImplicitlyAnimatedWidget
• AnimatedDefaultTextStyle • DecoratedBoxTransition
• AnimatedList • Hero
• PositionedTransition
• AnimatedListState
• RotationTransition
• AnimatedModalBarrier
• ScaleTransition
• AnimatedOpacity • SizeTransition
• AnimatedPhysicalModel • SlideTransition

https://docs.flutter.dev/ui/widgets/animation
 AnimatedOpacity

Animated version of Opacity which automatically transitions the child's opacity over a
given duration whenever the given opacity changes. AnimatedOpacity is an implicitly
animated widget.
class LogoFade extends StatefulWidget {
const LogoFade({super.key});

@override
State<LogoFade> createState() => LogoFadeState();
}

class LogoFadeState extends State<LogoFade> {

double opacityLevel = 1.0;

void _changeOpacity() {
setState(() => opacityLevel = opacityLevel == 0 ? 1.0 : 0.0);
}

@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
AnimatedOpacity(
opacity: opacityLevel,
duration: const Duration(seconds: 3),
child: const FlutterLogo(),
),
ElevatedButton(
onPressed: _changeOpacity,
child: const Text('Fade Logo'),
),
],
);
}
}
 Animation and Motion widgets
• AnimatedAlign • AnimatedPositioned
• AnimatedBuilder • AnimatedSize
• AnimatedContainer • AnimatedWidget
• AnimatedCrossFade • ImplicitlyAnimatedWidget
• AnimatedDefaultTextStyle • DecoratedBoxTransition
• AnimatedList • Hero
• PositionedTransition
• AnimatedListState
• RotationTransition
• AnimatedModalBarrier
• ScaleTransition
• AnimatedOpacity • SizeTransition
• AnimatedPhysicalModel • SlideTransition

https://docs.flutter.dev/ui/widgets/animation
 AnimatedPhysicalModel

Animated version of PhysicalModel.

The borderRadius and elevation are animated.

The color is animated if the animateColor property is set; otherwise, the color changes
immediately at the start of the animation for the other two properties. This allows the
color to be animated independently (e.g. because it is being driven by an
AnimatedTheme).

The shape is not animated.

 Animation and Motion widgets
• AnimatedAlign • AnimatedPositioned
• AnimatedBuilder • AnimatedSize
• AnimatedContainer • AnimatedWidget
• AnimatedCrossFade • ImplicitlyAnimatedWidget
• AnimatedDefaultTextStyle • DecoratedBoxTransition
• AnimatedList • Hero
• PositionedTransition
• AnimatedListState
• RotationTransition
• AnimatedModalBarrier
• ScaleTransition
• AnimatedOpacity • SizeTransition
• AnimatedPhysicalModel • SlideTransition

https://docs.flutter.dev/ui/widgets/animation
 AnimatedPositioned
Animated version of Positioned which
final Duration duration;
automatically transitions the child's position
final Curve curve;
over a given duration whenever the given
@override
position changes. State<AnimatedPositionedExample> createState() =>
_AnimatedPositionedExampleState();
}
import 'package:flutter/material.dart';
class _AnimatedPositionedExampleState extends State<AnimatedPositionedExample> {
/// Flutter code sample for [AnimatedPositioned]. bool selected = false;

void main() => runApp(const AnimatedPositionedExampleApp()); @override

Widget build(BuildContext context) {
class AnimatedPositionedExampleApp extends StatelessWidget { return SizedBox(
const AnimatedPositionedExampleApp({super.key}); width: 200,
height: 350,
static const Duration duration = Duration(seconds: 2); child: Stack(
static const Curve curve = Curves.fastOutSlowIn; children: <Widget>[
AnimatedPositioned(
@override width: selected ? 200.0 : 50.0,
Widget build(BuildContext context) { height: selected ? 50.0 : 200.0,
return MaterialApp( top: selected ? 50.0 : 150.0,
home: Scaffold( duration: widget.duration,
appBar: AppBar(title: const Text('AnimatedPositioned Sample')), curve: widget.curve,
body: const Center( child: GestureDetector(
child: AnimatedPositionedExample( onTap: () {
duration: duration, setState(() {
curve: curve, selected = !selected;
), });
), },
), child: const ColoredBox(
); color: Colors.blue,
} child: Center(child: Text('Tap me')),
} ),
),
class AnimatedPositionedExample extends StatefulWidget { ),
const AnimatedPositionedExample({ ],
required this.duration, ),
required this.curve, );
super.key, }
}); }
 Question
what is the difference between AnimatedAlign and AnimatedPositioned
classes in flutter?

23
 Animation and Motion widgets
• AnimatedAlign • AnimatedPositioned
• AnimatedBuilder • AnimatedSize
• AnimatedContainer • AnimatedWidget
• AnimatedCrossFade • ImplicitlyAnimatedWidget
• AnimatedDefaultTextStyle • DecoratedBoxTransition
• AnimatedList • Hero
• PositionedTransition
• AnimatedListState
• RotationTransition
• AnimatedModalBarrier
• ScaleTransition
• AnimatedOpacity • SizeTransition
• AnimatedPhysicalModel • SlideTransition

https://docs.flutter.dev/ui/widgets/animation
 AnimatedSize
Animated widget that automatically
class AnimatedSizeExample extends StatefulWidget {
transitions its size over a given duration const AnimatedSizeExample({
required this.duration,
whenever the given child's size changes. required this.curve,
super.key,
});

final Duration duration;

import 'package:flutter/material.dart';
final Curve curve;
/// Flutter code sample for [AnimatedSize].
@override
void main() => runApp(const AnimatedSizeExampleApp()); State<AnimatedSizeExample> createState() => _AnimatedSizeExampleState();
}
class AnimatedSizeExampleApp extends StatelessWidget {
const AnimatedSizeExampleApp({super.key}); class _AnimatedSizeExampleState extends State<AnimatedSizeExample> {
bool _isSelected = false;
static const Duration duration = Duration(seconds: 1);
static const Curve curve = Curves.easeIn; @override
Widget build(BuildContext context) {
@override return GestureDetector(
Widget build(BuildContext context) { onTap: () {
return MaterialApp( setState(() {
home: Scaffold( _isSelected = !_isSelected;
appBar: AppBar(title: const Text('AnimatedSize Sample')), });
body: const Center( },
child: AnimatedSizeExample( child: ColoredBox(
duration: duration, color: Colors.amberAccent,
curve: curve, child: AnimatedSize(
), duration: widget.duration,
), curve: widget.curve,
), child: SizedBox.square(
); dimension: _isSelected ? 250.0 : 100.0,
} child: const Center(
} child: FlutterLogo(size: 75.0),
),
),
),
),
);
}
}
 Animation and Motion widgets
• AnimatedAlign • AnimatedPositioned
• AnimatedBuilder • AnimatedSize
• AnimatedContainer • AnimatedWidget
• AnimatedCrossFade • ImplicitlyAnimatedWidget
• AnimatedDefaultTextStyle • DecoratedBoxTransition
• AnimatedList • Hero
• PositionedTransition
• AnimatedListState
• RotationTransition
• AnimatedModalBarrier
• ScaleTransition
• AnimatedOpacity • SizeTransition
• AnimatedPhysicalModel • SlideTransition

https://docs.flutter.dev/ui/widgets/animation
 AnimatedWidget
AnimatedWidget is most commonly used with Animation objects, which are Listenable, but
it can be used with any Listenable, including ChangeNotifier and ValueNotifier.

import 'dart:math' as math;

import 'package:flutter/material.dart';

/// Flutter code sample for [AnimatedWidget]. class AnimatedWidgetExample extends StatefulWidget {
const AnimatedWidgetExample({super.key});
void main() => runApp(const AnimatedWidgetExampleApp());
@override
class AnimatedWidgetExampleApp extends StatelessWidget { State<AnimatedWidgetExample> createState() => _AnimatedWidgetExampleState();
const AnimatedWidgetExampleApp({super.key}); }

@override /// [AnimationController]s can be created with `vsync: this` because of

Widget build(BuildContext context) { /// [TickerProviderStateMixin].
return const MaterialApp( class _AnimatedWidgetExampleState extends State<AnimatedWidgetExample>
home: AnimatedWidgetExample(), with TickerProviderStateMixin {
); late final AnimationController _controller = AnimationController(
} duration: const Duration(seconds: 10),
} vsync: this,
)..repeat();
class SpinningContainer extends AnimatedWidget {
const SpinningContainer({ @override
super.key, void dispose() {
required AnimationController controller, _controller.dispose();
}) : super(listenable: controller); super.dispose();
}
Animation<double> get _progress => listenable as Animation<double>;
@override
@override Widget build(BuildContext context) {
Widget build(BuildContext context) { return SpinningContainer(controller: _controller);
return Transform.rotate( }
angle: _progress.value * 2.0 * math.pi, }
child: Container(width: 200.0, height: 200.0, color: Colors.green),
);
}
}
 Animation and Motion widgets
• AnimatedAlign • AnimatedPositioned
• AnimatedBuilder • AnimatedSize
• AnimatedContainer • AnimatedWidget
• AnimatedCrossFade • ImplicitlyAnimatedWidget
• AnimatedDefaultTextStyle • DecoratedBoxTransition
• AnimatedList • Hero
• PositionedTransition
• AnimatedListState
• RotationTransition
• AnimatedModalBarrier
• ScaleTransition
• AnimatedOpacity • SizeTransition
• AnimatedPhysicalModel • SlideTransition

https://docs.flutter.dev/ui/widgets/animation
 ImplicitlyAnimatedWidget

• An abstract class for building widgets that animate changes to their

properties.

• Widgets of this type will not animate when they are first added to the
widget tree. Rather, when they are rebuilt with different values, they
will respond to those changes by animating the changes over a
specified duration.

• Which properties are animated is left up to the subclass. Subclasses'

States must extend ImplicitlyAnimatedWidgetState and provide a
way to visit the relevant fields to animate.
 Animation and Motion widgets
• AnimatedAlign • AnimatedPositioned
• AnimatedBuilder • AnimatedSize
• AnimatedContainer • AnimatedWidget
• AnimatedCrossFade • ImplicitlyAnimatedWidget
• AnimatedDefaultTextStyle • DecoratedBoxTransition
• AnimatedList • Hero
• PositionedTransition
• AnimatedListState
• RotationTransition
• AnimatedModalBarrier
• ScaleTransition
• AnimatedOpacity • SizeTransition
• AnimatedPhysicalModel • SlideTransition

https://docs.flutter.dev/ui/widgets/animation
 DecoratedBoxTransition
boxShadow: const <BoxShadow>[

•
BoxShadow(
Animated version of a DecoratedBox that color: Color(0x66666666),
blurRadius: 10.0,
animates the different properties of its spreadRadius: 3.0,
offset: Offset(0, 6.0),
Decoration. ],
),

),
import 'package:flutter/material.dart';
end: BoxDecoration(
color: const Color(0xFFFFFFFF),
/// Flutter code sample for [DecoratedBoxTransition].
border: Border.all(
style: BorderStyle.none,
void main() => runApp(const DecoratedBoxTransitionExampleApp());
),
borderRadius: BorderRadius.zero,
class DecoratedBoxTransitionExampleApp extends StatelessWidget {
// No shadow.
const DecoratedBoxTransitionExampleApp({super.key});
),
);
@override
late final AnimationController _controller = AnimationController(
Widget build(BuildContext context) {
vsync: this,
return const MaterialApp(
duration: const Duration(seconds: 3),
home: DecoratedBoxTransitionExample(),
)..repeat(reverse: true);
);
}
@override
}
void dispose() {
_controller.dispose();
class DecoratedBoxTransitionExample extends StatefulWidget {
super.dispose();
const DecoratedBoxTransitionExample({super.key});
}
@override
@override
State<DecoratedBoxTransitionExample> createState() =>
Widget build(BuildContext context) {
_DecoratedBoxTransitionExampleState();
return ColoredBox(
}
color: Colors.white,
/// [AnimationController]s can be created with `vsync: this` because of
child: Center(
/// [TickerProviderStateMixin].
child: DecoratedBoxTransition(
class _DecoratedBoxTransitionExampleState
decoration: decorationTween.animate(_controller),
extends State<DecoratedBoxTransitionExample> with TickerProviderStateMixin {
child: Container(
final DecorationTween decorationTween = DecorationTween(
width: 200,
begin: BoxDecoration(
height: 200,
color: const Color(0xFFFFFFFF),
padding: const EdgeInsets.all(10),
border: Border.all(style: BorderStyle.none),
child: const FlutterLogo(),
borderRadius: BorderRadius.circular(60.0),
),
),
),
);
}
}
 Animation and Motion widgets
• AnimatedAlign • AnimatedPositioned
• AnimatedBuilder • AnimatedSize
• AnimatedContainer • AnimatedWidget
• AnimatedCrossFade • ImplicitlyAnimatedWidget
• AnimatedDefaultTextStyle • DecoratedBoxTransition
• AnimatedList • Hero
• PositionedTransition
• AnimatedListState
• RotationTransition
• AnimatedModalBarrier
• ScaleTransition
• AnimatedOpacity • SizeTransition
• AnimatedPhysicalModel • SlideTransition

https://docs.flutter.dev/ui/widgets/animation
 Hero
• A widget that marks its child as being a candidate for hero animations.
• When a PageRoute is pushed or popped with the Navigator, the entire screen's
content is replaced. An old route disappears and a new route appears. If there's
a common visual feature on both routes then it can be helpful for orienting the
user for the feature to physically move from one page to the other during the
routes' transition. Such an animation is called a hero animation. The hero
widgets "fly" in the Navigator's overlay during the transition and while they're
in-flight they're, by default, not shown in their original locations in the old and
new routes.
• To label a widget as such a feature, wrap it in a Hero widget. When navigation
happens, the Hero widgets on each route are identified by the HeroController.
For each pair of Hero widgets that have the same tag, a hero animation is
triggered.
• If a Hero is already in flight when navigation occurs, its flight animation will be
redirected to its new destination. The widget shown in-flight during the
transition is, by default, the destination route's Hero's child.
• For a Hero animation to trigger, the Hero has to exist on the very first frame of
the new page's animation.
• Routes must not contain more than one Hero for each tag.
 Animation and Motion widgets
• AnimatedAlign • AnimatedPositioned
• AnimatedBuilder • AnimatedSize
• AnimatedContainer • AnimatedWidget
• AnimatedCrossFade • ImplicitlyAnimatedWidget
• AnimatedDefaultTextStyle • DecoratedBoxTransition
• AnimatedList • Hero
• PositionedTransition
• AnimatedListState
• RotationTransition
• AnimatedModalBarrier
• ScaleTransition
• AnimatedOpacity • SizeTransition
• AnimatedPhysicalModel • SlideTransition

https://docs.flutter.dev/ui/widgets/animation
 Transition Animations

• RotationTransition, a widget that animates the rotation of a widget.

• RelativePositionedTransition, a widget that transitions its child's position
based on the value of a rectangle relative to a bounding box.
• SlideTransition, a widget that animates the position of a widget relative to its
normal position.
• AlignTransition, an animated version of an Align that animates its
Align.alignment property.
• ScaleTransition, a widget that animates the scale of a transformed widget.
• SizeTransition, a widget that animates its own size and clips and aligns its
child.
Text To Speech &
Speech to Text
 Text to Speech
flutter_tts

With Flutter:
$ flutter pub add flutter_tts
This will add a line like this to your package's pubspec.yaml
(and run an implicit flutter pub get):
dependencies: flutter_tts: ^4.2.0

Alternatively, your editor might support flutter pub get.

Check the docs for your editor to learn more.
Import it
Now in your Dart code, you can use:
import 'package:flutter_tts/flutter_tts.dart';
 Text to Speech
flutter_tts

instantiate FlutterTts
FlutterTts flutterTts = FlutterTts();

To await speak completion.

await flutterTts.awaitSpeakCompletion(true);

To await synthesize to file completion.

await flutterTts.awaitSynthCompletion(true)
 Text to Speech
flutter_tts

speak, stop, getLanguages,

setLanguage, setSpeechRate,
getVoices, setVoice, setVolume,
setPitch, isLanguageAvailable,
setSharedInstance
 Text to Speech
Pausing on Android
• Android TTS does not support the pause function natively, so we have
implemented a work around.
• We utilize the native onRangeStart() method to determine the index of
start when pause is invoked.
• We use that index to create a new text the next time speak is invoked.
• Due to using onRangeStart(), pause works on SDK versions >= 26.
• Also, if using start and end offsets inside of setProgressHandler(), you'll
need to keep a track of them if using pause since they will update once
the new text is created when speak is called after being paused.

await flutterTts.pause()
 Speech to Text
speech_to_text

• A library that exposes device specific speech

recognition capability.
• This plugin contains a set of classes that make it easy to
use the speech recognition capabilities of the
underlying platform in Flutter.
• It supports Android, iOS, MacOS and web.
• The target use cases for this library are commands and
short phrases, not continuous spoken conversion or
always on listening.
End of Module 9