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…
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{ …
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 { …
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 …