EXPERIMENT :8.

a)

AIM: Add animations to UI elements using Flutter's animation framework.

Animations

Program:

import 'package:flutter/material.dart';

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;

@override

void initState() {

super.initState();

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.

});

});

controller.forward();

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('Animated Logo'),

),

body: Center(

child: Container(

margin: EdgeInsets.symmetric(vertical: 10),

height: animation.value,
 width: animation.value,

child: FlutterLogo(),

),

),

);

@override

void dispose() {

controller.dispose();

super.dispose();

Output:

EXPERIMENT :8.b)

AIM: Experiment with different types of animations (fade, slide, etc.).

Types of Animations

Program:

Program:

import 'package:flutter/material.dart';

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() {

super.initState();

_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: Offset.zero,

).animate(CurvedAnimation(

parent: _controller,

curve: Curves.easeInOut,

));

_scaleAnimation = Tween<double>(

begin: 0.5,

end: 1.0,

).animate(CurvedAnimation(

parent: _controller,

curve: Curves.easeInOut,

));

_controller.forward();

@override

void dispose() {

_controller.dispose();

super.dispose();

}
@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('Animation Experiment'),

),

body: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: [

FadeTransition(

opacity: _fadeAnimation,

child: Container(

width: 200,

height: 200,

color: Colors.blue,

child: Center(

child: Text(

'Fade Animation',

style: TextStyle(color: Colors.white),

),

),

),

),

SizedBox(height: 20),

SlideTransition(

position: _slideAnimation,
 child: Container(

width: 200,

height: 200,

color: Colors.green,

child: Center(

child: Text(

'Slide Animation',

style: TextStyle(color: Colors.white),

),

),

),

),

SizedBox(height: 20),

ScaleTransition(

scale: _scaleAnimation,

child: Container(

width: 200,

height: 200,

color: Colors.orange,

child: Center(

child: Text(

'Scale Animation',

style: TextStyle(color: Colors.white),

),

),

),

),
 ],

),

),

);

OUTPUT: