Not Giving Any Size(width or Hight) When Android Released App Until First Screen Refresh

[Sameera-Perera]

Min APK - 16 and 21(i tried both)
In debug mode its works perfectly. But after the app is released to android, it won't work on the first screen until refresh. I tried even with fresh flutter app result is the same.

** in my example second container MediaQuery.of(context).size.height work perfectly in first screen.

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Sizer(
      builder: (context, orientation, deviceType) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: const HomeScreen(),
        );
      },
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              height: 10.h,
              width: 10.w,
              color: Colors.grey,
            ),
            Container(
              height: MediaQuery.of(context).size.height/10,
              width: MediaQuery.of(context).size.width/10,
              color: Colors.amber,
            )
          ],
        ),
      ),
    );
  }
}

[samerjallad]

I faced the same issue recently with my App, in debugging it is working properly but after release I need to do refresh to the app, sometimes optimizing my phone then it might work, yesterday I removed all the the .h & .w from the main screen & replace them with int Numbers & the app was working in a good way except the fonts since i was was using .sp for the font size... also the strange thing is the same is affecting the main screen only, other screens are working in a good way.
this is what happened:

and this is the original screen.

[samerjallad]

i was doing another try for the package because I really like using it... so I remembered during coding if you add a const modifier to the container, font, sizedBox...etc.... it will give an error.. so what I did in the main page I removed const modifier from the main.dart which will open the main screen & now it is working as it should be... i will keep testing it to make sure that it is OK.... my old code was
return Sizer( builder: (context, orientation, deviceType) { return const MaterialApp( home: MainScreenPage(), ); }, );
and my new code is:
return Sizer( builder: (context, orientation, deviceType) { return MaterialApp( home: MainScreenPage(), ); }, );

[Sameera-Perera]

Thank you samerjallad for your support. I think I should try it.
I also found a solution. I added a splash screen for 1 second. I worked too.

[kaustuv-praz]

Use responsive_sizer package.
This package is not maintained any more.
responsive_sizer package is a branch of this one with active development.
Issue is solved there.
https://pub.dev/packages/responsive_sizer