I would like to create a switch control

[bq-wrongway]

Hi all,

I was playing around these days with fyne, and i did not found Switch anywhere, so i am planing to work on this control.
I think most of the work is flashed out with the checkbox control, i would just need to do the rendering differently.

Would this be good addition to fyne, or is there a reason that fyne does not have this ?
I would like to do either switch like in a photo i linked, or square one, (perhaps option for both)

looking that this will also come soon it would be perfect place to put it in place.

If you do think this is good idea, what things should i pay attention to ?

[andydotxyz]

The rounded rectangle is in already so you can use it from the develop branch.
However as the switch is identical in behaviour to check widget I'm not sure what it would add to the main package.
That said I am sure that the https://github.com/fyne-io/fyne-x repo would be a great place for such a contribution.

[Jacalz]

I personally think that there definitely is a place for it. Right now I am using either two radio buttons or a select with two items and neither seems like a perfect fit. As for reasons to it not being included, I am not aware of anything specific.

It is likely best to follow https://m2.material.io/components/switches for design and usage. It sure about how square ones would fit in.

It might make sense to first include it into https://github.com/fyne-io/fyne-x first and then bring it into regular fyne when it stabilises.

[bq-wrongway]

Hey, thanks for your advice, I will try to tackle this during this/next week.
Few questions, do you animation is needed for the switching,or not? I usually see switches with no animation,or sometimes some ripple effect
Should it have label for text? Usually this is very rare but maybe it makes sense.

On thay page there are several different styles of switcher, i think for fyne something like this looks best (img attachment).
Or this but with also "border"

[junmaqiang]

year this is good idea

[Jacalz]

I personally thinks no border looks best. If you don't want to do an animation, it might save some time off the implementation. It can always be added later. As you say, text does not feel like a common inclusions so I would ignore that for now.

[bq-wrongway]

Screencast from 01-19-2023 06:27:19 PM.webm

Hi all,
just adding a screenshot and video, the Switcher is just being in rough phase now, but i will try improve it for the weekend.
I have 2 challenges at the moment, for some reason i cant manage to perfectly allign the circle in the middle, and i have question regarding with update renderer method, but i will try to make more improvements before i ask this (im also quite tired now and my brain does not work).

I will definitly need support from you on some topic, and i hope we will make this as good as it needs to be.

ps > i would need to know what would be best combination of colors for (switched, disabled and not switched) also i made rounded rectangle sizes as following :
rec width = circlewidth * 2 * 1.1
rec height = circleheight *1.1
( this is just for now, though i think it looks okaish)

[Jacalz]

Well done. It might be best to just open a PR once you feel satisfied and we can iterate on it there. Having the code accessible and easily being able to add review comments makes it easier to suggest improvements :)

[bq-wrongway]

Hi,
just a question, (or more a way to get a clarification on some internal stuff.

i cloned the develop branch of the fyne, and there i basically copied the check.go control, and last few days i was playing with it.
So now i am somewhat satisfied with how it looks, and i managed to solve some issue with position of square/circle sizes.

So my plan was to take this and add it to the fyne-x controlls, for further testing & additions.

What is for me issue is that, for this to work, i cant use internal widget packet (which i assume is intended) that is used by the check control.
So with this i dont have access to the BaseRenderer, and i again assume i would have to use WidgetRenderer and BaseWidget like it was explained here https://developer.fyne.io/extend/custom-widget .

But then i saw something c.propertyLock.RLock this is used in the check controll, and i am not sure what this does (i assume its used to prevent race conditions when redrawing widgets)

So what would be the most correct/easy way to do this ?

Since Check widget does 90% of what i need, is it possible to extend Check widget and then just rewrite the render method, or i need to extend fyne.BaseWidget and then move on from there ?

Which existing widget would be good example of this ?

[andydotxyz]

You can extend Check and return a different renderer from CreateRenderer.

There is not an example of this because our API is based on behaviour / user outcomes. Because Switch is an identical replacement for Check that has no additional behaviour we have not added one before. Typically extended widgets provide more functionality to an existing rendering / state...