I am just new to Flutter and mobile dev overall, so I've tried to create some Line Chart using fl_chart and there is a problem, which I don't understand why it doesn't work.
So, here is a simple widget, which has a chart and I want to add some interactions to it like a horizontal scroll (it works), reset the state with a double-tap (works as well), and the ability to zoom in to the chart (doesn't work).
Gesture Detector has onScaleUpdate, which I thought it's what I need, but when I try to pinch-zoom in or out, the callback is not being called and I can't change the chart. A lot of things were tried, in order to make it work, but it was unsuccessful.
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
// ...
class FlChartState extends State<FlChart> {
List<LineChartBarData> mainChartData = [];
double minX = 0;
double maxX = 0;
double resultsLength = 60;
#override
void initState() {
_mainBarDataCalculation(); // Method that prepares the data for the chart
super.initState();
}
#override
Widget build(BuildContext context) {
return GestureDetector(
onDoubleTap: () {
setState(() {
minX = 0;
maxX = resultsLength;
});
},
onScaleUpdate: (scaleUpd) {
// doesn't trigger
},
onHorizontalDragUpdate: (dragUpdDet) {
setState(() {
double primDelta = dragUpdDet.primaryDelta ?? 0.0;
if (primDelta != 0) {
if (primDelta.isNegative) {
if (maxX < resultsLength) {
minX += maxX * 0.005;
maxX += maxX * 0.005;
}
} else {
if (minX > 0) {
minX -= maxX * 0.005;
maxX -= maxX * 0.005;
}
}
}
});
},
child: LineChart(_createLineChartDataWidget()),
);
}
// ...
}
Is there something wrong?
Related
I am drawing a lot of rectangles on the screen for a demo and would love to show which you clicked/tapped on. I have the option to move over the screen with and zoom in and out, but I can't get it working that you can show which rectangle is tapped (the tapped function in the positionComponent are not firing). Does someone know if I am forgetting something or are using the wrong technique to achieve this?
class GameEngine extends FlameGame
with ScaleDetector, ScrollDetector, HasTappables {
final List<Paint> colors;
late double startZoom;
GameEngine(this.colors);
#override
Future<void>? onLoad() {
camera.speed = 250;
for (int i = 0; i < 250; i++) {
for (int j = 0; j < 300; j++) {
Paint color = colors[(i * (j + 1)) + j];
add(Rectangle(color, j * 50, i * 30));
}
}
return super.onLoad();
}
#override
void onScaleStart(info) {
startZoom = camera.zoom;
}
#override
void onScaleUpdate(ScaleUpdateInfo info) {
final currentScale = info.scale.global;
if (!currentScale.isIdentity()) {
camera.zoom = startZoom * currentScale.y;
} else {
camera.translateBy(-info.delta.game);
camera.snap();
}
}
#override
void onScroll(PointerScrollInfo info) {
double zoomValue = info.raw.scrollDelta.dy;
if (zoomValue > 0) {
camera.zoom = camera.zoom * 0.75;
} else {
camera.zoom = camera.zoom * 1.25;
}
return super.onScroll(info);
}
}
class Rectangle extends PositionComponent with Tappable {
final Paint color;
final double left;
final double top;
Rectangle(this.color, this.left, this.top);
#override
void render(Canvas canvas) {
canvas.drawRect(Rect.fromLTWH(left, top, 50, 30), color);
}
#override
bool onTapUp(TapUpInfo info) {
print("tap up");
return true;
}
#override
bool onTapDown(TapDownInfo info) {
print("tap down");
return true;
}
#override
bool onTapCancel() {
print("tap cancel");
return true;
}
}
Your rectangle doesn't set the size and position, so Flame can not determine whether a tap is within the component or not.
I recommend that you extend the RectangleComponent instead of extending PositionComponent, since it's harder to miss something when using the RectangleComponent.
You can see the docs for RectangleComponent here.
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 have the GestureDetector, and I detect only onHorizontalDrag if it started near the edges. How I can pass the gesture to InteractiveViewer if the gesture is not valid for me? if(isHorizontalDragActive == false)
return GestureDetector(
behavior: HitTestBehavior.deferToChild,
onHorizontalDragStart: (DragStartDetails details) {
// allows start only near L/R edges.
final double dX = details.localPosition.dx;
final double dW = constraints.maxWidth / 6;
if (dX < dW || dX > (constraints.maxWidth - dW)) {
isHorizontalDragActive = true;
} else {
isHorizontalDragActive = false;
}
},
onHorizontalDragEnd: (DragEndDetails details) {
if (isHorizontalDragActive == true) {
final double velocity = details.primaryVelocity ?? 0;
if (velocity < 0) {
manager.toForwardPage();
} else if (velocity > 0) {
manager.toBackwardPage();
}
}
isHorizontalDragActive = false;
},
child: InteractiveViewer
Now if I scale InteractiveViewer I can't start moving content inside InteractiveViewer in a horizontal direction.
A GestureDetector wrapping the InteractiveViewer will not respond to GestureDetector events as expected. Try listeners
Listener(
onPointerMove: (moveEvent){
if(moveEvent.delta.dx > 0) {
print("user swiped right");
}
}
child: InteractiveViewer()
.....
)
I am trying to recreate the game flappy birds using flame and flutter but I encountered a problem and I was wondering if anyone would be able to help me.
The problem is that the onTap method is not working. This is my code:
const COLOR = const Color(0xFF75DA8B);
const SIZE = 52.0;
const GRAVITY = 400.0;
const BOOST = -380.0;
void main() async{
WidgetsFlutterBinding.ensureInitialized ();
final size = await Flame.util.initialDimensions();
final game = MyGame(size);
runApp(game.widget);
}
class Bg extends Component with Resizable{
static final Paint _paint = Paint()..color = COLOR;
#override
void render(Canvas c) {
c.drawRect(Rect.fromLTWH(0.0, 0.0, size.width, size.height), _paint);
}
#override
void update(double t) {
}
}
class Bird extends AnimationComponent with Resizable{
double speedY = 0.0;
bool frozen;
Bird () : super.sequenced(SIZE, SIZE, 'bird.png', 4, textureWidth: 16.0, textureHeight: 16.0) {
this.anchor = Anchor.center;
}
Position get velocity => Position (300.0, speedY);
reset () {
this.x = size.width/ 2;
this.y = size.height/2;
speedY = 0;
frozen = true;
angle = 0.0;
}
#override
void resize(Size size) {
super.resize(size);
reset();
}
#override
void update(double t) {
super.update(t);
if (frozen) return;
this.y += speedY * t - GRAVITY * t * t / 2;
this.speedY += GRAVITY * t;
this.angle = velocity.angle();
if (y > size.height) {
reset();
}
}
onTap () {
if (frozen) {
frozen = false;
return;
}
speedY = (speedY + BOOST).clamp(BOOST, speedY);
}
}
class MyGame extends BaseGame {
Bird bird;
MyGame (Size size){
add(Bg());
add(bird = Bird());
}
#override
void onTap() {
bird.onTap();
}
}
The bird stays static, and if I comment the line of code:
if (frozen) return;
on the update method, then it falls but ontap is not working.
Would you know why?
Thank you so much in advance.
I don't know which version of Flame you were using since this is quite an old question. If you are using a release candidate of 1.0.0 today you should at least follow the following structure:
class MyGame extends BaseGame with HasTapableComponents {
Future<void> onLoad() async {
// Load images and sprites etc
add(MyComponent());
}
... your game code
}
class MyComponent extends SpriteAnimationComponent with Tapable {
...
#override
bool onTapUp(TapUpInfo event) {}
#override
bool onTapDown(TapDownInfo event) {}
#override
bool onTapCancel() {}
}