Questions tagged [flutter-canvas]
78 questions
3
votes
1 answer
Unable to draw image on Flutter canvas
I am currently trying to draw an image on a flutter canvas and then draw rectangles over the image to cover specific data. I am running into an issue where the the rectangles are drawing fine but the image is not being drawn behind. It appears as if…

magee05
- 459
- 1
- 4
- 14
2
votes
3 answers
How to create an inner shadow for custom shape in Flutter?
Below is the custom shape I've want to give an inner shadow to :
Below is the code I've used to create this shape : (The text part is not included in the code)
class TitleContainerPaint extends CustomPainter {
@override
void paint(Canvas…

Sarvesh Dalvi
- 2,260
- 2
- 14
- 30
2
votes
2 answers
Rotate painted text about its center
I'm trying to rotate text painted on a Canvas about it's center. Instead, in the below code, the text rotates about the top left corner of the text when I press the floating button.
Pressing the button increments the angle, which is passed to…

user2233706
- 6,148
- 5
- 44
- 86
2
votes
1 answer
How to make custon editable textbox on a canvas in flutter in which background spreads with the text?
I have not worked with canvas in flutter but I think that edit text box like the one in the image can be achieved by canvas. The background expands with the text length and if the text length in a line is 0 then there is no background.
If you have…

Sarthak Singhal
- 1,175
- 12
- 16
2
votes
1 answer
How can I draw a pattern inside a path on a canvas in Flutter?
I want to draw crossing diagonal lines inside a path on a canvas in Flutter.
Right now I've sort of got it working by loading an image asset into a ui.Image and then using a CustomPainter with an ImageShader to draw it on the canvas. It works, but…

Magnus
- 17,157
- 19
- 104
- 189
2
votes
1 answer
How to crop the png image and remove its unused space using Canvas in flutter?
This attachment is from the rendered canvas image which is saved locally via canvas. In image I have drawn the square box which I want to render in canvas and save locally without left and right extra spaces. I just want to save the square box and…

jazzbpn
- 6,441
- 16
- 63
- 99
2
votes
3 answers
How to crop circular(or Square or Hexagon ) area from canvas in Flutter
I want to crop a rectangular image-file and make it circular or square or hexagon shape and save it as image-file locally. I have a bitmap and I want to crop a circular or hexagon region from this bitmap. All pixels outside the circle should be…

jazzbpn
- 6,441
- 16
- 63
- 99
2
votes
1 answer
flutter design Curves layout as single widget
Here solved question about design this layout.
I have a problem to using that, because of this curve on right of screen is not widget and when I want to have some other widgets in green side, I can't, because designed curve is not widget its…

DolDurma
- 15,753
- 51
- 198
- 377
1
vote
1 answer
Flutter canvas draw raw points with different colors
I am trying to draw a lot of points to the screen quickly. I have created the following method.
void _paintPoints(Canvas canvas, List matrix, Size size) {
final width = size.width / matrix.length;
final height = size.height /…

MaLa
- 582
- 2
- 16
1
vote
1 answer
Flutter canvas not rendering as expected
I am trying to render a grid with flutter canvas with Canvas.drawLine method.
Some lines are rendered semi-transparent and some are not even being rendered on the canvas.
class Background extends PositionComponent with HasGameRef{
…

Jan Cahlík
- 91
- 6
1
vote
0 answers
Flutter Paint Canvas - Draw a line with gradient running from side of line to the other, not end to end
I have the x,y for both ends of this line on a canvas, how do I run a gradient from the line sides(as pic).
import 'dart:ui' as ui;
canvas.drawLine(
Offset(x,
y),
Offset(x,
y),
Paint()
…

Luke Stanyer
- 1,404
- 12
- 21
1
vote
1 answer
Canvas.drawPaint in Flutter Custom Painter has no boundaries
In the paint method of a CustomPainter, if we use canvas.paint, the paint unexpectedly goes beyond the boundaries of the containing view.
In the example below, I would have expected the pinkAccent of the Container to be visible in the lower half of…

Nerdy Bunz
- 6,040
- 10
- 41
- 100
1
vote
0 answers
Flutter slider how to make tooltip with rounded edges
I have used flutter slider with RectangularSliderValueIndicatorShape() and the output is
How can I convert the indicator shape to rounded edges
Expected:
Code for the value indicator shape is:-
class ShowIndicator extends RoundSliderThumbShape {
…

Chaitanya Dokara
- 61
- 4
1
vote
1 answer
How to draw only stroke of a text in flutter canvas?
I am trying to implement a feature in my flutter app where user can toggle between stroke and fill view, for text (like adobe illustrator or similar). How to get this effect in flutter canvas.
Here is a Question asking how to achieve this in CSS.

Zihan
- 668
- 8
- 19
1
vote
0 answers
Flutter CustomPainter Resize
So I've been trying to resize a CustomPainter and keep the look as if it was pixel art, but I haven't been able to make it.
// for example, I have this widget, that sets an specific size to a CustomPainter,
// in this case width and height are 16
…

Gustavo Guzman
- 136
- 5