'How do you use the new Flutter ScreenUtils with named Routes and Provider?

Right until version 5.1.0 (which were the ones we used) the package flutter_screenutil were using a simple concept of builder which asked a "Widget Function() Builder". Which worked well on how we did it.Like so:

    return ScreenUtilInit(
        designSize: const Size(360, 760),
        minTextAdapt: true,
        splitScreenMode: true,
        builder: () => MultiProvider(
            providers: [
              ...
            ],
            child:Consumer<SettingsProvider>(
            builder: (context, settingsProvider, child) {
              return MaterialApp(
                ...
                initialRoute: '/',
                routes: {
                  '/': (context) => devMode? Home(): DevHome()

However, new iterations of flutter_screenutil (now on 5.5) have been asking for a builder which is a"Widget function(child) Builder"

And they suggest this:

 //Set the fit size (Find your UI design, look at the dimensions of the device screen and fill it in,unit in dp)
    return ScreenUtilInit(
      designSize: const Size(360, 690),
      minTextAdapt: true,
      splitScreenMode: true,
      builder: (child) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'First Method',
          // You can use the library anywhere in the app even in theme
          theme: ThemeData(
            primarySwatch: Colors.blue,
            textTheme: Typography.englishLike2018.apply(fontSizeFactor: 1.sp),
          ),
          home: child,
        );
      },
      child: const HomePage(title: 'First Method'),
    );
  }

But they don't give instructions to make it work as intended, either on the documentation, examples, or how to use it on how to deal with both named routes or state management things like the provider, and when I tried this:

return ScreenUtilInit(
        designSize: const Size(360, 760),
        minTextAdapt: true,
        splitScreenMode: true,
        child: devMode? Home(): DevHome()
        builder: (child) => MultiProvider(
            providers: [
              ...
            ],
            child:Consumer<SettingsProvider>(
            builder: (context, settingsProvider, child) {
              return MaterialApp(
                ...
                initialRoute: '/',
                routes: {
                  '/': (context) => child!

It just makes a restart of the app every time I change orientation.

I am not sure what I am doing wrong and the documentation isn't making things easier to understand either. As it does not explain how to use this Builder and child, and the code does not make it clear for me how to use it either.

Can someone help me understand this conundrum? We are stuck in ancient version with some serious bugs which should be fixed, But we cant upgrade cause I cant make flutter_screenutil work as intended.

Thank you.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source