Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Integration with device_preview to correctly update MediaQueryData #578

Open
paulocagol opened this issue Jul 13, 2024 · 3 comments
Open

Comments

@paulocagol
Copy link

Issue Description

When using flutter_screenutil with device_preview, the MediaQueryData may not be updated correctly, causing widgets to use the physical device's dimensions instead of the preview dimensions. This can be resolved by configuring ScreenUtil correctly.

Solution

Ensure ScreenUtil.configure is used to update the MediaQueryData within the ScreenUtilInit builder. Here's an example:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: WidgetsFlutterBinding.ensureInitialized());

  await App.onInit();
  await App.session.close();
  App.session.fetch().then((value) => FlutterNativeSplash.remove());
  
  runApp(
    DevicePreview(
      enabled: App.device.isWeb || App.device.isIPad,
      builder: (context) {
        return ScreenUtilInit(
          designSize: const Size(360, 690),
          minTextAdapt: true,
          splitScreenMode: true,
          useInheritedMediaQuery: true,
          builder: (context, child) {
            ScreenUtil.configure(
              data: MediaQuery.of(context),
            );
            return const EzStore();
          },
        );
      },
    ),
  );
}

class EzStore extends StatelessWidget {
  const EzStore({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      builder: (context, child) {
        return DevicePreview.appBuilder(context, child!);
      },
      title: 'EZ Store',
      routerConfig: appRouter,
      debugShowCheckedModeBanner: false,
      theme: AppMaterialTheme(createTextTheme(context, "Montserrat", "Montserrat Alternates")).light(),
      darkTheme: AppMaterialTheme(createTextTheme(context, "Montserrat", "Montserrat Alternates")).dark(),
    );
  }
}

Additional Information

This ensures the MediaQueryData from device_preview is used correctly by ScreenUtil.

References

flutter doctor

[✓] Flutter (Channel stable, 3.22.2, on macOS 14.5 23F79 darwin-arm64, locale pt-BR)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2023.2)
[✓] IntelliJ IDEA Ultimate Edition (version 2024.1)
[✓] VS Code (version 1.91.0)
[✓] Connected device (5 available)
[✓] Network resources
flutter_screenutil: ^5.9.3
device_preview: ^1.2.0

I hope it helps

@alaincruz06
Copy link

alaincruz06 commented Nov 19, 2024

Thanks @paulocagol, although your code snippet helped me, I still have to do a hot-restart so the changes update (correctly on every preview-ed device). But it's still better than before.

@ellie-me
Copy link

Thank you for this code snippet, it saved my life.

@MahmoudElgaml
Copy link

what for the font size (sp) its not working with device preview ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants