EXPERIMENT :8.
a)
AIM: Add animations to UI elements using Flutter's animation framework.
Animations
Program:
import 'package:flutter/[Link]';
void main() {
runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: AnimatedLogo(),
);
class AnimatedLogo extends StatefulWidget {
@override
_AnimatedLogoState createState() => _AnimatedLogoState();
class _AnimatedLogoState extends State<AnimatedLogo>
with SingleTickerProviderStateMixin {
late AnimationController controller;
late Animation<double> animation;
@override
void initState() {
[Link]();
controller = AnimationController(
duration: const Duration(seconds: 2),
vsync: this,
);
animation = Tween<double>(begin: 0, end: 300).animate(controller)
..addListener(() {
setState(() {
// The state that has changed here is the animation object’s value.
});
});
[Link]();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Animated Logo'),
),
body: Center(
child: Container(
margin: [Link](vertical: 10),
height: [Link],
width: [Link],
child: FlutterLogo(),
),
),
);
@override
void dispose() {
[Link]();
[Link]();
Output:
EXPERIMENT :8.b)
AIM: Experiment with different types of animations (fade, slide, etc.).
Types of Animations
Program:
Program:
import 'package:flutter/[Link]';
void main() {
runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: AnimationExperiment(),
);
class AnimationExperiment extends StatefulWidget {
@override
_AnimationExperimentState createState() => _AnimationExperimentState();
class _AnimationExperimentState extends State<AnimationExperiment>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _fadeAnimation;
late Animation<Offset> _slideAnimation;
late Animation<double> _scaleAnimation;
@override
void initState() {
[Link]();
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 2),
);
_fadeAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(_controller);
_slideAnimation = Tween<Offset>(
begin: Offset(-1.0, 0.0),
end: [Link],
).animate(CurvedAnimation(
parent: _controller,
curve: [Link],
));
_scaleAnimation = Tween<double>(
begin: 0.5,
end: 1.0,
).animate(CurvedAnimation(
parent: _controller,
curve: [Link],
));
_controller.forward();
@override
void dispose() {
_controller.dispose();
[Link]();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Animation Experiment'),
),
body: Center(
child: Column(
mainAxisAlignment: [Link],
children: [
FadeTransition(
opacity: _fadeAnimation,
child: Container(
width: 200,
height: 200,
color: [Link],
child: Center(
child: Text(
'Fade Animation',
style: TextStyle(color: [Link]),
),
),
),
),
SizedBox(height: 20),
SlideTransition(
position: _slideAnimation,
child: Container(
width: 200,
height: 200,
color: [Link],
child: Center(
child: Text(
'Slide Animation',
style: TextStyle(color: [Link]),
),
),
),
),
SizedBox(height: 20),
ScaleTransition(
scale: _scaleAnimation,
child: Container(
width: 200,
height: 200,
color: [Link],
child: Center(
child: Text(
'Scale Animation',
style: TextStyle(color: [Link]),
),
),
),
),
],
),
),
);
OUTPUT: