Questions tagged [custom-painter]
53 questions
3
votes
0 answers
How to touch/drag widgets under a CustomPaint in Flutter
I have a media editor class which is editing photo/video with stickers/text/paint...
I want the user be able to draw above all others widgets like in this preview from SnapChat. This is what I'm trying to do :
So the CustomPainter is placed in last…

nicover
- 2,213
- 10
- 24
3
votes
1 answer
Dotted Circle with Flutter Canvas (Custom Paint and Custom Painter)
I need to draw a dotted circle with Custom Painter(Flutter) in my school project. How can I draw a dotted circle on Canvas. I only know how to draw solid circle in canvas. Please answer me if you know. Don't skip. Thank you!
I tried and searched on…

Nyan Win Naing
- 33
- 3
3
votes
0 answers
How to calculate the angle of lines drawn in flutter? Need to find the angle between two lines
I'm working on a paint like application where lines and shapes can be drawn using tapped coordinates. I need to get the angle or degree of the lines drawn in my canvas. Have used CustomPaint to draw the lines and XGestureDetector to get the…

Terin Tittu
- 143
- 1
- 1
- 15
3
votes
1 answer
How to draw custom shapes in flutter
I'm trying to draw a custom shape like this in my app:
Tried to draw using custom painter, but haven't figured out how to get this sort of shape. It's really just a container with a custom border I think, but not sure even where to start. It's just…

Jason Lloyd
- 378
- 7
- 23
2
votes
1 answer
How to round just one end of a line using CustomPainter in Flutter?
I can change both ends to square or rounded using the strokeCap property but can't figure out how to apply tailored settings for each end (ie one end rounded and one square).
How can I achieve this effect?
import…

Kdon
- 892
- 6
- 19
2
votes
1 answer
How to draw a trapezoid shape line in flutter using Rrect or similar?
I want to draw a trapezoidal shape in flutter, like this:
Now I am drawing an elliptical shape using Rrect for the same,
here is my code for drawing the second picture(getting an elliptical shape)
@override
void paint(Canvas canvas, Offset…

Abdul azeez VP
- 156
- 1
- 1
- 9
2
votes
1 answer
how to give a null value to onPanEnd while making a drawpad using custom painter
onPanEnd: (details) {
pointsList.add(null);
pointsStream.add(pointsList);
},
class DrawModel {
final Offset offset;
final Paint paint;
DrawModel({required this.offset, required…

Dipesh Tripathi
- 39
- 5
2
votes
1 answer
How to add a null value on a list of ? null cant be added because flutter null safety
I'm creating a drawing app using flutter. I've used gesturedetector onpanstart, onpanend, onpanupdate. But I have to close the array of offsets. Because of null safety I am not able to use 'null'. how can I add a null value on the List or end up the…

dev-ruman
- 21
- 3
2
votes
1 answer
Build custom marker with user imageURL and their name for google map in flutter
Trying to Build custom marker with user imageURL and their name for google map in flutter. like below image but i'm less familiar with custom paint. I just know to simple shapes.
I have followed this to build like given image.
Code :
…

Shruti Ramnandan Sharma
- 4,027
- 13
- 44
- 76
1
vote
0 answers
How to prevent the CustomPainter::paint() function from being called when the state of Scaffold::appBar changes
When the state of a button in the Scaffold::appBar changes, the CustomPainter::paint() added to the ::body is automatically called.
Test code
import 'package:flutter/material.dart';
import 'dart:ui' as ui;
class PageTest extends StatefulWidget {
…

wingchun
- 11
- 2
1
vote
1 answer
How to animate a line with multiple offset points using CustomPainter in Flutter?
I want to create a line that animates to multiple offset points until the full line is painted out, using CustomPainter in Flutter.
I have almost achieved this effect, by using an animation object to tween to each new point, and an index to track…

Kdon
- 892
- 6
- 19
1
vote
0 answers
How To Make A Curved Chart with Custom Painter Which Include Custom Tool-tip with Moving Cursor?
I'm Learning Custom Paint and I'm Confused About Them i referred Few Documentation but Still i'm Lacking on it.
Referrence:Curved Chart,
Paths
Some of the Code I have Mentioned Here ..Pls Help Me out of This....
import…

NITHIN KIRTHICK
- 49
- 3
1
vote
1 answer
Timing Animations with Custom Painter in Flutter
I created a custom widget in flutter using custom painter. Its a status bar. I wanted to animate it, but now a problem is occurring that I don't know how to fix.
The bar consists of a line and several dots, depending on the status. When animating…

Tony1704
- 11
- 1
1
vote
1 answer
Flutter : Zooming canvas in certain places
I am trying to make something like a magnifying glass on a Custom Painter. So far I am able to use Backdropfilter with imagefilter matrix scaling like below:
BackdropFilter(
filter: ImageFilter.matrix(matrix),
child :…

Zero Live
- 1,653
- 5
- 22
- 44
1
vote
2 answers
How to have a dynamically sized CustomPainter in Flutter?
Consider the following code from the Flutter docs:
CustomPaint(
painter: Sky(),
child: const Center(
child: Text(
'Once upon a time...',
style: TextStyle(
fontSize: 40.0,
fontWeight: FontWeight.w900,
…

Nerdy Bunz
- 6,040
- 10
- 41
- 100