animation with bloc package on flutter - flutter

please check my code I want to use this animation with the bloc package,
and also I want to use that without StatefulWidget class :
class LoadingScreen extends StatefulWidget {
const LoadingScreen({Key? key}) : super(key: key);
#override
State<LoadingScreen> createState() => _LoadingScreenState();
}
class _LoadingScreenState extends State<LoadingScreen>
with TickerProviderStateMixin {
late AnimationController controller;
late AnimationController controller2;
late Animation<Offset> disk;
late Animation<Offset> offset;
int diskPicW = 0;
#override
void initState() {
super.initState();
controller =
AnimationController(vsync: this, duration: Duration(seconds: 1));
controller2 = AnimationController(
vsync: this, duration: Duration(seconds: 1, milliseconds: 500));
offset = Tween<Offset>(begin: Offset(1.0, 0.0), end: Offset.zero)
.animate(controller);
disk = Tween<Offset>(begin: Offset(-1.0, 0.0), end: Offset.zero)
.animate(controller2);
controller.forward();
controller2.forward();
Timer(Duration(seconds: 2, milliseconds: 500), (() {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => FirstPage(),
));
}));
}
SizeController() {
setState(() {});
}
#override
void dispose() {
super.dispose();
controller.dispose();
controller2.dispose();
}
#override
Widget build(BuildContext context) {
print(MediaQuery.of(context).size.width);
print(MediaQuery.of(context).size.height);
return Scaffold(
backgroundColor: color3,
body: Stack(
children: [
SlideTransition(
position: offset,
child: Center(
child: Image.asset(
'assets/001.png',
width: 150,
height: 150,
),
),
),
SlideTransition(
position: disk,
child: AnimatedBuilder(
animation: controller2.view,
builder: (context, child) {
return Transform.rotate(
angle: controller2.value * 2 * pi,
child: child,
);
},
child: Center(
child: Image.asset(
'assets/disk2.png',
width: 130,
height: 130,
),
),
),
),
SlideTransition(
position: offset,
child: Center(
child: Image.asset(
'assets/002.png',
width: 150,
height: 150,
),
),
)
],
),
);
}
}
This is my simple animation code
How can I run this animation using the bloc package?
I want without using the StatefulWidget class make that
I want to use the bloc package and I don't know how
Please teach me, thank you

Related

How can i reverse the animation using SizeTransition

i have this code . my animation comse from top to bottom , but How can i reverse it to other side which from bottom to top ..
as we can see it be hidden on the top then it move to down but i need to reverse it to be hidden on the bottom and it move to top
class VariableSizeContainerExample extends StatefulWidget {
VariableSizeContainerExample();
#override
_VariableSizeContainerExampleState createState() => _VariableSizeContainerExampleState();
}
class _VariableSizeContainerExampleState extends State<VariableSizeContainerExample> with TickerProviderStateMixin {
AnimationController _controller;
Animation<double> _animation;
#override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(seconds: 1),
vsync: this,
);
_animation = CurvedAnimation(
parent: _controller,
curve: Curves.fastLinearToSlowEaseIn,
);
}
_toggleContainer() {
print(_animation.status);
if (_animation.status != AnimationStatus.completed) {
_controller.forward();
} else {
_controller.animateBack(0, duration: Duration(seconds: 1));
}
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: Column(
children: [
TextButton(
onPressed: () => _toggleContainer(),
child: Text("Toggle container visibility"),
),
SizeTransition(
sizeFactor: _animation,
axis: Axis.vertical,
child: Container(
child: Text(
"This can have variable size",
style: TextStyle(fontSize: 40),
),
),
),
Text("This is below the above container"),
],
),
),
),
);
}
}
The default animation start from center then will expand.
To control this, you can use axisAlignment on SizeTransition.
A value of 1.0 indicates the bottom or end, depending upon the [axis].
A value of 0.0 (the default) indicates the center for either [axis] value.
To fixed-bottom(hide-top) use axisAlignment:1 and to fixed top(hide-bottom) axisAlignment:-1
SizeTransition(
sizeFactor: _animation,
axisAlignment: -1, //play with 1 and -1
More about SizeTransition.
test widget
void main(List<String> args) =>
runApp(MaterialApp(home: Scaffold(body: VariableSizeContainerExample())));
class VariableSizeContainerExample extends StatefulWidget {
VariableSizeContainerExample({Key? key}) : super(key: key);
#override
State<VariableSizeContainerExample> createState() =>
_VariableSizeContainerExampleState();
}
class _VariableSizeContainerExampleState
extends State<VariableSizeContainerExample>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _animation;
#override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(seconds: 4),
vsync: this,
)..addListener(() {
setState(() {});
});
_animation = CurvedAnimation(
parent: _controller,
curve: Curves.fastLinearToSlowEaseIn,
);
}
#override
void dispose() {
super.dispose();
}
void _toggleContainer() {
debugPrint(_animation.status.toString());
if (_animation.status != AnimationStatus.completed) {
_controller.forward();
} else {
_controller.animateBack(0, duration: Duration(seconds: 1));
}
}
#override
Widget build(BuildContext context) {
return SafeArea(
child: Column(
children: [
TextButton(
onPressed: () => _toggleContainer(),
child: Text("Toggle container visibility"),
),
SizeTransition(
sizeFactor: _animation,
axisAlignment: 1,
/// also try -1
axis: Axis.vertical,
child: Container(
child: const Text(
"This can have variable size",
style: TextStyle(fontSize: 66),
),
),
),
const Text("This is below the above container"),
],
),
);
}
}

