hasan-hm1 / circular_menu

A simple animated circular menu for Flutter, Adjustable radius, colors, alignment, animation curve and animation duration.
MIT License
99 stars 52 forks source link

Need an option to add my own custom widget with my own icon image #18

Closed SaabirMohamed closed 1 month ago

SaabirMohamed commented 2 years ago

Hi just a question for my particular use case,

I want to add my own widget to the CircularMenuItem list [ ] , which only accepts type "CircularMenuItem"

I want to draw my own widget there ... My widget will not contain an icon but a customised container with a small png image.asset circular etc...then i just wana pass my images in. currently the CircularMenuItem class just accepts constructs that use icons essentially. which is fine , however can it be overridden ?

I tried modifying your list's type like this List<CircularMenuItem || Widget> ... so I could pass your class or pass any widget of my own

still does not seem to work.

also tried copying the CircularMenuItem.dart to my local lib and using the import "...." hide CircularMenuItem; on your class and import "myfile.dart" show CircularMenuItem; and just overriding the build method in my class ...but dart still complains that the class exists in both places ... I really thought that will work as thats the purpose of show and hide right?

sorry for the long story ...

is there a way I can achieve this ... I love the menu animation and how slick it looks and its perfect for my project...just can't get around this part of customising the list to show my own widgets when the menu opens.

will it be possible to change the lib to accept a custom widget. ?

any help will be appreciated.

Thanks and regards.

update: I managed to get this working ... like this for now (it's hacky) added a new String field String? IconImagePath to circular_menu_item.dart.

then I call the class like this CircularMenuItem( onTap: (){}, iconImagePath: "assets/images/whatever.png" )

so when the @ ternary check in the ClipOval() I just commented out icon code and used an image asset placeholder instead. maybe the code can be updated to check if the user wants to pass his own image...then check if its passed and either use icon way or custom image way. (like in a new version)

code snip child: ClipOval( child: Material( color: color ?? Theme.of(context).primaryColor, child: InkWell( child: Padding( padding: EdgeInsets.all(padding), child: animatedIcon == null ? Image.asset( iconImagePath ?? "assets/images/placeholder.png", fit: BoxFit.contain, width: 50, height: 50, ) // ? Icon( // icon, // size: iconSize, // color: iconColor ?? Colors.white, // ) : animatedIcon, ), end code snip

github-actions[bot] commented 1 month ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

github-actions[bot] commented 1 month ago

This issue has been automatically closed because it has not had any recent activity.