I am using Flutter's CustomPaint to draw a scatter plot the user can add points to by tapping. Since the whole chart cannot fit on a mobile screen, I want the user to be able to pan. How can I enable this? Currently, the chart is not panning, so I can only see a section of it. Here is my code:
import 'dart:io';
import 'dart:ui';
import 'package:flutter/material.dart';
class Draw extends StatefulWidget {
String eventName;
Draw({this.eventName});
#override
_DrawState createState() => _DrawState();
}
class _DrawState extends State<Draw> {
List<Offset> points = List();
#override
Widget build(BuildContext context) {
return Scaffold(
body: GestureDetector(
child: CustomPaint(
size: Size.infinite,
painter: DrawingPainter(),
),
),
);
}
}
class DrawingPainter extends CustomPainter {
DrawingPainter();
Paint tickSettings = Paint()
..strokeCap = (Platform.isAndroid) ? StrokeCap.butt : StrokeCap.round
..isAntiAlias = true
..color = Colors.grey
..strokeWidth = 5.0;
static double axisXCoord = 60;
static double axisHt = 1000;
var ticks = List<Offset>.generate(10, (i) => Offset(axisXCoord, i * (axisHt / 10) + 30));
#override
void paint(Canvas canvas, Size size) {
canvas.drawPoints(PointMode.points, ticks, tickSettings);
}
#override
bool shouldRepaint(DrawingPainter oldDelegate) => true;
}
(Note, I also saw Google's Flutter Charts library, but my understanding is that interactivity is limited to a few things like selecting existing points on the chart.)
Seems I solved it by wrapping the GestureDetector in a SingleChildScrollView.
Related
I'm trying to draw a line graph with some smooth curves, like this one from fl_chart :
I tried using quadraticBezierTo, but it didn't work :
This is my code, is there any other way?
import 'package:flutter/material.dart';
class DrawLines extends StatefulWidget {
final Coordinates lineCoordinates;
final double yHeight;
DrawLines({required this.lineCoordinates, required this.yHeight});
#override
_DrawLinesState createState() => _DrawLinesState();
}
class _DrawLinesState extends State<DrawLines> {
#override
Widget build(BuildContext context) {
return CustomPaint(
foregroundPainter: LinePainter(
coordinates: widget.lineCoordinates, yHeight: widget.yHeight),
);
}
}
class CoordValues {
late double x;
late double y;
CoordValues({required this.x, required this.y});
}
class Coordinates {
late CoordValues startCoords;
late CoordValues endCoords;
Coordinates({required this.startCoords, required this.endCoords});
}
class LinePainter extends CustomPainter {
late Coordinates coordinates;
late double yHeight;
LinePainter({required this.coordinates, required this.yHeight});
#override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = Color(0xFF295AE3)
..strokeCap = StrokeCap.round
..strokeWidth = 2;
//curved
Path path = Path();
path.moveTo(coordinates.startCoords.x, yHeight - coordinates.startCoords.y);
path.quadraticBezierTo(
coordinates.startCoords.x + 15,
coordinates.startCoords.y,
coordinates.endCoords.x + 15,
yHeight - coordinates.endCoords.y);
//for every two points one line is drawn
canvas.drawPath(path, paint);
}
#override
bool shouldRepaint(CustomPainter oldDelegate) => false;
}
I think my question is pretty straightforward but somehow stackoverflow wants me to write more.
Path drawPath(bool closePath) {
final width = MediaQuery.of(context).size.width;
final height = chartHeight;
final path = Path();
final segmentWidth = width / 3 / 2;
path.moveTo(0, height);
path.cubicTo(segmentWidth, height, 2 * segmentWidth, 0, 3 * segmentWidth, 0);
path.cubicTo(4 * segmentWidth, 0, 5 * segmentWidth, height, 6 * segmentWidth, height);
return path;
}
This tutorial is great for this purpose and everything explained well. just check the link below
https://www.kodeco.com/32557465-curved-line-charts-in-flutter
you can use fl_chart dependency here is the link
I'm learning Flutter and am tasked with creating some 3D type effects for transitions and other "wow" factor type things. I have been using flutter's transforms to achieve this but have run into a problem. When I rotate about the Y axis the plane containing whatever tab was showing disappears around the 80 degree mark and shows back up around the 100 degree mark. This does not happen when rotated at -90 degrees.
I've seen other answers posted such as transform: rotateY() making element disappear but none seem to cover this issue.
The question is; is there something I should be setting to avoid this since it is pretty close to off screen when I do it. If not is this a quirk or known bug in flutter's transition?
I am unable to put the full code and I'm not really familiar enough with flutter to rip out a bit and rough up an example quickly. Below is a code snippet and I'll come back with a better code snippet once I have more time. My apologies for that.
#override
Container build (BuildContext context) {
return Container(
child: Transform(
transform: Matrix4.identity()
..setEntry(3, 2, 0.004)
..translate(position.x, position.y, position.z)
..rotateX(rotation.x)
..rotateY(rotation.y)
..rotateZ(rotation.z),
child: CustomPaint(
painter: MyPainter(),
),
),
);
}
class MyPainter extends CustomPainter {
Size rectSize = Size(100, 100);
#override
Future<void> paint(Canvas canvas, Size size) async {
final paint = Paint()
..style = PaintingStyle.fill
..color = Colors.green;
Rect rect = Offset(-rectSize.width / 2.0, -rectSize.height / 2.0) & this.rectSize;
canvas.drawRect(rect, paint);
}
}
EDIT 1: I have tried to get a minimal example working but the rotation actually works as expected. I used the above code with no changes into a statefulwidget but the plane only disappears at 90 and 270 degrees as expected. I'll update the question if I find out anything else. Thanks to all who have looked at this.
After quite a number of hours since yesterday I have discovered the cause of the disappearance. Both fragments of code are held in a custom Container class which uses alignment: FractionalOffset.center to align them into the center of the screen. When this is removed the widgets return to the upper left hand corner and rotates as expected.
I'm not sure why this happens and would love to know if anybody has any ideas. However, below is a minimal replication of the issue. Uncomment the aligment: FractionalOffset.center line in runApp() to see the error in action.
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:vector_math/vector_math.dart' as Vector;
import 'dart:math';
void main() {
runApp(
MaterialApp(
theme: ThemeData.dark(),
home: Stack(
// alignment: FractionalOffset.center, // Remove the comment slashes to see issue
children: [
MyWidget(),
]
)
),
);
//runApp(MyApp());
}
class MyWidget extends StatefulWidget {
#override
State<StatefulWidget> createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
Vector.Vector3 position = Vector.Vector3.zero();
Vector.Vector3 rotation = Vector.Vector3.zero();
int degrees = 0;
#override
initState() {
super.initState();
new Timer.periodic(Duration(milliseconds: 100), (timer) => {timerCall()});
}
void timerCall() {
setState(() {
});
}
#override
Container build (BuildContext context) {
degrees += 1;
if (degrees >= 360) degrees = 0;
rotation.y = degrees * (pi / 180);
return Container(
child: Transform(
transform: Matrix4.identity()
..setEntry(3, 2, 0.004)
..translate(position.x, position.y, position.z)
..rotateX(rotation.x)
..rotateY(rotation.y)
..rotateZ(rotation.z),
child: CustomPaint(
painter: MyPainter(),
),
),
);
}
}
class MyPainter extends CustomPainter {
Size rectSize = Size(200, 200);
#override
Future<void> paint(Canvas canvas, Size size) async {
final paint = Paint()
..style = PaintingStyle.fill
..color = Colors.green;
Rect rect = Offset(-rectSize.width / 2.0, -rectSize.height / 2.0) & this.rectSize;
canvas.drawRect(rect, paint);
}
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
// TODO: implement shouldRepaint
return true;
}
}
I am developing an app using Flutter, where I simply want a rectangle to move on screen when I scroll with my fingers (on Android/iOS) or when I scroll with a mouse wheel or trackpad (on web).
This is what my code looks like:
import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
/////////////////
void main()
{
runApp(MyCustomScroller());
}
/////////////////
class MyCustomScroller extends StatefulWidget
{
#override
_MyCustomScrollerState createState() => _MyCustomScrollerState();
}
class _MyCustomScrollerState extends State<MyCustomScroller> with TickerProviderStateMixin
{
AnimationController animController;
double scrollPos = 500;
#override
void initState()
{
super.initState();
animController = AnimationController.unbounded(
vsync: this,
value: 0,
);
animController.addListener(()
{
setState(()
{
scrollPos = animController.value;
});
});
}
#override
void dispose()
{
animController.dispose();
super.dispose();
}
void _onScrollUpdate(final double velPpf)
{
final double velPps = velPpf*60;
Simulation sim = ClampingScrollSimulation(
position: scrollPos,
velocity: velPps,
friction: 0.01,
);
animController.animateWith(sim);
scrollPos += velPpf;
}
#override
Widget build(BuildContext context)
{
return MaterialApp(
title: 'Scrolling Test',
home: Listener(
onPointerMove: (PointerMoveEvent moveEvent) // mobile, web click or web finger (on mobile)
{
_onScrollUpdate(moveEvent.delta.dy);
},
onPointerSignal: (PointerSignalEvent signalEvent) // web scrolling wheel/trackpad
{
if (signalEvent is PointerScrollEvent)
_onScrollUpdate(-signalEvent.scrollDelta.dy);
},
child: Container(
color: Colors.white,
child: CustomPaint(
painter: MyPainter(
pos: scrollPos,
),
child: Container(),
)
)
)
);
}
}
/////////////////
class MyPainter extends CustomPainter
{
final double pos;
MyPainter({
#required this.pos
});
#override
void paint(Canvas canvas, Size size)
{
Paint paint = Paint()
..color = Colors.black
..strokeWidth = 12
..style = PaintingStyle.stroke;
final double x = size.width/2;
final double y = (pos % size.height*1.5) - size.height*0.25;
final Offset offset0 = Offset(x, y);
final Offset offset1 = Offset(x, y+size.height*0.25);
canvas.drawLine(offset0, offset1, paint);
}
#override
bool shouldRepaint(CustomPainter oldDelegate)
{
return true;
}
}
Everything seems to work fine, I can see a rectangle that moves up and down as I scroll. When I stop scrolling, the AnimationController continues moving the rectangle. I know similar results can be achieved using a GestureDetector instead of a Listener, but a GestureDetector does not work on mouse scrolling on web.
The problem comes when I run my app in profiling mode: I turn on the Performance Overlay to see if the UI and Raster threads are executing fine and that I don't have any jank.
Most of the time the performance of the raster thread looks fine, as you can see in the following picture:
However sometimes, for some reason, the time taken to render a frame on the Raster thread goes up to around 16-17 ms, as you can see in the following image, and then stays around those values for the upcoming frames, until the animation finishes:
Anybody has any idea why this happens?
I have a CustomPainter that I want to render some items every few milliseconds. But I only want to render the items that have changed since the last draw. I plan on manually clearing the area that will be changing and redrawing just in the area. The problem is that the canvas in Flutter seems to be completely new every time paint() is called. I understand that I can keep track of the entire state and redraw everything every time, but for performance reasons and the specific use case that is not preferable. Below is sample code that could represent the issue:
I understand that everything will need to be redrawn when the canvas size changes.
import 'dart:async';
import 'dart:math';
import 'package:flutter/material.dart';
class CanvasWidget extends StatefulWidget {
CanvasWidget({Key key}) : super(key: key);
#override
_CanvasWidgetState createState() => _CanvasWidgetState();
}
class _CanvasWidgetState extends State<CanvasWidget> {
final _repaint = ValueNotifier<int>(0);
TestingPainter _wavePainter;
#override
void initState() {
_wavePainter = TestingPainter(repaint: _repaint);
Timer.periodic( Duration(milliseconds: 50), (Timer timer) {
_repaint.value++;
});
super.initState();
}
#override
Widget build(BuildContext context) {
return CustomPaint(
painter: _wavePainter,
);
}
}
class TestingPainter extends CustomPainter {
static const double _numberPixelsToDraw = 3;
final _rng = Random();
double _currentX = 0;
double _currentY = 0;
TestingPainter({Listenable repaint}): super(repaint: repaint);
#override
void paint(Canvas canvas, Size size) {
var paint = Paint();
paint.color = Colors.transparent;
if(_currentX + _numberPixelsToDraw > size.width)
{
_currentX = 0;
}
// Clear previously drawn points
var clearArea = Rect.fromLTWH(_currentX, 0, _numberPixelsToDraw, size.height);
canvas.drawRect(clearArea, paint);
Path path = Path();
path.moveTo(_currentX, _currentY);
for(int i = 0; i < _numberPixelsToDraw; i++)
{
_currentX++;
_currentY = _rng.nextInt(size.height.toInt()).toDouble();
path.lineTo(_currentX, _currentY);
}
// Draw new points in red
paint.color = Colors.red;
canvas.drawPath(path, paint);
}
#override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
Redrawing the whole canvas, even on every frame, is completely efficient. Trying to reuse the previous frame will often not be more efficient.
Looking at the code you posted, there are certain areas with rooms for improvement, but trying to preserve parts of the canvas should not be one of them.
The real performance issue you are having, is from repeatedly changing a ValueNotifier from a Timer.periodic event, every 50 ms. A much better way to handle redrawing on every frame, is to use AnimatedBuilder with a vsync, so the paint method of the CustomPainter will be called on every frame. This is similar to Window.requestAnimationFrame in the web browser world, if you are familiar with that. Here vsync stands for "vertical sync", if you are familiar with how computer graphics work. Essentially, your paint method will be called 60 times per second, on a device with 60 Hz screen, and it'll paint 120 times per second on a 120 Hz screen. This is the correct and scalable way to achieve buttery smooth animation across different kind of devices.
There are other areas worth optimizing, before thinking about preserving parts of the canvas. For example, just briefly looking at your code, you have this line:
_currentY = _rng.nextInt(size.height.toInt()).toDouble();
Here I assume you want to have a random decimal between 0 and size.height, if so, you can simply write _rng.nextDouble() * size.height, instead of casting a double to int and back again, and (probably unintentionally) rounding it during that process. But the performance gain from stuff like these is negligible.
Think about it, if a 3D video game can run smoothly on a phone, with each frame being dramatically different from the previous one, your animation should run smoothly, without having to worry about manually clearing parts of the canvas. Trying to manually optimize the canvas will probably lead to performance loss instead.
So, what you really should be focusing, is to use AnimatedBuilder instead of Timer to trigger the canvas redraw in your project, as a starting point.
For example, here's a small demo I made using AnimatedBuilder and CustomPaint:
Full source code:
import 'dart:math';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
List<SnowFlake> snowflakes = List.generate(100, (index) => SnowFlake());
AnimationController _controller;
#override
void initState() {
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 1),
)..repeat();
super.initState();
}
#override
void dispose() {
_controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
width: double.infinity,
height: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Colors.blue, Colors.lightBlue, Colors.white],
stops: [0, 0.7, 0.95],
),
),
child: AnimatedBuilder(
animation: _controller,
builder: (_, __) {
snowflakes.forEach((snow) => snow.fall());
return CustomPaint(
painter: MyPainter(snowflakes),
);
},
),
),
);
}
}
class MyPainter extends CustomPainter {
final List<SnowFlake> snowflakes;
MyPainter(this.snowflakes);
#override
void paint(Canvas canvas, Size size) {
final w = size.width;
final h = size.height;
final c = size.center(Offset.zero);
final whitePaint = Paint()..color = Colors.white;
canvas.drawCircle(c - Offset(0, -h * 0.165), w / 6, whitePaint);
canvas.drawOval(
Rect.fromCenter(
center: c - Offset(0, -h * 0.35),
width: w * 0.5,
height: w * 0.6,
),
whitePaint);
snowflakes.forEach((snow) =>
canvas.drawCircle(Offset(snow.x, snow.y), snow.radius, whitePaint));
}
#override
bool shouldRepaint(CustomPainter oldDelegate) => true;
}
class SnowFlake {
double x = Random().nextDouble() * 400;
double y = Random().nextDouble() * 800;
double radius = Random().nextDouble() * 2 + 2;
double velocity = Random().nextDouble() * 4 + 2;
SnowFlake();
fall() {
y += velocity;
if (y > 800) {
x = Random().nextDouble() * 400;
y = 10;
radius = Random().nextDouble() * 2 + 2;
velocity = Random().nextDouble() * 4 + 2;
}
}
}
Here I'm generating 100 snowflakes, redrawing the whole screen every frame. You can easily change the number of snowflakes to 1000 or higher, and it would still run very smoothly. Here I'm also not using the device screen size as much as I should be, as you can see, there are some hardcoded values like 400 or 800. Anyway, hopefully this demo would give you some faith in Flutter's graphics engine. :)
Here is another (smaller) example, showing you everything you need to get going with Canvas and Animations in Flutter. It might be easier to follow:
import 'package:flutter/material.dart';
void main() {
runApp(DemoWidget());
}
class DemoWidget extends StatefulWidget {
#override
_DemoWidgetState createState() => _DemoWidgetState();
}
class _DemoWidgetState extends State<DemoWidget>
with SingleTickerProviderStateMixin {
AnimationController _controller;
#override
void initState() {
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 1),
)..repeat(reverse: true);
super.initState();
}
#override
void dispose() {
_controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _controller,
builder: (_, __) => CustomPaint(
painter: MyPainter(_controller.value),
),
);
}
}
class MyPainter extends CustomPainter {
final double value;
MyPainter(this.value);
#override
void paint(Canvas canvas, Size size) {
canvas.drawCircle(
Offset(size.width / 2, size.height / 2),
value * size.shortestSide,
Paint()..color = Colors.blue,
);
}
#override
bool shouldRepaint(CustomPainter oldDelegate) => true;
}
The only solution currently available is to capture the progress as image and then draw the image instead of executing the whole canvas code.
for drawing the image you can use canvas.drawImage as mentioned by pskink in the above comment.
but the solution i would recommend is to wrap the CustomPaint with RenderRepaint to convert that widget to image. for detials refer to
Creating raw image from Widget or Canvas and (https://medium.com/flutter-community/export-your-widget-to-image-with-flutter-dc7ecfa6bafb for brief implementation), and have a condition to check if you are building for the first time or not.
class _CanvasWidgetState extends State<CanvasWidget> {
/// Just to track if its the first frame or not.
var _flag = false;
/// Will be used for generating png image.
final _globalKey = new GlobalKey();
/// Stores the image bytes
Uint8List _imageBytes;
/// No need for this actually;
/// final _repaint = ValueNotifier<int>(0);
TestingPainter _wavePainter;
Future<Uint8List> _capturePng() async {
try {
final boundary = _globalKey
.currentContext.findRenderObject();
ui.Image image = await boundary.toImage();
ByteData byteData =
await image.toByteData(format: ui.ImageByteFormat.png);
var pngBytes = byteData.buffer.asUint8List();
var bs64 = base64Encode(pngBytes);
print(pngBytes);
print(bs64);
setState(() {});
return pngBytes;
} catch (e) {
print(e);
}
}
#override
void initState() {
_wavePainter = TestingPainter();
Timer.periodic( Duration(milliseconds: 50), (Timer timer) {
if (!flag) flag = true;
/// Save your image before each redraw.
_imageBytes = _capturePng();
/// You don't need a listener if you are using a stful widget.
/// It will do just fine.
setState(() {});
});
super.initState();
}
#override
Widget build(BuildContext context) {
return RepaintBoundary(
key: _globalkey,
child: Container(
/// Use this if this is not the first frame.
decoration: _flag ? BoxDecoration(
image: DecorationImage(
image: MemoryImage(_imageBytes)
)
) : null,
child: CustomPainter(
painter: _wavePainter
)
)
);
}
}
This way the image will not be a part of your custom painter and let me tell you, i tried drawing image using canvas but it was not that efficient, the MemoryImage provided by flutter renders image in a much better way.
I am testing the performance in drawing using Flutter. I am using Path to draw line between each point detected by Listener because I have read that the performance would increase using it. I am using Listener because I tried also the Apple Pencil on iPad 2017 by changing the kind property to stylus.
The problem is that I was hoping to get a response in the stroke design similar to notability, it seems much slower, acceptable but not as much as I would like.
So I'm looking for tips to increase performance in terms of speed.
At the following link they recommended using NotifyListener(), but I didn't understand how to proceed. If it really improves performance I would like even an example to be able to implement it.
If Flutter has some limitations when it comes to drawing with your fingers or with a stylus then let me know.
performance issue in drawing using flutter
import 'dart:io';
import 'dart:ui';
import 'package:flutter/material.dart';
class DrawWidget extends StatefulWidget {
#override
_DrawWidgetState createState() => _DrawWidgetState();
}
class _DrawWidgetState extends State<DrawWidget> {
Color selectedColor = Colors.black;
double strokeWidth = 3.0;
List<MapEntry<Path, Object>> pathList = List();
StrokeCap strokeCap = (Platform.isAndroid) ? StrokeCap.butt : StrokeCap.round;
double opacity = 1.0;
Paint pa = Paint();
#override
Widget build(BuildContext context) {
return Listener(
child: CustomPaint(
size: Size.infinite,
painter: DrawingPainter(
pathList: this.pathList,
),
),
onPointerDown: (details) {
if (details.kind == PointerDeviceKind.touch) {
print('down');
setState(() {
Path p = Path();
p.moveTo(details.localPosition.dx, details.localPosition.dy);
pa.strokeCap = strokeCap;
pa.isAntiAlias = true;
pa.color = selectedColor.withOpacity(opacity);
pa.strokeWidth = strokeWidth;
pa.style = PaintingStyle.stroke;
var drawObj = MapEntry<Path,Paint>(p, pa);
pathList.add(drawObj);
});
}
},
onPointerMove: (details) {
if (details.kind == PointerDeviceKind.touch) {
print('move');
setState(() {
pathList.last.key.lineTo(details.localPosition.dx, details.localPosition.dy);
});
}
},
/*onPointerUp: (details) {
setState(() {
});
},*/
);
}
}
class DrawingPainter extends CustomPainter {
DrawingPainter({this.pathList});
List<MapEntry<Path, Object>> pathList;
#override
void paint(Canvas canvas, Size size) {
for(MapEntry<Path, Paint> m in pathList) {
canvas.drawPath(m.key, m.value);
}
}
#override
bool shouldRepaint(DrawingPainter oldDelegate) => true;
}
I think you should not use setState, rather use state management like Bloc or ChangeNotifier or smth.
Also, just drawing a path with this:
canvas.drawPath(m.key, m.value);
Works for only small stroke widths, it leaves a weird-looking line full of blank spaces when drawing.
I implemented this by using Bloc that updates the UI based on the gesture functions (onPanStart, onPanEnd, onPanUpdate). It holds a List of a data model that I called CanvasPath that represents one line (so from onPanStart to onPanEnd events), and it holds the resulting Path of that line, list of Offsets and Paint used to paint it.
In the end paint() method draws every single Path from this CanvasPath object and also a circle in every Offset.
` for every canvasPath do this:
canvas.drawPath(canvasPath.path, _paint);
for (int i = 0; i < canvasPath.drawPoints.length - 1; i++) {
//draw Circle on every Offset of user interaction
canvas.drawCircle(
canvasPath.drawPoints[i],
_raidus,
_paint);
}`
I made a blog about this, where it is explained in much more details:
https://ivanstajcer.medium.com/flutter-drawing-erasing-and-undo-with-custompainter-6d00fec2bbc2