Change scrollView offset without callback listener

I want to change scrollView's offset with code so I use ScrollController:
ScrollController _controller;
_controller.addListener(() {
print('call listener');
});
My way to change offset:
_controller.jumpTo(200);
it will callback listener once.
or
_controller.animateTo(200, duration: Duration(milliseconds: 1), curve: Curves.linear);
it will callback listener, too.
I wonder is there any way to change scrollView offset without callback listener.
Here is all my code and you can coppy and test:
import 'package:flutter/material.dart';
class SingleChildScrollViewDemoPage extends StatefulWidget {
SingleChildScrollViewDemoPage({Key key}) : super(key: key);
#override
_SingleChildScrollViewDemoPageState createState() =>
_SingleChildScrollViewDemoPageState();
}
class _SingleChildScrollViewDemoPageState
extends State<SingleChildScrollViewDemoPage> {
ScrollController _controller;
#override
void initState() {
super.initState();
_controller = ScrollController();
_controller.addListener(() {
print('call listener');
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('SingleChildScrollView')),
body: SingleChildScrollView(
controller: _controller,
child: Column(
children: [
RaisedButton(
child: Text('change offset'),
onPressed: () {
//_controller.jumpTo(200);
_controller.animateTo(200,
duration: Duration(milliseconds: 1), curve: Curves.linear);
},
),
Container(
width: 375,
height: 200,
color: Colors.red,
),
SizedBox(height: 30),
Container(
width: 375,
height: 3000,
color: Colors.green,
),
],
),
),
);
}
}

AnimatedOpacity and AnimatedBuilder with opacity not performing same animation

Minimal reproducible code:
class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
AnimationController _controller;
bool _foo = true;
static const _curve = Curves.linear;
#override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: Duration(milliseconds: 1000),
)..addListener(() => setState(() {}));
}
void _animate() async {
if (_foo) await _controller.forward();
else await _controller.reverse();
_foo = !_foo;
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
AnimatedOpacity(
opacity: _controller.value,
duration: Duration(milliseconds: 500),
curve: _curve,
child: box,
),
SizedBox(height: 12),
AnimatedBuilder(
animation: CurvedAnimation(parent: _controller, curve: _curve),
builder: (context, child) {
return Opacity(
opacity: _controller.value,
child: box,
);
},
),
RaisedButton(
onPressed: _animate,
child: Text('Animate'),
),
],
),
),
);
}
Widget get box => Container(width: 100, height: 100, color: Colors.blue);
}
Output:
From the screenshot, you can see I am using same Curve for both AnimatedOpacity and AnimatedBuilder, but output is still not the same, can anyone tell me why?
I'm new to Flutter, so no idea if I am making some silly mistake.
Thank you so much for your time.
AnimatedOpacity is an ImplicitAnimationWidget, which means it construct a Tween based on the opacity value you give it (and the curve and duration). An implicit animation changes according to the current value and the new one, but because you give to it the _controller.value it changes its velocity based on the velocity change of the the controller (change of rate of a change of rate, sounds like inception). Think like maths, the AnimationBuilder gives you a velocity based on a curve(like first differential) and AnimatedOpacity does the same so you don't need to build a controller, but because you gave it the _controller.value (which changes with a given velocity) it gives you the change of rate of that velocity (sounds like second differential)
Check this example where I gave AnimatedOpacity a simple double (1 or 0 depending at the same time I start the AnimationController). They have the same curve and duration so the animation seems basically the same
class Home extends StatefulWidget{
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<Home> with TickerProviderStateMixin {
AnimationController _controller;
bool _foo = true;
double value;
static const _curve = Curves.linear;
#override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: Duration(milliseconds: 1000),
);//..addListener(() => setState(() {}));
value = _controller.value;
}
void _animate() async {
setState(() {
value = _foo ? 1.0 : 0.0;
});
if (_foo) await _controller.forward();
else await _controller.reverse();
_foo = !_foo;
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
AnimatedOpacity(
opacity: value,//_controller.value,
duration: const Duration(milliseconds: 1000),
curve: _curve,
child: box,
),
SizedBox(height: 12),
AnimatedBuilder(
animation: CurvedAnimation(parent: _controller, curve: _curve),
builder: (context, child) {
return Opacity(
opacity: _controller.value,
child: box,
);
},
),
RaisedButton(
onPressed: _animate,
child: Text('Animate'),
),
],
),
),
);
}
Widget get box => Container(width: 100, height: 100, color: Colors.blue);
}
use same duration
duration: Duration(milliseconds: 500),
use flipped curve in reverseCurve
_animation = CurvedAnimation(
curve: _curve,
reverseCurve: FilppedCurve(_curve),
);
or
AnimatedOpacity(
opacity: value,//_controller.value,
duration: const Duration(milliseconds: 1000),
curve: _foo?_curve:FlippedCurve(_curve),
child: box,
),

animate widgets based on condition in scaffold body

I have a widget, with a scaffold. His body is x widget, how do I animate in the y widget on the body instead of the x widget?
The widgets are like:
Scaffold(
body: condition ? X() : Y(),
)
When the condition goes from true to false or false to true, I want the Y or X widget to animate in. How can I do this?
You can change the Offset values to get your desired result
class Test extends StatefulWidget {
#override
_TestState createState() => _TestState();
}
class _TestState extends State<Test>
with SingleTickerProviderStateMixin {
bool condition;
AnimationController _controller;
Animation<Offset> _offsetAnimation;
#override
void initState() {
condition = false;
_controller = AnimationController(
duration: const Duration(seconds: 1),
vsync: this,
);
_offsetAnimation =
Tween<Offset>(begin: Offset(0.0, -5.0), end: Offset.zero)
.animate(CurvedAnimation(
curve: Curves.linear,
parent: _controller,
));
super.initState();
}
#override
void dispose() {
_controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: InkWell(
onTap: () {
setState(() {
condition = true;
});
_controller.forward();
},
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
color: Colors.red,
width: 200,
height: 200,
),
if (condition)
SlideTransition(
position: _offsetAnimation,
child: Container(
color: Colors.green,
width: 100,
height: 100,
),
),
],
),
),
),
);
}
}

How to rotate an image using Flutter AnimationController and Transform?

I have star png image and I need to rotate the star using Flutter AnimationController and Transformer. I couldn't find any documents or example for image rotation animation.
Any idea How to rotate an image using Flutter AnimationController and Transform?
UPDATE:
class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
AnimationController animationController;
#override
void initState() {
super.initState();
animationController = new AnimationController(
vsync: this,
duration: new Duration(milliseconds: 5000),
);
animationController.forward();
animationController.addListener(() {
setState(() {
if (animationController.status == AnimationStatus.completed) {
animationController.repeat();
}
});
});
}
#override
Widget build(BuildContext context) {
return new Container(
alignment: Alignment.center,
color: Colors.white,
child: new AnimatedBuilder(
animation: animationController,
child: new Container(
height: 80.0,
width: 80.0,
child: new Image.asset('images/StarLogo.png'),
),
builder: (BuildContext context, Widget _widget) {
return new Transform.rotate(
angle: animationController.value,
child: _widget,
);
},
),
);
}
}
Full example (null safe):
Press "go" makes the star icon spin until you press "stop".
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
#override
void initState() {
_controller = AnimationController(
duration: const Duration(milliseconds: 5000),
vsync: this,
);
super.initState();
}
#override
void dispose() {
_controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Demo"),
),
body: Center(
child: Column(
children: <Widget>[
RotationTransition(
turns: Tween(begin: 0.0, end: 1.0).animate(_controller),
child: Icon(Icons.stars),
),
ElevatedButton(
child: Text("go"),
onPressed: () => _controller.forward(),
),
ElevatedButton(
child: Text("reset"),
onPressed: () => _controller.reset(),
),
],
),
),
);
}
}
Step by step guide:
First, let your widget state class implement SingleTickerProviderStateMixin.
Secondly, define an AnimationController and don't forget to dispose it. If you are not yet using null-safe, remove the late keyword.
late AnimationController _controller;
#override
void initState() {
_controller = AnimationController(
duration: const Duration(milliseconds: 5000),
vsync: this,
);
super.initState();
}
#override
void dispose() {
_controller.dispose();
super.dispose();
}
Then wrap your Widget with RotationTransition.
RotationTransition(
turns: Tween(begin: 0.0, end: 1.0).animate(_controller),
child: Icon(Icons.stars),
),
Finally, call methods on the AnimationController to start/stop animation.
Run the animation once, use .forward
Loop the animation, use .repeat
Stop immediately, use .stop
Stop and set it back to original rotation, use .reset
Stop and animate to a rotation value, use .animateTo
Screenshot (Null Safe)
Full code:
import 'dart:math' as math;
class _FooPageState extends State<FooPage> with SingleTickerProviderStateMixin{
late final AnimationController _controller = AnimationController(vsync: this, duration: Duration(seconds: 2))..repeat();
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: AnimatedBuilder(
animation: _controller,
builder: (_, child) {
return Transform.rotate(
angle: _controller.value * 2 * math.pi,
child: child,
);
},
child: FlutterLogo(size: 200),
),
),
);
}
}
Here my example of rotating image. I don't know - but maybe it suits for you
AnimationController rotationController;
#override
void initState() {
rotationController = AnimationController(duration: const Duration(milliseconds: 500), vsync: this);
super.initState();
}
//...
RotationTransition(
turns: Tween(begin: 0.0, end: 1.0).animate(rotationController),
child: ImgButton(...)
//...
rotationController.forward(from: 0.0); // it starts the animation
UPD - how to solve problem with Transform.rotate
In your case all works exactly as you've written - it rotates image from 0.0 to 1.0 (it's default parameters for AnimationController). For full circle you have to set upper parameter to 2 * pi (from math package)
import 'dart:math';
//...
animationController = AnimationController(vsync: this, duration: Duration(seconds: 5), upperBound: pi * 2);
Here i rotate 3 images at once... images saved in assets folder... if you want you can use network images also... i am here rotate 3 images on 3 speeds...
import 'package:flutter/material.dart';
import 'package:fynd/services/auth.dart';
import 'dart:async';
import 'package:fynd/services/cons.dart';
class SplashScreen extends StatefulWidget {
_SplashScreen createState() => new _SplashScreen();
}
class _SplashScreen extends State<StatefulWidget>
with SingleTickerProviderStateMixin {
AnimationController animationController;
#override
void initState() {
super.initState();
animationController = new AnimationController(
vsync: this,
duration: new Duration(seconds: 5),
);
animationController.repeat();
}
#override
Widget build(BuildContext context) {
return new Container(
alignment: Alignment.center,
color: Colors.white,
child: new AnimatedBuilder(
animation: animationController,
child: new Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/splash_circle3.png'))),
child: new AnimatedBuilder(
animation: animationController,
child: new Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/splash_circle2.png'))),
child: new AnimatedBuilder(
animation: animationController,
child: Container(
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
'assets/images/splash_circle1.png'))),
)),
builder: (BuildContext context, Widget _widget) {
return new Transform.rotate(
angle: animationController.value * 4,
child: _widget,
);
}),
),
builder: (BuildContext context, Widget _widget) {
return new Transform.rotate(
angle: animationController.value * 5,
child: _widget,
);
},
),
),
builder: (BuildContext context, Widget _widget) {
return new Transform.rotate(
angle: animationController.value * 6,
child: _widget,
);
},
),
);
}
}
here i put the animated builder in Stack. then you can animate image rotate right(clockwise) and rotate left(anti clockwise).
import 'package:flutter/material.dart';
import 'package:fynd/services/auth.dart';
import 'dart:async';
import 'package:fynd/services/cons.dart';
class SplashScreen extends StatefulWidget {
_SplashScreen createState() => new _SplashScreen();
}
class _SplashScreen extends State<StatefulWidget>
with SingleTickerProviderStateMixin {
AnimationController animationController;
#override
void initState() {
super.initState();
animationController = new AnimationController(
vsync: this,
duration: new Duration(seconds: 5),
);
animationController.repeat();
}
#override
Widget build(BuildContext context)
return new Container(
alignment: Alignment.center,
color: Colors.white,
child: new Stack(children: <Widget>[
new AnimatedBuilder(
animation: animationController,
child :Container(
decoration: BoxDecoration(
image: DecorationImage(image: AssetImage('assets/images/splash_circle3.png'),fit: BoxFit.cover)),
),
builder: (BuildContext context, Widget _widget) {
return new Transform.rotate(
angle: animationController.value * 10,
child: _widget,
);
},
),
new AnimatedBuilder(
animation: animationController,
child: Container(
decoration: BoxDecoration(
image: DecorationImage(image: AssetImage('assets/images/splash_circle2.png'),fit: BoxFit.cover)),
),
builder: (BuildContext context, Widget _widget) {
return new Transform.rotate(
angle: -animationController.value * 10,
child: _widget,
);
},
),
new AnimatedBuilder(
animation: animationController,
child: Container(
decoration: BoxDecoration(
image: DecorationImage(image: AssetImage('assets/images/splash_circle1.png'), fit: BoxFit.cover)),
),
builder: (BuildContext context, Widget _widget) {
return new Transform.rotate(
angle: animationController.value * 10,
child: _widget,
);
}),
],),
);
}
}
Flutter also has the widget AnimatedRotation (docs) which makes rotating something much easier.
You only need a double to set the state of the rotation. It works in a percentage of rotation, if you turn it into degrees, it will be 0.0 = 0deg, 1.0 = 360deg
double turns = 0.0;
AnimatedRotation(
duration: const Duration(milliseconds: 500),
turns: turns,
child: const Icon(Icons.refresh),
)
To make the rotation happen you only need to update the state, and Flutter will execute the animation automatically
void _changeRotation() {
setState(() => turns += 1.0 / 8.0);
}
Full example taken from the Flutter docs to rotate the flutter Logo
class LogoRotate extends StatefulWidget {
const LogoRotate({Key? key}) : super(key: key);
#override
State<LogoRotate> createState() => LogoRotateState();
}
class LogoRotateState extends State<LogoRotate> {
double turns = 0.0;
void _changeRotation() {
setState(() => turns += 1.0 / 8.0);
}
#override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
onPressed: _changeRotation,
child: const Text('Rotate Logo'),
),
Padding(
padding: const EdgeInsets.all(50),
child: AnimatedRotation(
turns: turns,
duration: const Duration(seconds: 1),
child: const FlutterLogo(),
),
),
],
);
}
}
class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
AnimationController animationController;
#override
void initState() {
super.initState();
animationController = new AnimationController(
vsync: this,
duration: new Duration(milliseconds: 5000),
);
animationController.repeat();
}
#override
Widget build(BuildContext context) {
return new Container(
alignment: Alignment.center,
color: Colors.white,
child: RotationTransition(
child: Icon(Icons.refresh),
turns: controller,
)
);
}
}
_controller = AnimationController(duration: const Duration(seconds: 3), vsync: this);
_animation = Tween(begin: 0.0, end: 250.0).animate(_controller)
..addListener(() {
setState(() {});
})
..addStatusListener((state) {
if (state == AnimationStatus.completed) {
print("complete");
}
});
_controller.forward();
new Future.delayed(
const Duration(seconds: 5),
() => Navigator.push(
context,
MaterialPageRoute(builder: (context) => SignScreen()),
));
full example just call
ImageAnimateRotate( your widget )
class ImageAnimateRotate extends StatefulWidget {
final Widget child;
const ImageAnimateRotate({Key? key, required this.child}) : super(key: key);
#override
_ImageAnimateRotateState createState() => _ImageAnimateRotateState();
}
class _ImageAnimateRotateState extends State<ImageAnimateRotate> with SingleTickerProviderStateMixin {
late final AnimationController _controller;
#override
void initState() {
super.initState();
_controller = AnimationController(vsync: this, duration: Duration(seconds: 20))..repeat();
}
#override
Widget build(BuildContext context) {
return Center(
child: AnimatedBuilder(
animation: _controller,
builder: (_, child) {
return Transform.rotate(
angle: _controller.value * 2 * math.pi,
child: child,
);
},
child: widget.child,
),
);
}
}