Scroll and controller priority flutter - flutter

i have a CupertinoModalBottomSheet that is closing by scrolling down. And in this page i have image that i can pinch by two fingers. Is there any way to change priority to pinching when two fingers on screen. Because when i put two fingers on screen i can still close the page by scrolling down until i start pinching.
class PinchZoom extends StatefulWidget {
final Widget child;
PinchZoom({
Key? key,
required this.child,
}) : super(key: key);
#override
State<PinchZoom> createState() => _PinchZoomState();
}
class _PinchZoomState extends State<PinchZoom>
with SingleTickerProviderStateMixin {
late TransformationController controller;
late AnimationController animationController;
Animation<Matrix4>? animation;
Map<int, Offset> touchPositions = <int, Offset>{};
final double minScale = 1;
final double maxScale = 2;
double scale = 1;
OverlayEntry? entry;
#override
void initState() {
super.initState();
controller = TransformationController();
animationController = AnimationController(
vsync: this,
duration: Duration(milliseconds: 200),
)
..addListener(() => controller.value = animation!.value)
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
removeOverlay();
}
});
}
#override
void dispose() {
controller.dispose();
animationController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) =>
BlocBuilder<DishInfoCubit, DishInfoState>(
builder: (_, _state) {
final dishCubit = BlocProvider.of<DishInfoCubit>(context);
return Builder(
builder: (context) => Listener(
onPointerMove: (opm) {
savePointerPosition(opm.pointer, opm.position);
if (touchPositions.length > 1) {
dishCubit.setIsPinchInProgress(true);
}
},
onPointerDown: (opm) {
savePointerPosition(opm.pointer, opm.position);
if (touchPositions.length > 1) {
dishCubit.setIsPinchInProgress(true);
}
},
onPointerCancel: (opc) {
clearPointerPosition(opc.pointer);
if (touchPositions.length < 2) {
dishCubit.setIsPinchInProgress(false);
}
},
onPointerUp: (opc) {
clearPointerPosition(opc.pointer);
if (touchPositions.length < 2) {
dishCubit.setIsPinchInProgress(false);
}
},
child: InteractiveViewer(
transformationController: controller,
clipBehavior: Clip.none,
panEnabled: false,
minScale: minScale,
maxScale: maxScale,
onInteractionStart: (details) {
print("trying to start anim");
if (details.pointerCount < 2) return;
animationController.stop();
},
onInteractionEnd: (details) {
if (details.pointerCount != 1) return;
resetAnimation();
dishCubit.setIsPinchInProgress(false);
},
child: AspectRatio(
aspectRatio: 1,
child: widget.child,
),
),
),
);
},
);
void removeOverlay() {
entry?.remove();
entry = null;
}
void resetAnimation() {
animation = Matrix4Tween(
begin: controller.value,
end: Matrix4.identity(),
).animate(
CurvedAnimation(parent: animationController, curve: Curves.easeInOut),
);
animationController.forward(from: 0);
}
void savePointerPosition(int index, Offset position) {
setState(() {
touchPositions[index] = position;
});
}
void clearPointerPosition(int index) {
setState(() {
touchPositions.remove(index);
});
}
}

Related

How to make "text flying in the screen" animation in flutter

I have a page in my app which if opened, displays 3 text flying in from the left of the screen, one after the other at a duration of 1 sec, to sit in the center of the page. How can I achieve this animation and what flutter package must I use?
I made the most basic Animation components, I hope useful to you
import 'dart:math';
import 'package:flutter/material.dart';
enum AnimationType {
ROTATION,
OFFSET,
}
enum OffsetType {
UP,
DOWN,
LEFT,
RIGHT,
}
typedef AnimationSwich = bool Function();
class BaseAnimationWidget extends StatefulWidget {
const BaseAnimationWidget(
{Key? key,
required this.type,
required this.body,
this.animationSwich,
this.rotationValue,
this.offset,
this.duration,
this.offsetType})
: assert(type == AnimationType.ROTATION
? rotationValue != null
: type == AnimationType.OFFSET
? offset != null && offsetType != null
: true),
super(key: key);
final AnimationSwich? animationSwich;
final Widget body;
final Offset? offset;
final double? rotationValue;
final AnimationType type;
final Duration? duration;
final OffsetType? offsetType;
#override
State<BaseAnimationWidget> createState() => _BaseAnimationWidgetState();
}
class _BaseAnimationWidgetState extends State<BaseAnimationWidget>
with SingleTickerProviderStateMixin {
late AnimationController _animationController;
#override
void initState() {
super.initState();
_animationController = AnimationController(
duration: widget.duration ?? Duration(milliseconds: 300), vsync: this);
}
#override
void dispose() {
_animationController.dispose();
super.dispose();
}
Offset get _offset => widget.offsetType == OffsetType.UP ||
widget.offsetType == OffsetType.DOWN
? Offset(
widget.offset!.dx, widget.offset!.dy * _animationController.value)
: Offset(
widget.offset!.dx * _animationController.value, widget.offset!.dy);
#override
Widget build(BuildContext context) {
if (widget.animationSwich == null) {
DoNothingAction();
} else if (mounted && widget.animationSwich!()) {
_animationController.forward();
} else if (mounted && !widget.animationSwich!()) {
_animationController.reverse();
}
return AnimatedBuilder(
animation: _animationController,
builder: (context, _) {
return widget.type == AnimationType.ROTATION
? Transform.rotate(
angle: widget.rotationValue! * _animationController.value,
child: widget.body)
: Transform.translate(
offset: _offset,
child: widget.body,
);
});
}
}
class MyWidget extends StatefulWidget {
const MyWidget({super.key});
#override
State<MyWidget> createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
var _animationSwich = true;
#override
Widget build(BuildContext context) {
var width = MediaQuery.of(context).size.width;
var height = MediaQuery.of(context).size.height;
return Scaffold(
body: SafeArea(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// Left
BaseAnimationWidget(
type: AnimationType.OFFSET,
duration: Duration(seconds: 1),
body: Text('Test'),
offset: Offset(-width, 0),
offsetType: OffsetType.LEFT,
animationSwich: () => _animationSwich,
),
// Right
BaseAnimationWidget(
type: AnimationType.OFFSET,
duration: Duration(seconds: 1),
body: Text('Test'),
offset: Offset(width, 0),
offsetType: OffsetType.RIGHT,
animationSwich: () => _animationSwich,
),
// Up
BaseAnimationWidget(
type: AnimationType.OFFSET,
duration: Duration(seconds: 1),
body: Text('Test'),
offset: Offset(0, -height),
offsetType: OffsetType.UP,
animationSwich: () => _animationSwich,
),
// Down
BaseAnimationWidget(
type: AnimationType.OFFSET,
duration: Duration(seconds: 1),
body: Text('Test'),
offset: Offset(0, height),
offsetType: OffsetType.DOWN,
animationSwich: () => _animationSwich,
),
// Rotation
BaseAnimationWidget(
type: AnimationType.ROTATION,
duration: Duration(seconds: 1),
body: Text('Test'),
offset: Offset(-width, 0),
offsetType: OffsetType.LEFT,
rotationValue: pi,
animationSwich: () => _animationSwich,
),
TextButton(
onPressed: () {
_animationSwich = !_animationSwich;
setState(() {});
},
child: Text('Action!'))
],
))),
);
}
}

How to transform a widget by switching view?

I want a smooth animation that switch between the previous Scale and position to current Scale and postion. But it look like that it's not the exact previous scale or position. Why the only first widget have a reverse scale => ZoomIn instead of ZoomOut. I add a isSet variable because of the first frame that show the widget far away from where it should start. I have try with AnimatedSlide but it's not the same way to calculate. I don't think I should add more code but if it's necessary for you I would. Am I far from the right way to to it? I'll be grateful. Thank you.
class ItemTransform extends ConsumerStatefulWidget {
final Widget child;
final String idItem;
const ItemTransform({required this.idItem, required this.child, Key? key})
: super(key: key);
#override
_ItemTransformState createState() => _ItemTransformState();
}
class _ItemTransformState extends ConsumerState<ItemTransform>
with SingleTickerProviderStateMixin {
late bool isSet;
late AnimationController _animationController;
late Animation<double> _animationOffset;
late Animation<double> _animationScale;
#override
void initState() {
super.initState();
isSet = false;
_animationController = AnimationController(
duration: const Duration(milliseconds: 500), vsync: this);
_animationOffset = Tween<double>(begin: 1.0, end: 0.0).animate(
CurvedAnimation(parent: _animationController, curve: Curves.easeInOut));
_animationScale = Tween(begin: 1.0, end: 1.0).animate(
CurvedAnimation(parent: _animationController, curve: Curves.easeInOut));
_animationController.forward();
WidgetsBinding.instance!.addPostFrameCallback((timeStamp) {
_afterLayout();
});
}
void _afterLayout() {
if (!mounted) {
return;
}
final RenderBox renderBoxRed = context.findRenderObject() as RenderBox;
final size = renderBoxRed.size;
ref.read(viewAnimationProvider).setSize({widget.idItem: size});
final position = renderBoxRed.localToGlobal(Offset.zero);
ref.read(viewAnimationProvider).setPosition({widget.idItem: position});
isSet = true;
}
#override
void dispose() {
_animationController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _animationController,
builder: (context, _) {
final oldOffset =
ref.read(viewAnimationProvider).oldPositions[widget.idItem];
final newOffset =
ref.read(viewAnimationProvider).newPositions[widget.idItem];
Offset? toMove;
if (newOffset != null && oldOffset != null) {
if (isSet) {
toMove = Offset(
(oldOffset.dx - newOffset.dx) * _animationOffset.value,
(oldOffset.dy - newOffset.dy) * _animationOffset.value);
} else {
toMove = Offset(
(newOffset.dx - oldOffset.dx) * _animationOffset.value,
(newOffset.dy - oldOffset.dy) * _animationOffset.value);
}
}
final oldSizes =
ref.read(viewAnimationProvider).oldSizes[widget.idItem];
final newSizes =
ref.read(viewAnimationProvider).newSizes[widget.idItem];
if (oldSizes != null && newSizes != null) {
final oldSize = oldSizes.width / oldSizes.height;
final newSize = newSizes.width / newSizes.height;
if (isSet ) {
_animationScale = Tween(begin: newSize / oldSize, end: 1.0)
.animate(CurvedAnimation(
parent: _animationController, curve: Curves.easeInOut));
}else{
_animationScale = Tween(begin: oldSize / newSize, end: 1.0).animate(
CurvedAnimation(
parent: _animationController, curve: Curves.easeInOut));
}
}
return Transform.translate(
offset: toMove ?? Offset.zero,
child: Transform.scale(
scale: _animationScale.value,
child: widget.child,
),
);
});
}
}
final viewAnimationProvider =
ChangeNotifierProvider<ViewAnimationController>((ref) {
return ViewAnimationController();
});
class ViewAnimationController extends ChangeNotifier {
late TypeOfView oldView;
late TypeOfView newView;
late Map<String, Offset> oldPositions;
late Map<String, Offset> newPositions;
late Map<String, Size> oldSizes;
late Map<String, Size> newSizes;
ViewAnimationController() {
oldView = TypeOfView.staggered;
newView = TypeOfView.normal;
oldPositions = <String, Offset>{};
newPositions = <String, Offset>{};
oldSizes = <String, Size>{};
newSizes = <String, Size>{};
}
void setView(TypeOfView newV) {
oldView = newView;
newView = newV;
notifyListeners();
}
void setPosition(Map<String, Offset> position) {
final newDx = position.values.first.dx;
final newDy = position.values.first.dy;
final offset = newPositions[position.keys.first];
if (offset != null) {
if (newDx != newPositions[position.keys.first]!.dx ||
newDy != newPositions[position.keys.first]!.dy) {
oldPositions[position.keys.first] = newPositions[position.keys.first]!;
newPositions[position.keys.first] = position.values.first;
// newPositions.addAll(position);
}
} else {
newPositions.addAll(position);
}
}
void setSize(Map<String, Size> map) {
final width = map.values.first.width;
final height = map.values.first.height;
final size = newSizes[map.keys.first];
if (size != null) {
if (width != size.width || height != size.height) {
oldSizes[map.keys.first] = newSizes[map.keys.first]!;
newSizes[map.keys.first] = map.values.first;
}
} else {
newSizes.addAll(map);
}
}
}
switch (ref.watch(currentViewProvider)) {
case TypeOfView.normal:
return GridViewCount(
currentSize: currentSize,
listItem: listItem as List<Item>);
case TypeOfView.staggered:
return GridViewStaggered(
currentSize: currentSize,
listItem: listItem as List<Item>);
}
It looks like you want a GridView that can be zoomed?
I've made a widget in the past, called "GalleryView", to achieve a similar kind of effect, but on mobile devices with "pinch-to-zoom" gesture. Let me put it here and see if it's helpful for you. Maybe you can use it as a starting point and modify it towards your end goal.
Usage:
GalleryView.builder(
itemCount: 101, // total items
maxPerRow: 10, // the maximum zoom-out level allowed
itemBuilder: (_, index) => MyImage(),
)
Source:
class GalleryView extends StatefulWidget {
final int? itemCount;
final IndexedWidgetBuilder itemBuilder;
final int initialPerRow;
final int minPerRow;
final int maxPerRow;
final Duration duration;
final ScrollController? controller;
const GalleryView.builder({
Key? key,
this.itemCount,
required this.itemBuilder,
this.initialPerRow = 3,
this.minPerRow = 1,
this.maxPerRow = 7,
this.duration = const Duration(seconds: 1),
this.controller,
}) : super(key: key);
#override
_GalleryViewState createState() => _GalleryViewState();
}
class _GalleryViewState extends State<GalleryView> {
late final ScrollController _controller =
widget.controller ?? ScrollController();
double _maxWidth = 0.0;
late double _size; // size of each grid item
late double _prevSize;
#override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
if (constraints.maxWidth != _maxWidth) {
_maxWidth = constraints.maxWidth;
_size = _maxWidth / widget.initialPerRow;
WidgetsBinding.instance?.addPostFrameCallback((timeStamp) {
_snapToGrid();
});
}
return GestureDetector(
child: _buildListView(),
onScaleStart: (_) {
_controller.jumpTo(0);
_prevSize = _size;
},
onScaleUpdate: (details) {
final maxSize = _maxWidth / widget.minPerRow;
final minSize = _maxWidth / widget.maxPerRow;
setState(() {
_size = (_prevSize * details.scale).clamp(minSize, maxSize);
});
},
onScaleEnd: (_) => _snapToGrid(),
);
},
);
}
_snapToGrid() {
final countPerRow = (_maxWidth / _size).round().clamp(
widget.minPerRow,
widget.maxPerRow,
);
setState(() => _size = _maxWidth / countPerRow);
}
ListView _buildListView() {
final countPerRow = (_maxWidth / _size).ceil();
return ListView.builder(
controller: _controller,
itemExtent: _size,
itemCount: widget.itemCount != null
? (widget.itemCount! / countPerRow).ceil()
: null,
itemBuilder: (context, int i) {
return OverflowBox(
maxWidth: double.infinity,
alignment: Alignment.centerLeft,
child: Row(
children: [
for (int j = 0; j < countPerRow; j++)
if (widget.itemCount == null ||
i * countPerRow + j < widget.itemCount!)
_buildItem(context, i * countPerRow + j),
],
),
);
},
);
}
Widget _buildItem(context, int index) {
return SizedBox(
width: _size,
height: _size,
child: AnimatedSwitcher(
duration: widget.duration,
child: KeyedSubtree(
key: ValueKey(index),
child: widget.itemBuilder(context, index),
),
),
);
}
}
I finally found a solution. I don't know if it's the best solution but it work as attended. I understand many things in my search. The "_animationScale" work badly because the with and height are same so I have to use "_animationHeight" and "_animationWidth". And I tried in a simple SizedBox and FittedBox to apply the size change but nothing change.
Concerning the offset I use the topLeft with the translate and minus to the new coordonate. It's the same resulte before but I didn't know about that translate methode. I've tried to gather all that _animation in one animation like "Animation<Rect?>" like here or here, but it's relative to a fixed size if I really understand. If someone could clearly explain me why it work as attended? Is there another way with those two previous links?
class ItemTransform extends ConsumerStatefulWidget {
final Widget child;
final String idItem;
const ItemTransform({required this.idItem, required this.child, Key? key})
: super(key: key);
#override
_ItemTransformState createState() => _ItemTransformState();
}
class _ItemTransformState extends ConsumerState<ItemTransform>
with TickerProviderStateMixin {
late bool isSet;
late AnimationController _animationController;
late Animation<Offset> _animationOffset;
late Animation<double> _animationWidth;
late Animation<double> _animationHeight;
#override
void initState() {
super.initState();
isSet = false;
_animationController = AnimationController(
duration: const Duration(milliseconds: 500), vsync: this);
_animationOffset = Tween<Offset>(begin: Offset.zero, end: Offset.zero)
.animate(CurvedAnimation(
parent: _animationController, curve: Curves.easeInOut));
_animationWidth = Tween(begin: 1.0, end: 1.0).animate(
CurvedAnimation(parent: _animationController, curve: Curves.easeInOut));
_animationHeight = Tween(begin: 1.0, end: 1.0).animate(
CurvedAnimation(parent: _animationController, curve: Curves.easeInOut));
WidgetsBinding.instance!.addPostFrameCallback((timeStamp) {
_afterLayout();
});
}
void _afterLayout() {
if (!mounted) {
return;
}
final RenderBox renderBox = context.findRenderObject() as RenderBox;
final size = renderBox.size;
_animationWidth = Tween(begin: size.width, end: size.width).animate(
CurvedAnimation(parent: _animationController, curve: Curves.easeInOut));
_animationHeight = Tween(begin: size.height, end: size.height).animate(
CurvedAnimation(parent: _animationController, curve: Curves.easeInOut));
final position = renderBox.localToGlobal(Offset.zero);
ref.read(viewAnimationProvider).setNewRect(
id: widget.idItem,
newFromWidget:
Rect.fromLTWH(position.dx, position.dy, size.width, size.height));
if (ref.read(viewAnimationProvider).newRect[widget.idItem] != null) {
_animationController.forward();
}
isSet = true;
}
#override
void dispose() {
_animationController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _animationController,
builder: (context, _) {
final oldRect =
ref.read(viewAnimationProvider).oldRect[widget.idItem];
final newRect =
ref.read(viewAnimationProvider).newRect[widget.idItem];
if (oldRect != null && newRect != null) {
_animationOffset = Tween<Offset>(
begin: oldRect.topLeft
.translate(-newRect.topLeft.dx, -newRect.topLeft.dy),
end: Offset.zero)
.animate(CurvedAnimation(
parent: _animationController, curve: Curves.easeInOut));
//
_animationWidth =
Tween(begin: oldRect.size.width, end: newRect.size.width)
.animate(CurvedAnimation(
parent: _animationController, curve: Curves.easeInOut));
_animationHeight =
Tween(begin: oldRect.size.height, end: newRect.size.height)
.animate(CurvedAnimation(
parent: _animationController, curve: Curves.easeInOut));
}
return Offstage(
offstage: !isSet,
child: Transform.translate(
offset: _animationOffset.value,
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(
height: _animationHeight.value,
width: _animationWidth.value,
child: widget.child,
),
],
),
),
);
});
}
}
final viewAnimationProvider =
ChangeNotifierProvider<ViewAnimationController>((ref) {
return ViewAnimationController();
});
class ViewAnimationController extends ChangeNotifier {
late Map<String,Rect> oldRect;
late Map<String,Rect> newRect;
ViewAnimationController() {
oldRect = <String, Rect>{};
newRect = <String, Rect>{};
}
void setNewRect({required String id, required Rect newFromWidget}){
final rect = newRect[id];
if(rect != null && rect != newFromWidget){
oldRect[id] = rect;
newRect[id] = newFromWidget;
}else{
newRect.addAll({id:newFromWidget});
}
}
}

Flutter - No BorderRadius assignment

When I build the application, I encounter such an error.
lib/input_page/pacman_slider.dart:41:7: Error: A value of type 'Animation<BorderRadius?>' can't be assigned to a variable of type 'Animation' because 'BorderRadius?' is nullable and 'BorderRadius' isn't.
'Animation' is from 'package:flutter/src/animation/animation.dart' ('../../Dev/flutter/packages/flutter/lib/src/animation/animation.dart').
'BorderRadius' is from 'package:flutter/src/painting/border_radius.dart' ('../../Dev/flutter/packages/flutter/lib/src/painting/border_radius.dart').
).animate(CurvedAnimation(
^
Error Code:
void initState() {
super.initState();
pacmanMovementController =
AnimationController(vsync: this, duration: Duration(milliseconds: 400));
_bordersAnimation = BorderRadiusTween(
begin: BorderRadius.circular(8.0),
end: BorderRadius.circular(50.0),
).animate(CurvedAnimation(
parent: widget.submitAnimationController,
curve: Interval(0.0, 0.07),
));
}
Full Code:
const double _pacmanWidth = 21.0;
const double _sliderHorizontalMargin = 24.0;
const double _dotsLeftMargin = 8.0;
class PacmanSlider extends StatefulWidget {
final VoidCallback onSubmit;
final AnimationController submitAnimationController;
const PacmanSlider(
{Key? key,
required this.onSubmit,
required this.submitAnimationController})
: super(key: key);
#override
_PacmanSliderState createState() => _PacmanSliderState();
}
class _PacmanSliderState extends State<PacmanSlider>
with TickerProviderStateMixin {
double _pacmanPosition = 24.0;
late Animation<BorderRadius> _bordersAnimation;
late Animation<double> _submitWidthAnimation;
late AnimationController pacmanMovementController;
late Animation<double> pacmanAnimation;
#override
void initState() {
super.initState();
pacmanMovementController =
AnimationController(vsync: this, duration: Duration(milliseconds: 400));
_bordersAnimation = BorderRadiusTween(
begin: BorderRadius.circular(8.0),
end: BorderRadius.circular(50.0),
).animate(CurvedAnimation(
parent: widget.submitAnimationController,
curve: Interval(0.0, 0.07),
));
}
#override
void dispose() {
pacmanMovementController.dispose();
super.dispose();
}
// double get width => _submitWidthAnimation?.value ?? 0.0;
double get width => _submitWidthAnimation.value;
#override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
_submitWidthAnimation = Tween<double>(
begin: constraints.maxWidth,
end: screenAwareSize(52.0, context),
).animate(CurvedAnimation(
parent: widget.submitAnimationController,
curve: Interval(0.05, 0.15),
));
return AnimatedBuilder(
animation: widget.submitAnimationController,
builder: (context, child) {
Decoration decoration = BoxDecoration(
borderRadius: _bordersAnimation.value,
color: Theme.of(context).primaryColor,
);
return Center(
child: Container(
height: screenAwareSize(52.0, context),
width: width,
decoration: decoration,
child: _submitWidthAnimation.isDismissed
? GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () => _animatePacmanToEnd(),
child: Stack(
alignment: Alignment.centerRight,
children: <Widget>[
AnimatedDots(),
_drawDotCurtain(decoration),
_drawPacman(),
],
),
)
: Container(),
),
);
},
);
},
);
}
Widget _drawDotCurtain(Decoration decoration) {
if (width == 0.0) {
return Container();
}
double marginRight =
width - _pacmanPosition - screenAwareSize(_pacmanWidth / 2, context);
return Positioned.fill(
right: marginRight,
child: Container(decoration: decoration),
);
}
Widget _drawPacman() {
pacmanAnimation = _initPacmanAnimation();
return Positioned(
left: _pacmanPosition,
child: GestureDetector(
onHorizontalDragUpdate: (details) => _onPacmanDrag(width, details),
onHorizontalDragEnd: (details) => _onPacmanEnd(width, details),
child: PacmanIcon(),
),
);
}
Animation<double> _initPacmanAnimation() {
Animation<double> animation = Tween(
begin: _pacmanMinPosition(),
end: _pacmanMaxPosition(width),
).animate(pacmanMovementController);
animation.addListener(() {
setState(() {
_pacmanPosition = animation.value;
});
if (animation.status == AnimationStatus.completed) {
_onPacmanSubmit();
}
});
return animation;
}
_onPacmanSubmit() {
widget.onSubmit();
Future.delayed(Duration(seconds: 1), () => _resetPacman());
}
_onPacmanDrag(double width, DragUpdateDetails details) {
setState(() {
_pacmanPosition += details.delta.dx;
_pacmanPosition = math.max(_pacmanMinPosition(),
math.min(_pacmanMaxPosition(width), _pacmanPosition));
});
}
_onPacmanEnd(double width, DragEndDetails details) {
bool isOverHalf =
_pacmanPosition + screenAwareSize(_pacmanWidth / 2, context) >
0.5 * width;
if (isOverHalf) {
_animatePacmanToEnd();
} else {
_resetPacman();
}
}
_animatePacmanToEnd() {
pacmanMovementController.forward(
from: _pacmanPosition / _pacmanMaxPosition(width));
}
_resetPacman() {
if (this.mounted) {
setState(() => _pacmanPosition = _pacmanMinPosition());
}
}
double _pacmanMinPosition() =>
screenAwareSize(_sliderHorizontalMargin, context);
double _pacmanMaxPosition(double sliderWidth) =>
sliderWidth -
screenAwareSize(_sliderHorizontalMargin / 2 + _pacmanWidth, context);
}
class AnimatedDots extends StatefulWidget {
#override
_AnimatedDotsState createState() => _AnimatedDotsState();
}
class _AnimatedDotsState extends State<AnimatedDots>
with TickerProviderStateMixin {
final int numberOfDots = 10;
final double minOpacity = 0.1;
final double maxOpacity = 0.5;
late AnimationController hintAnimationController;
#override
void initState() {
super.initState();
_initHintAnimationController();
hintAnimationController.forward();
}
#override
void dispose() {
hintAnimationController.dispose();
super.dispose();
}
void _initHintAnimationController() {
hintAnimationController = AnimationController(
vsync: this,
duration: Duration(milliseconds: 800),
);
hintAnimationController.addStatusListener((status) {
if (status == AnimationStatus.completed) {
Future.delayed(Duration(milliseconds: 800), () {
if (this.mounted) {
hintAnimationController.forward(from: 0.0);
}
});
}
});
}
#override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.only(
left: screenAwareSize(
_sliderHorizontalMargin + _pacmanWidth + _dotsLeftMargin,
context),
right: screenAwareSize(_sliderHorizontalMargin, context)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: List.generate(numberOfDots, _generateDot)
..add(Opacity(
opacity: maxOpacity,
child: Dot(size: 14.0),
)),
),
);
}
Widget _generateDot(int dotNumber) {
Animation animation = _initDotAnimation(dotNumber);
return AnimatedBuilder(
animation: animation,
builder: (context, child) => Opacity(
opacity: animation.value,
child: child,
),
child: Dot(size: 9.0),
);
}
Animation<double> _initDotAnimation(int dotNumber) {
double lastDotStartTime = 0.4;
double dotAnimationDuration = 0.5;
double begin = lastDotStartTime * dotNumber / numberOfDots;
double end = begin + dotAnimationDuration;
return SinusoidalAnimation(min: minOpacity, max: maxOpacity).animate(
CurvedAnimation(
parent: hintAnimationController,
curve: Interval(begin, end),
),
);
}
}
class SinusoidalAnimation extends Animatable<double> {
SinusoidalAnimation({required this.min, required this.max});
final double min;
final double max;
#override
double transform(double t) {
return min + (max - min) * math.sin(math.pi * t);
}
}
class Dot extends StatelessWidget {
final double size;
const Dot({Key? key, required this.size}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
height: screenAwareSize(size, context),
width: screenAwareSize(size, context),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
);
}
}
class PacmanIcon extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.only(
right: screenAwareSize(16.0, context),
),
child: SvgPicture.asset(
'images/pacman.svg',
height: screenAwareSize(25.0, context),
width: screenAwareSize(21.0, context),
),
);
}
}
As you see in the attached capture, BorderRadiusTween has a nullable value of type BorderRadius?
I'd suggest to either declare _bordersAnimation as Animation<BorderRadius?>or just using an Animation<double> instead

ValueKey does not work properly with the animatedbuilder - flutter

So, I am making the sport application with the bookmark articles functionality. The bookmark article widget has an animated icon with a simple size animation. After clicking on the icon that removes the article, the icons in other widgets refresh in a few moments. I put the link with the screen video below.
https://firebasestorage.googleapis.com/v0/b/footballapp-2fb40.appspot.com/o/Screen_Recording_20210727-122200.mp4?alt=media&token=794fb85b-659a-4127-a6cb-e784bde7ff72
class BookmarkArticleIcon extends StatefulWidget {
final Color iconColor;
final double iconSize;
final Article article;
final ValueKey key;
BookmarkArticleIcon({this.iconColor, this.iconSize, this.article, this.key})
: super(key: key);
#override
_BookmarkArticleIconState createState() => _BookmarkArticleIconState();
}
class _BookmarkArticleIconState extends State<BookmarkArticleIcon>
with SingleTickerProviderStateMixin {
AnimationController _animationController;
Animation<double> _animation;
#override
void initState() {
super.initState();
BlocProvider.of<BookmarkArticleBloc>(context)
.add(FetchInitialArticleState(article: widget.article));
_animationController =
AnimationController(vsync: this, duration: Duration(milliseconds: 100))
..addListener(() {
if (_animationController.isCompleted) {
_animationController.reverse();
}
});
_animation =
Tween<double>(begin: 1.0, end: 1.2).animate(_animationController);
}
#override
void dispose() {
_animationController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return BlocBuilder<BookmarkArticleBloc, BookmarkArticleState>(
buildWhen: _buildWhenFunction,
builder: (context, state) {
if (state is BookmarkArticleResult) {
return AnimatedBuilder(
animation: _animationController,
builder: (context, _) {
return Transform.scale(
scale: _animation.value,
child: InkWell(
child: Icon(
(state.isBookmarked)
? Icons.bookmark
: Icons.bookmark_outline,
color: widget.iconColor,
size: widget.iconSize,
),
onTap: () {
_onTapFunction(state);
}),
);
});
} else {
return LoadingWidget(
iconColor: widget.iconColor,
);
}
},
);
}
void _onTapFunction(BookmarkArticleResult state) {
final BookmarkArticleBloc _bookmarkArticleBloc =
BlocProvider.of<BookmarkArticleBloc>(context);
_animationController.forward();
if (state.isBookmarked) {
_bookmarkArticleBloc
.add(RemoveBookmarkedArticle(article: widget.article));
} else {
_bookmarkArticleBloc.add(AddBookmarkArticle(article: widget.article));
}
}
bool _buildWhenFunction(previous, current) {
if ((current is BookmarkArticleResult &&
current.articleID == widget.article.id) ||
(current is LoadingBookmarkArticle &&
current.articleID == widget.article.id)) {
return true;
} else {
return false;
}
}
}
class LoadingWidget extends StatelessWidget {
final Color iconColor;
LoadingWidget({this.iconColor});
#override
Widget build(BuildContext context) {
return Container(
key: UniqueKey(),
margin: EdgeInsets.all(4),
width: 16,
height: 16,
child: CircularProgressIndicator(
color: iconColor,
strokeWidth: 2.0,
),
);
}
}

AnimationController repeat with curve animation

How do I make a AnimatedController that repeats, but starts up with a curve animation.
Code:
AnimationController :
var _animating = false;
AnimationController _rotationAnimationController;
Animation<double> _animation;
#override
void initState() {
super.initState();
_rotationAnimationController = AnimationController(
duration: Duration(milliseconds: 2000),
vsync: this,
);
_animation =
Tween<double>(begin: 0, end: 4 * pi ).animate(_rotationAnimationController)
..addListener(() {
setState(() {});
});
}
#override
void dispose() {
_rotationAnimationController.dispose();
super.dispose();
}
Button :
GestureDetector(
onTap: () {
Duration startStopTime = Duration(seconds: 3);
if(_animating) {
_rotationAnimationController.animateBack(1, duration: startStopTime, curve: Curves.easeOut);
setState(() {});
} else {
_rotationAnimationController.repeat() //This needs to start with a curve
}
setState(() {
_animating = !_animating;
});
},
child: [...]
),
If you could also make it so that when the repeat stops, it does that with a curve, that would be amazing too :)
Thanks for the help allready :D
The best I understood your question , you want a CurvedAnimation right ? This means your animation will repeat but follow a specific curve . So here the best I could do for you :
Define your AnimationController like this :
Animation<double> _animation;
AnimationController _animationController;
#override
void initState() {
super.initState();
_animationController =
AnimationController(vsync: this, duration: Duration(seconds: 2))
..addListener(() {
setState(() {});
});
final Animation curve =
CurvedAnimation(parent: _animationController, curve: Curves.easeOut);
_animation = Tween<double>(begin: 0, end: pi * 4).animate(curve);
}
and your GestureDetector like this :
GestureDetector(
onTap: () {
if (_animationController.isAnimating)
{
_animationController.animateBack(0,duration: Duration(seconds: 2), curve: Curves.easeIn);
}
else {
_animationController.repeat();
}
},
child: [...]
),
Edit :
I used a TweenAnimationBuilder to have the effect you want :
import 'package:flutter/material.dart';
import 'dart:math' as math;
class TweenAnimatedBuilderRotate extends StatefulWidget {
TweenAnimatedBuilderRotate({Key key}) : super(key: key);
#override
TweenAnimatedBuilderRotateState createState() =>
TweenAnimatedBuilderRotateState();
}
class TweenAnimatedBuilderRotateState
extends State<TweenAnimatedBuilderRotate> {
double _newAngle = 0;
Curve curveThatChanges = Curves.easeIn;
bool isAnimating = false;
int _millsecs = 2000;
void onCompletion() {
if (isAnimating) {
_newAngle += 4 * math.pi;
curveThatChanges = Curves.linear;
_millsecs = 1000;
setState(() {});
} else {
_newAngle = 0;
_millsecs = 2000;
}
}
void onContainerTap() {
if (isAnimating) {
isAnimating = false;
_newAngle = _newAngle;
setState(() {});
} else {
curveThatChanges = Curves.easeIn;
_newAngle += 4 * math.pi;
isAnimating = true;
setState(() {});
}
}
#override
Widget build(BuildContext context) {
return TweenAnimationBuilder(
tween: Tween<double>(begin: 0, end: _newAngle),
duration: Duration(milliseconds: _millsecs),
onEnd: () => onCompletion(),
curve: curveThatChanges,
builder: (
BuildContext ctx,
double angle,
Widget child,
) {
_newAngle = angle;
return Center(
child: Transform(
transform: Matrix4.identity()..rotateZ(_newAngle),
alignment: FractionalOffset.center,
child: GestureDetector(
child: Container(
color: Colors.blueGrey,
width: 200,
height: 200,
),
onTap: () => onContainerTap(),
),
),
);
});
}
}
You can refer to this Medium article to understand about how TweenAnimationdBuilder Works. You can also modify _millsecs variable to speed up/down the animation. Pass TweenAnimatedBuilderRotate() in the body parameter of the Scaffold(...).