How to use this with ResponsiveFramework
CaptainDario opened this issue · comments
First of all, thanks for this great package it seems to be the most feature-rich onboarding solution for flutter!
However, I am having difficulties getting this package to work while using the Responsive Framework. Somehow the size of the focus widgets does not get calculated correctly (see video.)
I tried following #24 and added the globalOnboarding: true-parameter but this did not help.
Do you have an idea what could be a solution to this problem (except removing the responsive framework)?
2022-03-29.20-21-49_Trim_Trim.mp4
Could you share some minimal reproduction code. Normally the size of the overlay hole is recalculated every time a LayoutBuilder rebuilds.
I will try to come up with a minimal example. I think it's related to responsive framework and windows display scaling.
Okay, I made a small example that shows that the overlay is not matching the Container when using ResponsiveFramework.
I think I've found what's the issue. The package you mentioned is using some scaling which changes the size of the items. I think I have a solution to that, not heavily tested, but I can release a prerelease version for you to test it out. Just gonna add more docs. The trick would be to
- move onboarding under the ResponsiveWrapper.builder
- wrap with a builder to be able to access the inherited widget for ResponsiveWrapperData
- manually calculate scale for width and height
- pass that to the onboarding widget.
- by default those scale values will be 1.0
return MaterialApp(
home: ResponsiveWrapper.builder(
Builder(builder: (context) {
final ResponsiveWrapperData data = ResponsiveWrapper.of(context);
final scaleWidth = data.screenWidth / data.scaledWidth;
final scaleHeight = data.screenHeight / data.scaledHeight;
return Onboarding(
key: widget.onboardingKey,
steps: steps,
globalOnboarding: true,
debugBoundaries: true,
child: const Home(),
scaleWidth: scaleWidth,
scaleHeight: scaleHeight,
);
}),
maxWidth: 1200,
minWidth: 480,
defaultScale: true,
breakpoints: [
const ResponsiveBreakpoint.autoScale(800, name: TABLET),
],
),
initialRoute: "/",
);@CaptainDario any news?
@talamaska sorry, didn't really notice your reply! gonna check it out now.
@talamaska I tried your changes and it works great!
This is an awesome addition! As I am pretty sure that this is the only onboarding package which works with the responsive framework, I think you should add this to the README. I already read quite few bug reports about Onboarding/Showcase plugins not working with the responsive framework.
I also tried many different ones and this is the only one which now works!
Thanks for the feedback, I'll definitely add a point in the Readme about the usage with ResponsiveFramework.
Thank you for the quick help and update. I think this makes this package really standout!
@talamaska Hi Zlati, I'm Ray, author of the Responsive Framework here!
Thank you for helping test and integrate the Responsive Framework.
One thing the Responsive Framework does (correctly I believe), is override the inherited MediaQuery values to provide the scaled values instead of the device values. A lot of packages pull the device values with MediaQuery.fromWindow instead of MediaQuery.of(context) which results in incorrect values.
Here's what I'm doing inside Responsive Framework.
I want to make sure I'm not doing anything wrong. Your packages should be able to pull the scaleWidth and scaleHeight directly from MediaQuery with MediaQuery.of(context).size, instead of needing it to be passed manually.
scaleWidth: scaleWidth,
scaleHeight: scaleHeight,
Hi, @searchy2,
The thing here is that the widget that needs to access these values is in an Overlay. I'm almost sure it can be different context from the one given by the ResponsiveWrapper.builder. I'll double check what you are suggesting.
Ah, you're right! Overlays fetch from the root context.
There should be a way in Flutter to capture the root context and override it though. I don't know the technique unfortunately.