Labprogram: 8
b) Experiment with different types of animations like fade,slide,etc.
Fade Animation:
import 'package:flutter/material.dart';
void main() { runApp(MyApp());
}
class MyApp extends StatelessWidget { @override
Widget build(BuildContext context) { return MaterialApp(
home: Scaffold( appBar: AppBar(
title: Text('Fade Animation Example'),
),
body: FadeAnimation(),
),
);
}
}
class FadeAnimation extends StatefulWidget {
@override
// ignore: library_private_types_in_public_api
_FadeAnimationState createState() => _FadeAnimationState();
}
class _FadeAnimationState extends State<FadeAnimation> with
SingleTickerProviderStateMixin { late AnimationController _controller;
late Animation<double> _animation;
@override
void initState() { super.initState();
_controller = AnimationController( vsync: this,
duration: Duration(seconds: 2),
);
_animation = Tween<double>( begin: 0.0,
end: 1.0,
).animate(_controller);
_controller.forward();
}
@override
Widget build(BuildContext context) { return Center(
child: FadeTransition( opacity: _animation, child: Container( width: 200,
height: 200,
color: Colors.blue,
),
),
);
}
@override
void dispose() {
_controller.dispose(); super.dispose();
}
}
Output:
Slide Animation:
import 'package:flutter/material.dart';
void main() { runApp(MyApp());
}
class MyApp extends StatelessWidget { @override
Widget build(BuildContext context) { return MaterialApp(
home: Scaffold( appBar: AppBar(
title: Text('Slide Animation Example'),
),
body: SlideAnimation(),
),
);
}
}
class SlideAnimation extends StatefulWidget { @override
// ignore: library_private_types_in_public_api
_SlideAnimationState createState() => _SlideAnimationState();
}
class _SlideAnimationState extends State<SlideAnimation> with
SingleTickerProviderStateMixin { late AnimationController _controller;
late Animation<Offset> _animation; @override
void initState() { super.initState();
_controller = AnimationController( vsync: this,
duration: Duration(seconds: 2),
);
_animation = Tween<Offset>( begin: Offset(-1.0, 0.0),
end: Offset(0.0, 0.0),
).animate(_controller);
_controller.forward();
}
@override
Widget build(BuildContext context) { return Center(
child: SlideTransition( position: _animation, child: Container( width:
200,
height: 200,
color: Colors.blue,
),
),
);
}
@override
void dispose() {
_controller.dispose(); super.dispose();
}
}
Output:
Scale Animation:
import 'package:flutter/material.dart';
void main() { runApp(MyApp());
}
class MyApp extends StatelessWidget { @override
Widget build(BuildContext context) { return MaterialApp(
home: Scaffold( appBar: AppBar(
title: Text('Scale Animation Example'),
),
body: ScaleAnimation(),
),
);
}
}
class ScaleAnimation extends StatefulWidget { @override
// ignore: library_private_types_in_public_api
_ScaleAnimationState createState() => _ScaleAnimationState();
}
class _ScaleAnimationState extends State<ScaleAnimation> with
SingleTickerProviderStateMixin { late AnimationController _controller;
late Animation<double> _animation;
@override
void initState() { super.initState();
_controller = AnimationController( vsync: this,
duration: Duration(seconds: 2),
);
_animation = Tween<double>( begin: 0.0,
end: 1.0,
).animate(_controller);
_controller.forward();
}
@override
Widget build(BuildContext context) { return Center(
child: ScaleTransition( scale: _animation, child: Container( width: 200,
height: 200,
color: Colors.blue,
),
),
);
}
@override
void dispose() {
_controller.dispose(); super.dispose();
}
}
Output:
