I am creating an app, it has story parts like Instagram. I'm searching a package for it. Loading circle animation.
You can you this package from pubdev
dashed_circle: ^0.0.1
class _MyPageState extends State<MyPage> with SingleTickerProviderStateMixin {
Variables
Animation gap;
Animation base;
Animation reverse;
AnimationController controller;
#override
void initState() {
super.initState();
controller = AnimationController(vsync: this, duration: Duration(seconds: 4));
base = CurvedAnimation(parent: controller, curve: Curves.easeOut);
reverse = Tween<double>(begin: 0.0, end: -1.0).animate(base);
gap = Tween<double>(begin: 3.0, end: 0.0).animate(base)
..addListener(() {
setState(() {});
});
controller.forward();
}
#override
void dispose() {
controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Container(
alignment: Alignment.center,
child: RotationTransition(
turns: base,
child: DashedCircle(
gapSize: gap.value,
dashes: 40,
color: Color(0XFFED4634),
child: RotationTransition(
turns: reverse,
child: Padding(
padding: const EdgeInsets.all(5.0),
child: CircleAvatar(
radius: 80.0,
backgroundImage: NetworkImage(
"https://images.unsplash.com/photo-1564564295391-7f24f26f568b"
),
),
),
),
),
),
),
);
}
}
I think the best way would be to export the animation and use lottie package to render it on screen.
Related
FadeTransition animation is not working for backdropfilter.
The opacity goes from 0 to 1 suddenly, without the smooth transition that the animation should give.
As you can see from the code below, I have a background image and then a backdropfilter on top to blur the background at app startup.
(I then show other widgets, but the animation is working fine for them).
import 'dart:ui';
import 'package:flutter/material.dart';
class SplashScreen extends StatefulWidget {
#override
_SplashScreenState createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen>
with SingleTickerProviderStateMixin {
AnimationController _controller;
Animation<double> _backgroundOpacity;
bool _visible = true;
#override
void initState() {
_controller = AnimationController(
duration: const Duration(seconds: 2),
vsync: this,
)..forward();
// background opacity animation
_backgroundOpacity = Tween<double>(
begin: 0,
end: 1,
).animate(
CurvedAnimation(
parent: _controller,
curve: Interval(0, 1, curve: Curves.linear),
),
);
super.initState();
}
#override
void dispose() {
super.dispose();
_controller.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.green[800],
),
body: Stack(
children: [
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Image(
image: AssetImage('assets/field.jpg'),
fit: BoxFit.cover,
),
),
FadeTransition(
opacity: _backgroundOpacity,
child: Container(
child: BackdropFilter(
filter: new ImageFilter.blur(sigmaX: 6.0, sigmaY: 6.0),
child: new Container(
decoration: new BoxDecoration(
color: Colors.grey.shade200.withOpacity(0.5),
),
),
),
),
),
],
),
);
}
}
basically what I get from this code is the background image clear and nice, then after 2 seconds suddenly blurred, without any transition.
What should I do to make fadeTransition to work with Backdropfilter?
The preferred way to fade in a blur is to use a TweenAnimationBuilder:
TweenAnimationBuilder<double>(
duration: Duration(milliseconds: 500),
tween: Tween<double>(begin: 0, end: 6),
builder: (context, value, _) {
return BackdropFilter(
key: GlobalObjectKey('background'),
filter: ImageFilter.blur(sigmaY: value, sigmaX: value),
child: Container(
decoration: new BoxDecoration(
color: Colors.grey.shade200.withOpacity(0.5),
),
),
);
},
),
I have got a stack of cards and scroll wheel. I am trying to animate the front card, move it to the right, then bring it back in a way it goes to the back of the cards.
I have used a future function to specify witch part of code should be done first. But what I get is; it changes the index of the card first the animation takes place. Here is my code:
class AnimationsPractice extends StatefulWidget {
static const String id = 'test_screen';
#override
_AnimationsPracticeState createState() => _AnimationsPracticeState();
}
class _AnimationsPracticeState extends State<AnimationsPractice>
with SingleTickerProviderStateMixin {
FixedExtentScrollController _scrollController =
FixedExtentScrollController(initialItem: 0);
AnimationController _controller;
Animation<Offset> _offsetAnimation;
int selected;
List<Widget> sampleCard;
Animation<Offset> _offsetAnimation2;
bool halfWayAnimation;
#override
void initState() {
super.initState();
_controller =
AnimationController(duration: const Duration(seconds: 1), vsync: this)
..repeat();
_offsetAnimation = Tween<Offset>(
begin: Offset.zero,
end: const Offset(1.5, 0.0),
).animate(
CurvedAnimation(
parent: _controller,
curve: Interval(
0.0,
0.5,
curve: Curves.elasticIn,
),
),
);
_offsetAnimation2 = Tween<Offset>(
begin: const Offset(1.5, 0.0),
end: Offset.zero,
).animate(
CurvedAnimation(
parent: _controller,
curve: Interval(
0.5,
1.0,
curve: Curves.elasticIn,
),
),
);
halfWayAnimation = false;
_controller.stop();
sampleCard = [
Container(
height: 60,
width: 40,
color: Colors.red,
),
Transform.rotate(
angle: 10 * (pi / 180),
child: Container(
height: 60,
width: 40,
color: Colors.blueGrey,
)),
SlideTransition(
position: halfWayAnimation ? _offsetAnimation2 : _offsetAnimation,
child: Container(
height: 60,
width: 40,
color: Colors.yellow,
),
),
];
}
#override
void dispose() {
super.dispose();
_controller.dispose();
}
Future<void> _playAnimation() async {
try {
await _controller.forward().orCancel;
await siftingIndex();
await _controller.reverse().orCancel;
} on TickerCanceled {
// the animation got canceled, probably because it was disposed of
}
}
Future<void> siftingIndex() {
return Future.delayed(const Duration(microseconds: 200), () {
sampleCard.insert(0, sampleCard[sampleCard.length - 1]);
sampleCard.removeLast();
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: const Size.fromHeight(180.0),
child: SafeArea(
child: TextButton(
child: Text('back to login'),
onPressed: () {
Navigator.pushNamed(context, LoginScreen.id);
},
),
),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Stack(children: sampleCard),
CustomScrollWheel(
onItemChange: (x) {
setState(() {
_playAnimation();
halfWayAnimation = true;
});
},
scrollController: _scrollController,
),
],
),
);
}
}
enter image description here
I want to make an animation on a notification bell icon to make it rings like these animations:
https://icons8.com/animated-icons/bell
or one of these
https://csshint.com/css-notification-bell-icon/
how this can be achieved with flutter?
This animates the flutter alarm icon to shake a couple times you can play some of the variable to get the effect how you want it. This is like the second example you provided as for the first you would need a custom icon where you could animate just that part of the icon.
AnimationController _animationController;
#override
void initState() {
_animationController =
AnimationController(vsync: this, duration: Duration(milliseconds: 500));
super.initState();
}
void _runAnimation() async {
for (int i = 0; i < 3; i++) {
await _animationController.forward();
await _animationController.reverse();
}
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RotationTransition(
turns: Tween(begin: 0.0, end: -.1)
.chain(CurveTween(curve: Curves.elasticIn))
.animate(_animationController),
child: Icon(Icons.alarm)),
RaisedButton(
child: Text('Run Animation'),
onPressed: () => _runAnimation(),
)
],
),
),
);
If you need further explanation on how this works let me know.
You can use this animated_widget flutter package: animated_widget flutter package
For Shake:
ShakeAnimatedWidget(
enabled: this._enabled,
duration: Duration(milliseconds: 1500),
shakeAngle: Rotation.deg(z: 40),
curve: Curves.linear,
child: FlutterLogo(
style: FlutterLogoStyle.stacked,
),
),
Suppose I have a List of integer numbers between 0-1000
suppose picture below:
but instead of fruits , I want to show the number.
now I have 3 problem:
1:as you know at last the item must be centered in its box , how can I do that inside ListView
2:I should only controll the ListView with controllers and user shouldn't move it.
3:how to gradually spin it ?
this is my code:
class SpinnerChance extends StatefulWidget {
#override
_SpinnerChanceState createState() => _SpinnerChanceState();
}
class _SpinnerChanceState extends State<SpinnerChance>
with SingleTickerProviderStateMixin {
AnimationController _animationController;
Animation<double> _animation1;
Animation<double> _animation2;
Animation<double> _animation3;
#override
void initState() {
super.initState();
_animationController = AnimationController(
vsync: this,
duration: Duration(seconds: 5),
);
_animation1 = Tween(begin: 0.0, end: 100.0).animate(
CurvedAnimation(
parent: _animationController,
curve: Curves.fastOutSlowIn,
),
)..addListener(() {
setState(() {});
});
_animation2 = Tween(begin: 0.0, end: 30.0).animate(
CurvedAnimation(
parent: _animationController,
curve: Curves.fastOutSlowIn,
),
)..addListener(() {
setState(() {});
});
_animation3 = Tween(begin: 0.0, end: 10.0).animate(
CurvedAnimation(
parent: _animationController,
curve: Curves.fastOutSlowIn,
),
)..addListener(() {
setState(() {});
});
}
List<Widget> items = [];
#override
void dispose() {
_animationController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
child: Text(_animation1?.value?.toStringAsFixed(1) ??
"You Dont Spin It Yet"),
),
Container(
child: Text(_animation2?.value?.toStringAsFixed(1) ??
"You Dont Spin It Yet"),
),
Container(
child: Text(_animation3?.value?.toStringAsFixed(1) ??
"You Dont Spin It Yet"),
),
],
),
RaisedButton(
child: Text("Spin!"),
onPressed: () {
_animationController.forward();
},
)
],
),
);
}
}
I could imagine there's a lot of ways to create the effect you want. It's basically a slot machine but instead of fruits, you use numbers.
I found this tutorial which answers most of your questions on how to achieve the animation and as for how to turn it into numbers, you could use Text widgets instead of images since you would only need the numbers 0-9.
This isn't completely connected to ListViews in general but if you want to center its item then wrap the specific widget you want to center inside an Align widget, something like so:
Align(
alignment: Alignment.center
child: yourWidgetHere
),
for implementing this animation
i wrote this below code but, Elastic animation doesn't work on project and i'm not sure whats problem,
i want to have repeat of this animation
import 'package:flutter/material.dart';
void main()=>runApp(MaterialApp(home: Avatar(),));
class Avatar extends StatefulWidget {
#override
State<StatefulWidget> createState()=>_Avatar();
}
class _Avatar extends State<Avatar> with TickerProviderStateMixin{
AnimationController avatarController;
Animation<double> avatarSize;
#override
void initState() {
super.initState();
avatarController= AnimationController(
duration: const Duration(seconds: 1),
vsync: this,
);
avatarSize = new Tween(begin: 0.0, end: 1.0).animate(
new CurvedAnimation(
parent: avatarController,
curve: new Interval(
0.100,
0.400,
curve: Curves.elasticOut,
),
),
);
avatarController.repeate();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
fit:StackFit.expand,
children: <Widget>[
AnimatedBuilder(
animation: avatarController,
builder: (context, widget) => Align(
child: Container(
width: 50.0,
height: 50.0,
color:Colors.green
),
),
)
],
),
);
}
}
Output:
You can play with duration and Tween to fine grain it.
void main() => runApp(MaterialApp(home: Avatar()));
class Avatar extends StatefulWidget {
#override
State<StatefulWidget> createState() => _Avatar();
}
class _Avatar extends State<Avatar> with TickerProviderStateMixin {
AnimationController _controller;
Tween<double> _tween = Tween(begin: 0.75, end: 2);
#override
void initState() {
super.initState();
_controller = AnimationController(duration: const Duration(milliseconds: 700), vsync: this);
_controller.repeat(reverse: true);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Align(
child: ScaleTransition(
scale: _tween.animate(CurvedAnimation(parent: _controller, curve: Curves.elasticOut)),
child: SizedBox(
height: 100,
width: 100,
child: CircleAvatar(backgroundImage: AssetImage(chocolateImage)),
),
),
),
],
),
);
}
}
The Tween's begin and end values should be the values you want to animate between. You then need to use the animated value somewhere in your layout.
For example, change your Tween to Tween(begin: 50.0, end: 100.0) and your Container to
Container(
width: avatarSize.value,
height: avatarSize.value,
color:Colors.green
)
Don't forget to also dispose of the animation controller within your widget's dispose():
#override
void dispose() {
avatarController.dispose();
super.dispose();
}
Add this dependency https://pub.dev/packages/animator
Try this code.
class BounceAnimation extends StatefulWidget {
#override
_BounceAnimationState createState() => _BounceAnimationState();
}
class _BounceAnimationState extends State<BounceAnimation>
with SingleTickerProviderStateMixin {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey,
appBar: AppBar(title: Text("Bouncing Animation example")),
body: Center(
child: Container(
child: Animator(
duration: Duration(seconds: 1),
curve: Curves.elasticOut,
builder: (anim) {
return Transform.scale(
origin: Offset(00, -59),
scale: anim.value,
child: Transform.translate(
offset: Offset(00, -65),
child: CircleAvatar(
radius: 86,
backgroundColor: Colors.white,
child: CircleAvatar(
radius: 84,
backgroundColor: Colors.grey,
child: CircleAvatar(
radius: 80,
backgroundColor: Colors.white,
foregroundColor: Colors.black,
backgroundImage: NetworkImage(
"https://i1.wp.com/devilsworkshop.org/wp-content/uploads/sites/8/2013/01/enlarged-facebook-profile-picture.jpg?w=448&ssl=1",
),
),
),
),
),
);
},
)),
),
);
}
}