How to center an Item inside ListView - flutter

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
),

Related

how to give a curve effect to a specific range from animation value - flutter

I need to divide the range of animation value to a smaller ranges like this simple example:
class TextAnimation extends StatefulWidget {
const TextAnimation({Key? key}) : super(key: key);
#override
State<TextAnimation> createState() => _TextAnimationState();
}
class _TextAnimationState extends State<TextAnimation>
with SingleTickerProviderStateMixin {
late AnimationController anController;
#override
void initState() {
// TODO: implement initState
super.initState();
anController = AnimationController(
vsync: this,
duration: Duration(seconds: 5),
reverseDuration: Duration(seconds: 5));
}
#override
void dispose() {
// TODO: implement dispose
super.dispose();
anController.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: AnimatedBuilder(
animation: anController,
builder: (context, child) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
width: double.infinity,
),
Container(
width: 300 *
Tween(begin: 0.0, end: 1.0)
.animate(CurvedAnimation(
parent: anController,
curve:
Curves.fastOutSlowIn))
.value,
height: 100,
color: Colors.red,
),
Container(
width: 300 *
(Tween(begin: 0.0, end: 1.0) .animate(CurvedAnimation(
parent: anController, curve: Curves.fastOutSlowIn))
.value.clamp(0.5, 1)),
height: 100,
color: Colors.blue),
InkWell(
onTap: () {
anController.forward();
},
child: Text(
'Start',
style: TextStyle(
color: Colors.black,
fontSize: 20,
),
))
],
);
}),
);
}
}
the second container need to start the animation from the half of the range to the end...
the problem is, the curve effect is lost in this range ,I need to give this range (0.5-1.0) its own curve ,
start fast in 0.5 and end with slow motion.
is there a way to do it without using another animation controller to drive this range?
note : without AnimatedContainer the code above is just a simple example for the problem.

Flutter package to create circle instagram story animation

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.

Animating the front card to the back in a stack view of cards in flutter

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

how can i make bell notification icon animated in flutter

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,
),
),

BoxConstraints has a negative minimum width

in this class as an widget which i use animation to show and hide, when i multiple show or hiding by click, sometimes i get this error:
BoxConstraints has a negative minimum width.The offending constraints were: BoxConstraints(w=-0.8, 0.0<=h<=Infinity; NOT NORMALIZED)
this part of code has problem
child: Row( //<--- problem cause on this line of code
children: <Widget>[
...
],
),
My class code:
class FollowingsStoryList extends StatefulWidget {
final List<Stories> _stories;
FollowingsStoryList({#required List<Stories> stories}) : _stories = stories;
#override
_FollowingsStoryListState createState() => _FollowingsStoryListState();
}
class _FollowingsStoryListState extends State<FollowingsStoryList> with TickerProviderStateMixin {
List<Stories> get stories => widget._stories;
bool _isExpanded = false;
AnimationController _barrierController;
#override
void initState() {
super.initState();
_barrierController = AnimationController(duration: const Duration(milliseconds: 400), vsync: this);
}
#override
Widget build(BuildContext context) {
return AnimatedContainer(
curve: _isExpanded ? Curves.elasticOut : Curves.elasticIn,
duration: Duration(milliseconds: 800),
child: Row(
children: <Widget>[
AnimatedContainer(
curve: _isExpanded ? Curves.elasticOut : Curves.elasticIn,
duration: Duration(milliseconds: 800),
width: _isExpanded ? 90 : 1,
color: Colors.white,
padding: EdgeInsets.only(bottom: 65.0),
child: Column(
children: <Widget>[
],
),
),
GestureDetector(
onTap: _toggleExpanded,
child: StoriesShapeBorder(
alignment: Alignment(1, 0.60),
icon: Icons.adjust,
color: Colors.white,
barWidth: 4,
),
),
],
),
);
}
_toggleExpanded() {
setState(() {
_isExpanded = !_isExpanded;
if (_isExpanded) {
_barrierController.forward();
} else {
_barrierController.reverse();
}
});
}
}
Because Curves.elasticOut and Curves.elasticIn are
oscillating curves that grows/shrinks in magnitude while overshooting
its bounds.
When _isExpanded is false, you are expecting the width to go from 90 to 1 however Curves.elasticOut overshoots and becomes much less than 1 (hence a negative width) for a short period of time.
This is what is causing the error imho. Plus for what reason do you have nested AnimatedContainers? Top AnimatedContainer seems unnecessary.
Try getting rid of the top AnimatedContainer and changing all 4 of the Curves to Curves.linear and I think your error will be gone. Actually you can use any Curves which don't overshoot.
If you really need Elastic Curve, then maybe this would work too:
#override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
AnimatedContainer(
curve: _isExpanded ? Curves.elasticOut : Curves.easeInSine,
duration: Duration(milliseconds: 800),
width: _isExpanded ? 90 : 1,
color: Colors.white,
padding: EdgeInsets.only(bottom: 65.0),
child: Column(
children: <Widget>[
],
),
),
GestureDetector(
onTap: _toggleExpanded,
child: StoriesShapeBorder(
alignment: Alignment(1, 0.60),
icon: Icons.adjust,
color: Colors.white,
barWidth: 4,
),
),
],
);
}
Try it and let me know.
For example, you can use AnimatedController, to (oddly enough) control your animation value and set minimum value "0".
import 'dart:math' as math;
double getValue(...) {
// some logic / curves
// ....
return math.max(0, value);
}