I am working on a flutter web project and I want to the following overlay effect over my image that whenever the cursor hovers over the image, a few buttons should show up, and the opacity of the image gets reduced (or blurred out) while hovering.
I have tried InkWell and GestureDectector but nothing seems to work.
This is basically what I am trying to achieve : Preview.
Try using hovering package to achieve the hovering effect on flutter_web.
First, import the package:
import 'package:hovering/hovering.dart';
Add a GlobalKey within your StatelessWidget:
final _key = GlobalKey<ScaffoldState>();
And then, use the HoverWidget:
HoverWidget(
hoverChild: Container(
height: 200,
width: 200,
color: Colors.green,
child: Center(child: Text('Hover Me..')),
),
onHover: (event) {
_key.currentState.showSnackBar(SnackBar(
content: Text('Yaay! I am Hovered'),
));
},
child: Container(
height: 200,
width: 200,
color: Colors.red,
child: Center(child: Text('Hover Me..')),
),
)
Check the example use case here
Hi Raj this is pretty simple
You just need to use Listener Widget which detects onPointerHover and update you app's state
Here is the api link follow it
Listener in Flutter
If any difficulties comment down below
Okay, over time I have tried many ways and would like to share my insight in case somebody else is looking for the same solution too.
So, the basic way to achieve this is to use the Hovering package.
Another way would be to use MouseRegion.
You can use the onEnter and onExit property of MouseRegion to detect when did the cursor entered and left the region/container you are trying to add a hove effect to.
You can use that to switch between your different app states.
Or it has onHover property as well, that basically tells that if the cursor is currently hovering that region or not you can use that too.
Note: I tried the Listener widget as well, but either I didn't understood it well, or it was too complicated to work with. Anyways, I couldn't achieve what I wanted.
Related
I am using a carousal slider to display multiple images like in a social media feed.
I implemented zoom using photo view, which works fine but it also zooms the image on double tap which I don't want.
Is there a way to overwrite the double tap of Photo view, to implement a custom functionality?
https://pub.dev/packages/photo_view
Also, tried alternatives like interactive viewer and gesture detector to zoom images but they didn't work with carousel slider.
There are other options as well. But I will answer this with your exact regard, i.e. the photo_view package.
There's no direct option/param to stop the double tap action. Instead, you can tweak a little internal parameter (either by creating a fork or editing the source locally if you prefer).
As per this comment:
return PhotoViewGestureDetector(
child: child,
onDoubleTap: nextScaleState, ///Remove or comment this line.
onScaleStart: onScaleStart,
onScaleUpdate: onScaleUpdate,
onScaleEnd: onScaleEnd,
hitDetector: this,
onTapUp: widget.onTapUp == null ? null : onTapUp,
onTapDown: widget.onTapDown == null ? null : onTapDown,
);
Update this in the photo_view_core.dart file.
Are there any code examples out there that show how to use an Overlay independant of a Navigator widget?
In our app, we do not want the TitleBar/AppBar to be part of the main nav-stack, it should stay at the top of the window, and be fixed position.
The TitleBar needs acccess to an Overlay though, as it has various tool-tips and pop-up panels.
The only I know to do this is double-wrap Navigator, or MaterialApp, both of which smell bad. I would like to use Overlay directly, but lack any guidance on how to implement it.
Looking a the source of Overlay does not provide much help, and I'd prefer not to delve too deeply into MaterialApp's thousands of lines of src code.
[EDIT] Looking at the Navigator source a bit, it seems Overlay is directly coupled to PageRoutes, which is a real shame :'( It would be nice if there was a simple Overlay(child: ) we could just use.
There is declarative package for using overlays called flutter_portal which lets you show overlays as part of the widget tree.
PortalEntry(
visible: true,
portal: Material(
elevation: 8,
child: IntrinsicWidth(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
ListTile(title: Text('option 1')),
ListTile(title: Text('option 2')),
],
),
),
),
child: RaisedButton(...),
)
With this setup, you can toggle the overlay on and off with a single boolean ('visible') and you no longer have to make calls to Overlay.insert and Overlay.remove.
I want to launch a simple walk-through for our app. The user would log in for the first time (or select the 'tutorial' option in settings), and it would walk you through how to use the app.
To clarify, the app would launch a dialog/alertdialog and the background would go grey or become greyed out highlighting specific areas/buttons of the app to talk them through it. The dialog box would have a child of Text explaining how to use it.
After the user has clicked through the steps the tutorial would end but could be reactivated in settings.
Any help would be appreciated.
Thanks
There is a plugin called showcaseview and does pretty much what you want. You can get it here. For using it you need to wrap the page you want to show in a ShowCaseWidget
ShowCaseWidget(
builder: Builder(
builder : (context) () => Somewidget()
),
),
then for every part of the page you want to show a guide for it, wrap it in a ShowCase
Showcase(
key: _one,
title: 'Menu',
description: 'Click here to see menu options',
child: Icon(
Icons.menu,
color: Colors.black45,
),
),
Putting the finishing touches on my first Flutter mobile app.
Another important ToDo: My Floating Action Button appears in the Top App Bar for every page, but i would like its status to change (enabled / disabled) depending on the current page. Is this possible? if so, any tutorials, resources, reference material and / or code examples fit for a novice, would be much appreciated.
Thanks!
Cool, you can use Visibility:
floatingActionButton: Visibility(
child: FloatingActionButton(...),
visible: false, // set it to false
)
Alternatively, you could use NotificationListener (more elegante but sophisticated).
Please check this example from another publication
Edit: maybe controlling it directly in onPressed.
According to official docs:
"If the onPressed callback is null, then the button will be disabled and by default will resemble a flat button in the disabledColor."
FloatingActionButton(
onPressed: shouldButtonBeDisabled() ? null : () => whatToDoOnPressed,
child: Text('blablabla')
);
I want to implement user messages window in the home page of my application.
I want to notify the application users of events and activities taking place at the university on a specific date.
I add an image where the window I want to make is marked in purple :)
There is Widget in Flutter that supports it? or how I can implement it?
thanks!
There are a couple routes you could go here you could implement Firebase FCM messaging but I think this is overkill for what you are trying to do you probably want to go with flutter local notification I will post a link below. As for outlining it in purple this is very easy.
Container(
height: 200,
width: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
border: Border.all(color: Colors.purple, width: 5.0),
),
),
If you are not using a container something similar can be done with most widgets let me know if I can help you furtherFlutter Local Notifications