Create a menu on avatar click - flutter

I've been searching for quite a while now, and I don't know if I'm not searching the correct term, but I want to make a menu that displays over the current screen when you click on your avatar.
Like this one from Google:
Or this one from Facebook:
I tried using showMenu(), but this one requires that I use PopUpMenuItem() which is, but it does not allow customizing the whole menu. For what I understand, I have to draw a Material() widget or Stack() over the current screen, but I have no knowledge on that.

What you need is an OverlayEntry. They're tricky, and there are packages that help you manage overlays more easily. Please check these:
https://pub.dev/packages/modals
https://pub.dev/packages/flutter_portal

Related

How to implement a customized spinner to select time in flutter

I am currently trying to implement a time select Widget, it should look something like this:
Image_Link.
And it should work like shown in this video:
https://streamable.com/2y7s65.
I would like to have the design, shown in the picture combined with the wheel in the video to select a specific time.
But I am struggling with this for a while. I know there is a package: flutter_time_picker_spinner, but I count't find any way to customize the spinner in the way I need to (like in the picture: Image_Link )
I hope I gave enough information, if something is still unclear please tell me.
My approach would be download https://github.com/icemanbsi/flutter_time_picker_spinner/blob/master/lib/flutter_time_picker_spinner.dart and style it as you like.
You can use ListWheelScrollView to get the result you are looking for. Style each individual button the way you want and add them as children. From there you can style the ListWheelScrollView to get your desired look.

how to display drop-down in iphone, like in this image

hi
I want to display drop down menu like the one you see in this image http://callingcard.marigoholdings.com/Screenshots.html#1
(below From and To)
How can i create that? Any good tutorial.
Best regards
You will have to use UIPicker for this purpose.This is used as a dropdown whereever needed in iPhone.
Please refer the link below
How to create drop down list box for an iphone app
Thanks
It looks like that app is using a combination of a UIWebView and an html select tag. To do something similar would involve a solid bit of html and javascript hackery, but in essence would be:
Create a UIWebView and inject the appropriate HTML into it to make the dropdown.
User uses dropdown as if it was in mobile safari and picks something.
When you need it, you use a javascript call with stringByEvaluatingJavaScriptFromString: to grab the value of the dropdown by id and pass it back to your code.
There are a few gotchas here, mainly with constructing the dropdown and the webview such that it's big enough to show the expanded dropdown but transparent to see under it when the dropdown is not expanded, it's not scrollable, and that sort of thing.
I wonder if a UIActionsheet might be better ... you could easy make a button to call the sheet. Adding multiple buttons to the sheet transforms it into a table that you can scroll.

How to disable hover effect to highlight menu items in GWT MenuBar?

I am making a vertical Menu using GWT MenuBar and selection of particular MenuItem shows content on the right, I am trying to make something similar to TabPanel, but with Tabs on left instead of being on top. Now, since I've got the Menu items and actions in place, I want to remove the effect of hovering over and changing color, and keep that menu item selected which was clicked last and whose content is loaded on the right.
I am open to any comments, if you have a better solution to implement this, using some other components(with-in) GWT, please drop in a comment with your suggestions, I'll really appreciate that.
Or if you can just tell me how can I disable this effect, of hovering and sticking to only that selection, That would be awesome too..
Thanks to everyone, taking time to read this and suggesting a solution.
It's all defined in the CSS of your GWT's theme (probably the default one), so it's a matter of overriding those styles - make sure it's not the other way around :) Inspect the code with a tool like Firebug to see what's exactly being set and change that.

GWT Collapsible Panel found in common google services?

The GWT Incubator contains this widget, but it doesn't provide the clean look and feel I am looking for. The Same page does show precisely the widget I would like to use:
A thin resize bar with the small middle arrow icon which is clicked to hide/show a docked panel on the side of the page.
The widget appears on many google services pages, which makes me suspect that it may be a common widget:
Google Reader
Slightly modified (animated) version on Maps
Does anyone where to find or know how to build this widget in GWT.
How about using a VerticalSpliPanel and overriding the OnClick event? On click you can hide your navigation panel.
I don't think Maps and Google Reader are build using GWT. I know Wave is, and it doesn't use the collapsible panel you're looking for... My guess is that this specific widget is not available in GWT but you may be able to find a suitable replacement. Let me know if you do.

GWT text inputs with spell-check like behavior?

Does anyone know of a GWT widget that works like a spelling suggestor?
Ideally it would be similar to this: http://www.polishmywriting.com/
I need a click-triggered popup on user generated text so that I can suggest replacements (I am not building a spell-checker, but something similar). I also really like the way the polishmywriting menu is set up (when you click on an underlined word).
Is there a widget that would allow me to make something similar?
Basically I'm trying to clone the little popups used by spellchecking in Gmail and polishmywriting.
If not, what would be my first step to make it?
Thanks for your time and answers,
DTrejo
Have you had any luck yet? I know it's been quite a lot of time, but found this just now.
It is a very specific widget, so maybe you won't be able to find exactly what you are looking for. In that case, making one from scratch might prove as a challenge.
The first thing you will notice is that a regular gwt TextArea won't do the job of holding the text. You will need something more flexible to dynamically put clickable labels in the text itself.
TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control, released as Open Source.
http://en.wikipedia.org/wiki/TinyMCE
There is also a gwt wrapper available, so you might find that useful:
http://code.google.com/p/tinymce-gwt/
If you check the polishmywriting editor after the spell checking markup is displayed, you will notice it is not a TextArea. The text is a series of paragraphs and the labeled parts are span elements. This are the elements you can easily access with gwt and put some click handlers there to open the popup.
And for the popups, it shouldn't be difficult. Use a standard gwt PopupPanel. The popup panel can be displayed in a relative position to other elements displayed on the page:
popup.showRelativeTo(otherElement);
If you did find something useful in the mean time, feel free to share.