Stack Overflow
Stack Overflow

Questions tagged [flutter-canvas]

78 questions
31
votes
1 answer

Use Gradient with Paint object in Flutter Canvas

I am able to draw a semi circle using the following example: Flutter how to draw semicircle (half circle) However, the Paint object only seems to accept a Color (using Paint.color). I would like to add a RadialGradient or LinearGradient as the…
user2511882
  • 9,022
  • 10
  • 51
  • 59
20
votes
4 answers

Cutting a hole in a shape with flutter canvas

How do I "cut a hole" in a shape with flutter canvas? I have this rather complex set of shapes that is made to look like a real world object. This object has a hole in it shaped like a rounded rectangle. I would really like to subtract a RRect from…
Mathias Nielsen
  • 1,560
  • 1
  • 17
  • 31
15
votes
2 answers

Flutter directed graph. Can I use CustomPainter Class with custom widgets?

I want to build a directed graph like in the picture below with flutter. I dont know where to start. I searched at internet without success. Which algorihms do I need for this kind of graph? I tried to build this graph with custom painter class. I…
otto
  • 1,815
  • 7
  • 37
  • 63
12
votes
1 answer

How can I paint a Widget on a Canvas in Flutter?

Is there any way to paint a Widget at a given position on a Canvas? More specifically, I want to paint the child widgets of Marker's related to a FlutterMap on a separate Canvas in front of the actual FlutterMap widget. Here's an attempt at creating…
Magnus
  • 17,157
  • 19
  • 104
  • 189
11
votes
5 answers

How to erase/clip from Canvas CustomPaint?

I have already tried to use Canvas.clipPath along with GestureDetector to be like eraser on the canvas where i use the CustomPaint inside a Container with imageDecoration set, so i thought maybe there is another workaround this by using…
Mohammad Ersan
  • 12,304
  • 8
  • 54
  • 77
11
votes
1 answer

How to create a range slider with thumb as png image in flutter

How to create smiley range slider in flutter. Like below GIF image. Discrete with Custom Theme I try to change thumb shape. But I want to change thumb as image. // Copyright 2015 The Chromium Authors. All rights reserved. // Use of this source…
Dhaarani
  • 1,350
  • 1
  • 13
  • 23
8
votes
2 answers

Flutter - Reuse previously painted canvas in a CustomPainter

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…
Alex
  • 2,033
  • 1
  • 24
  • 40
6
votes
1 answer

Flutter - drawAtlas circular cutout

I'm trying to implement a circular cutout of an image and I am using drawAtlas for it. Here is my implementation so far: canvas.drawAtlas( image!, [ /* Identity transform */ RSTransform.fromComponents( rotation: 0.0, scale:…
Zero Live
  • 1,653
  • 5
  • 22
  • 44
6
votes
1 answer

Flutter canvas : how to avoid drawing outside image area

import 'dart:io'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_colorpicker/flutter_colorpicker.dart'; import 'dart:ui' as ui; class EditImage extends StatefulWidget { final String…
Niteesh
  • 2,742
  • 3
  • 12
  • 33
5
votes
2 answers

Create custom circular progress indicator in flutter with custom stroke cap

I need to create this percent indicator How can i achieve this? I've tried percent_indicator package in Flutter, but the main problem is that we have a limited amount of strokeCap options. I've also tried to do that with two arcs, but the problem…
Rockwell
  • 125
  • 1
  • 2
  • 6
4
votes
1 answer

Flutter web build with canvaskit: Failed to load Image.network()

I can't use the image URL from my domain but I can use the image URL from another domain like Facebook. The error is: It happened when putting the image URL from StackOverflow in the Image.network() too. For example, try using the picture…
Sittiphan Sittisak
  • 486
  • 4
  • 15
4
votes
2 answers

Efficient Canvas rendering in Flutter

I have been trying to develop a drawing app and all the example codes including the one's from The Boring Flutter Development Show don't translate well into real-world usage. The main problem being that CustomPaint's paint operation is too expensive…
Dhruva
  • 210
  • 1
  • 14
4
votes
2 answers

Masking two images in Flutter using a Custom Painter

Hello can anyone tell me why the background to this masking attempt is black. This must be close but I just can't kill the background. I've seen others reference that saveLayer(rect, paint) is the key here as that shoves the whole canvas rect in to…
Daniel Wilson
  • 18,838
  • 12
  • 85
  • 135
4
votes
1 answer

Custom Painter class not visible in Stack flutter

For some reason, the Stack widget does not show the Container with the CustomPaint. However if removed from Stack, it works fine. What am I missing here? class _DemoNavBar extends State { @override Widget build(BuildContext context)…
user2511882
  • 9,022
  • 10
  • 51
  • 59
3
votes
0 answers

Using an eraser over image in Flutter

I'm making a kind-of painting app that has you paint over a background image. There's a couple of tools like pen and then there's eraser. Ideally, we would just paint over the background color, but it's an image. We had the idea of removing the…
Benjamin
  • 5,783
  • 4
  • 25
  • 49
1
2 3 4 5 6