I want to scale an image with animation controller.
so I make animation controller and call .forward() to animate.
but the controller's value stops before its upper bound.
The last value of print("scalecontroller value: " + scaleController.value.toString()); was scalecontroller value: 0.969156.
I know default upper bound is 1.0 but controller.value does not return upper bound value.
How can I make animate controller to return value 1.0 at last?
=====EDIT=====
add codes for animation controller
AnimationController scaleController;
scaleController = AnimationController(
vsync: this, duration: Duration(milliseconds: 500));
if (animate) {
lastScale = _TouchScaleController.scale;
scaleController.forward();
scaleController.addListener(() {
if(scaleController.isAnimating) {
setState(() {
print("scalecontroller value: " + scaleController.value.toString());
_TouchScaleController.scale =
lastScale + ((initScale - lastScale) / (1.0 - 0.0)) * (scaleController.value - 0.0);
});
}
});
}
Related
I made an automatic scrolling bar in flutter, the way I made it scroll automatically by using a combination of a timer and scroll controller, and then I linked the scroll controller to a regular ListView.builder, blew is the implementation of my way to do it
#override
void initState() {
super.initState();
int _length = widget.items.length;
currentItems = widget.items;
// scroll smothly to the end of the list then reverse the scroll
bool isAscending = true;
_timer = Timer.periodic(const Duration(milliseconds: 3000), (timer) {
if (isAscending) {
_currentIndex++;
if (_currentIndex == currentItems.length) {
isAscending = !isAscending;
}
}
if (!isAscending) {
_currentIndex--;
if (_currentIndex == 0) {
isAscending = !isAscending;
}
}
_scrollController.animateTo(_currentIndex * 304.0,
duration: const Duration(milliseconds: 3000), curve: Curves.linear);
});
}
my problem here is when I navigate to another screen or press the phone's home button and stay away from this widget for a while and then come back, I'd find it scrolling so fast to catch the currentIndex ( which is far away from where I left it ) in a period of time that I specified for the .animateTo method, I'm guessing the solution is to somehow pause the timer when I'm not in the same route, but I didn't find any reference of how to implement that
My app has a draggable floating action button that could move everywhere on the screen and stay at that position when being dropped.
The code for the button is from a blogspot and not mine.
The problem is, since everything is set in portrait mode, and there is no detection when rotation occurs, the button could be unreachable when device rotates from portrait mode to landscape mode (if the button was previously on the bottom half of the screen in portrait mode).
Is there anyway to detect previous orientation in order to set the offset for the button again when it rotates?
Here is the code for the floating button class/widget
import 'package:flutter/material.dart';
class DraggableFloatingActionButton extends StatefulWidget {
final Widget child;
final double deviceWidth;
final double deviceHeight;
final Function onPressed;
final GlobalKey parentKey;
DraggableFloatingActionButton({
required this.child,
required this.deviceWidth,
required this.deviceHeight,
required this.onPressed,
required this.parentKey,
});
#override
State<StatefulWidget> createState() => _DraggableFloatingActionButtonState();
}
class _DraggableFloatingActionButtonState extends State<DraggableFloatingActionButton> {
final GlobalKey _key = GlobalKey();
bool _isDragging = false;
late Offset _offset;
late Offset _minOffset;
late Offset _maxOffset;
#override
void initState() {
_offset = Offset(widget.deviceWidth * 0.8, widget.deviceHeight * 0.75);
WidgetsBinding.instance.addPostFrameCallback(_setBoundary);
super.initState();
}
void _setBoundary(_) {
final RenderBox parentRenderBox =
widget.parentKey.currentContext?.findRenderObject() as RenderBox;
final RenderBox renderBox = _key.currentContext?.findRenderObject() as RenderBox;
try {
final Size parentSize = parentRenderBox.size;
final Size size = renderBox.size;
setState(() {
_minOffset = const Offset(0, 0);
_maxOffset = Offset(parentSize.width - size.width, parentSize.height - size.height);
});
} catch (e) {
print('catch: $e');
}
}
void _updatePosition(PointerMoveEvent pointerMoveEvent) {
double newOffsetX = _offset.dx + pointerMoveEvent.delta.dx;
double newOffsetY = _offset.dy + pointerMoveEvent.delta.dy;
if (newOffsetX < _minOffset.dx) {
newOffsetX = _minOffset.dx;
} else if (newOffsetX > _maxOffset.dx) {
newOffsetX = _maxOffset.dx;
}
if (newOffsetY < _minOffset.dy) {
newOffsetY = _minOffset.dy;
} else if (newOffsetY > _maxOffset.dy) {
newOffsetY = _maxOffset.dy;
}
setState(() {
_offset = Offset(newOffsetX, newOffsetY);
});
}
#override
Widget build(BuildContext context) {
return Positioned(
left: _offset.dx,
top: _offset.dy,
child: Listener(
onPointerMove: (PointerMoveEvent pointerMoveEvent) {
_updatePosition(pointerMoveEvent);
setState(() {
_isDragging = true;
});
},
onPointerUp: (PointerUpEvent pointerUpEvent) {
print('onPointerUp');
if (_isDragging) {
setState(() {
_isDragging = false;
});
} else {
widget.onPressed();
}
},
child: Container(
key: _key,
child: widget.child,
),
),
);
}
}
As you can see, it only sets the button's offset based on portrait mode once in initState function, and doesn't deal with rotation.
A walk around that I could think of at this moment is just having another floating button specifically set for landscape mode.
Thank you in advance for any answer.
Ok, so I still don't know how to detect rotation, but my walk around works.
All I do is create another class(widget) for a landscape floating button.
In main, check device orientation to use either the floating button portrait class or landscape class.
The only thing that I change in the landscape button class is
from
_offset = Offset(widget.deviceWidth * 0.8, widget.deviceHeight * 0.75);
to
_offset = Offset(widget.deviceHeight * 1.75, widget.deviceWidth * 0.3);
You shouldn't care about orientation. You should use something like LayoutBuilder to determine your space available, and make breakpoint decisions based on that. LayoutBuilder will update immediately if the device space changes, and you should react to that by doing another layout.
I'm making a whiteboard app and I'm going to implement the draw and zoom functions through the GestureDetector.
Each test went well, but if I use both together, only Zoom function is used in onScaleUpdate() and Draw function is not output.
So I'm going to implement it so that if I touch two fingers, I can only use the Zoom function, and if I touch one, I can only use the Draw function.
Can you tell the number of fingers touched using the Gesture Detector?
Or is there another good way?
The following is part of my code
GestureDetector(
onScaleStart: (details) {
Tool tool = context.read<DrawProvider>().tool;
double seletedPenWidth = context.read<DrawProvider>().seletedPenWidth;
Color seletedPenColor = context.read<DrawProvider>().seletedPenColor;
RenderBox box = context.findRenderObject() as RenderBox;
// zoom test
context.read<DrawProvider>().onScaleStart(details);
// Use Pen
if (tool == Tool.pen) {
Offset point = box.globalToLocal(details.focalPoint);
point = Offset(point.dx, point.dy);
currentLine = DrawingModel(
pointList: [point],
color: seletedPenColor,
width: seletedPenWidth,
);
} else {
// TODO Other Tool
}
},
onScaleUpdate: (details) {
Tool tool = context.read<DrawProvider>().tool;
double seletedPenWidth = context.read<DrawProvider>().seletedPenWidth;
Color seletedPenColor = context.read<DrawProvider>().seletedPenColor;
RenderBox box = context.findRenderObject() as RenderBox;
// zoom test
context.read<DrawProvider>().onScaleUpdate(details);
if (tool == Tool.pen) {
Offset point =
box.globalToLocal(details.focalPoint);
point = Offset(point.dx, point.dy);
List<Offset> path = List.from(currentLine!.pointList!)..add(point);
currentLine = DrawingModel(
pointList: path,
color: seletedPenColor,
width: seletedPenWidth,
);
currentLineStreamController.add(currentLine!);
}
},
onScaleEnd: (details) {
Tool tool = context.read<DrawProvider>().tool;
// zoom test
context.read<DrawProvider>().onScaleEnd(details);
if (tool == Tool.pen) {
allLines = List.from(allLines)..add(currentLine!);
linesStreamController.add(allLines);
}
}
provider.dart, zoom functions
Offset _offset = Offset.zero;
Offset _initialFocalPoint = Offset.zero;
Offset _sessionOffset = Offset.zero;
double _scale = 1.0;
double _initialScale = 1.0;
void onScaleStart(ScaleStartDetails details) {
// TODO if use move tool
// _initialFocalPoint = details.focalPoint;
_initialScale = _scale;
notifyListeners();
}
void onScaleUpdate(ScaleUpdateDetails details) {
// TODO if use move tool
// _sessionOffset = details.focalPoint - _initialFocalPoint;
_scale = _initialScale * details.scale;
notifyListeners();
}
void onScaleEnd(ScaleEndDetails details) {
// TODO if use move tool
// _offset += _sessionOffset;
_sessionOffset = Offset.zero;
notifyListeners();
}
whiteboard screen widget
Transform.translate(
offset: _offset + _sessionOffset,
child: Transform.scale(
scale: _scale,
child: buildAllPaths(allLines: allLines), // drawing screen
),
),
Use details.pointerCount from onScaleUpdate and onScaleStart in GestureDetector.
I'm using the following code, yes its incomplete and pretty little sphagetti as:
WidgetsBinding.instance!.handlePointerEvent(PointerDownEvent(pointer: 0, position: Offset(Get.width/2,Get.height/2)));
WidgetsBinding.instance!.handlePointerEvent(PointerMoveEvent(
pointer: 0,
//timeStamp: Duration(seconds:10),
position: Offset(Get.width/2+10,Get.height/2),
// delta: Offset(-10,Get.height/2),
// distanceMax: 0.05,
));
WidgetsBinding.instance!.handlePointerEvent(PointerUpEvent(pointer: 0),);
I'm trying to simulate a pointer drag on the screen, considering the screen is in landscape mode, from the middle of screen, to probably 10pixels+, to scroll the content a bit on a button-press. But the scroll is happening very fast, and sometimes scrolls with variable speed.
Could anyone recommend something?
Thanks to #pskink, the code he provided has been very helpful, and does answer the question too
late Animation<Offset> animation;
#override
void initState() {
super.initState();
final controller = AnimationController(vsync: this, duration: Duration(milliseconds: 300));
controller.addListener(_listener);
animation = Tween(begin: Offset(100, 100), end: Offset(200, 150)).animate(controller);
print('handle down event');
controller.forward().then((value) => print('handle up event'));
}
_listener() {
print('handle move event ${animation.value}');
}
#override
void initState() {
super.initState();
bool isLastPage = (_currentPage.round() == sliderArrayList.length - 1 );
//Trying to build automatic scrollable
Timer.periodic(Duration(seconds: 5), (Timer timer) {
if (_pageController.hasClients && !isLastPage) {
_pageController.nextPage(
duration: Duration(milliseconds: 200),
curve: Curves.easeIn);}
if(isLastPage){
timer.cancel();
}
});
}
I am trying to build a periodic timer which scrolls pages in pageview, flutter after every 5 seconds, however it keeps on scrolling even after the last page. I have tried to implement the above method if(isLastPage){timer.cancel();} and it doesnt work.
You've to evaluate that expression everytime timer ticks. Also, Put the isLastPage check before the hasClients check.
Timer.periodic(Duration(seconds: 5), (Timer timer) {
final isLastPage = _currentPage.round() == sliderArrayList.length - 1;
if (isLastPage) {
timer.cancel();
return;
}
if (_pageController.hasClients) {
_pageController.nextPage(
duration: Duration(milliseconds: 200),
curve: Curves.easeIn);
}
});