0

I want to know if this is even possible in Flutter Gridview and CustomPaint Items Desired Outcome

I tried it with a CustomPainter Class and different Custom Path Widgets In Flutter coded

import 'package:flutter/material.dart';

class PaintCharT extends CustomPainter {
  final double height;
  final double width;

  PaintCharT(this.height, this.width);

  @override
  void paint(Canvas canvas, Size size) {
    final Paint paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.fill;

    // Define the path for the letter "T"
    final Path path = Path()
      ..moveTo(0, 0)
      ..lineTo(width, 0)
      ..lineTo(width, width/3)
      ..lineTo((width/3)*2, width/3)
      ..lineTo((width/3)*2, width)
      ..lineTo((width/3), width)
      ..lineTo((width/3), width/3)
      ..lineTo(0, width/3)
      ..lineTo(0, 0);
    path.close();

    // Draw the letter "T"
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

And my DragTarget

DragTarget(
                                  onAccept: (data){
                                    setState(() {
                                      container81 = colorActive;
                                    });
                                  },
                                  onWillAccept: (data) {
                                    return data is DragPathState;
                                  },
                                  builder: (BuildContext context, List<Object?> candidateData, List<dynamic> rejectedData) {
                                    // Check if a draggable with 'T' data is being dragged over
                                    if (candidateData.isNotEmpty) {
                                      containerActive81 = true;
                                    } else {
                                      containerActive81 = false;
                                    }

                                    return Container(
                                      color: container81,
                                    );
                                  },
                                ),

But I couldn't understand the documentation to apply it to my case. I don't necessarily need this problem solved, I would rather know how I could achieve this myself with a little guidance (if even possible)

  • Is it possible? Yes. You are working with shapes that are composed of squares of the same size (simple hit testing). You might be able to use a `List> cells` to represent your grid in memory; each grid indicates that it is unoccupied when `false`, and `true` when occupied. Then, whenever you place a shape, you first test if the shape fits (each corresponding cell of the shape in the 2D array is `false`). – offworldwelcome Aug 24 '23 at 18:16
  • @offworldwelcome thanks for the quick answer, so i keep 81 dragtarget widgets but create 2 lists like this: List> cells = List.generate(9, (_) => List.filled(9, false)) and List> cellsColor = List.generate(9, (_) => List.filled(9, Colors.white)) for Color and Value of my cells and when i drag the shape over e.g. 4 dragtargets i test if it fits. how do i check if the shape fits in all 4 cells and e.g. not just in 3 cells and it then denies the drag onto it? – atomkern Aug 24 '23 at 19:01
  • Depending on how you have defined your shapes... since all the shapes are made up of squares the same size as a tile, you can select one square of your shape as a starting point, and then you must know if the next square of the shape is at the top, bottom, left or right. So you would hit test the first block, find the offset in the array of that first block (i, j), and then you'd use the 2D `bool` array to test the subsequent blocks, if the next block is to the right right, you would do if (i, j) is false, and (i, j+1) is false, and repeat for the remaining blocks of your shape. – offworldwelcome Aug 25 '23 at 13:26

0 Answers0