Wheel breaks when wrapped with FittedBox & SizedBox

[LenaWirtz]

Hi all,

i created a very simple flutter project (version 3.3.9, Picker version 3.0.2). when wrapping the Scaffold with a Fitted & Sized box as you see in the example code below, the touch points of the color wheel are broken (like in the video). Is there any way to fix this?

https://github.com/rydmike/flex_color_picker/assets/74858037/c9c5dc42-707c-47f2-8ca4-92edf7e3c18d

import 'package:flex_color_picker/flex_color_picker.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Color currentColor = Colors.blue;

  @override
  Widget build(BuildContext context) {
    return FittedBox(
      child: SizedBox(
        width: 1920,
        height: 1080,
        child: Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: Center(
            child: ColorPicker(
              pickersEnabled: const <ColorPickerType, bool>{
                ColorPickerType.wheel: true,
                ColorPickerType.primary: false,
                ColorPickerType.accent: false,
              },
              wheelDiameter: 500,
              wheelSquarePadding: 50,
              wheelWidth: 40,
              wheelSquareBorderRadius: 16,
              enableShadesSelection: false,
              color: currentColor,
              onColorChanged: (value) {
                setState(() {
                  currentColor = value;
                });
              },
            ),
          ),
        ),
      ),
    );
  }
}

[rydmike]

It seems to be working. The painted wheel seems to have a diameter of 500 in the video as specified and it works.

What do you expect it to do?

Please note that the wheel is fixed size painter, kind of like e.g. Switch, it does not expand/shrink to fit surrounding constraints. You can of course compute the max diameter of the the wheel that would fit into the area you have and give that as diameter, if you need it to respond to available space.

[rydmike]

Closed due to no response. If more info is presented we can open this again.

[Gieted]

Hi @rydmike,

What you mean by "it seems to be working"? On the video, it's shown that the hit-testing is off when wrapping the color picker with a FittedBox. The FittedBox is not like Transform.scale, it actually transforms the hit-testing position, so there shouldn't be a problem of pointer misalignment. The probable cause could be improper use of event.poisition, instead of event.localPosition.

[rydmike]

My apologies, I did not understand what was happening in video. I also did not understand that the provided code was an actual working sample, when it was not in proper code block it just looked like pseudo code, silly me. I now also edit the sample, I just added the correct markup to show it as proper code.

Now that I built the sample and tested it, I agree this is currently not supported and definitely an issue if you wrap it like this.

The hit testing probably needs some changes to be able to support this use case. I will investigate it more and see if it can be improved. This component might not be able to support this use case.