Flutter UI of screen distorted when kill app and load again many times. I am using screen_utills class for get screen size

Question

i used screen_utill class for my project for flexible UI for all screens.but I am facing issue with that actully when i kill my app and again try to run app some times screen get distorted most of the time it seems like it doesn't load or set ratio for device.i ma struggling with this isuue

@override

Widget build(BuildContext context) {

ScreenUtil.init();// this is where i initialized.
return MultiBlocProvider(
  providers: [
    BlocProvider(
      create: (context) => abcBloc,
    ),
    BlocProvider(
      create: (context) => defBloc,
    ),
  

  ],
  child: GestureDetector(
    onTap: () {
      FocusScopeNode focusScopeNode = FocusScope.of(context);
   
    },
    child: FutureBuilder(
      future: _initializeSharedPrefs(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
       
          return  MaterialApp(
            debugShowCheckedModeBanner: false,
         
            theme: ThemeData(
            ..........
                  ),
            
            ),
            initialRoute:'login',
            routes: {
              'login': (context) => LoginScreen(),
            
            },
          );
        } else
     
      },
    ),
  ),
);

}

static const Size defaultSize = Size(375, 812); is already set in screen_utills class.

Answer 1

The second initialization way seem to give an issue. Try out the first initialization process provided in the documentation.

Wrap the MaterialApp widget in your main.dart file with ScreenUtilInit Widget.

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //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: Size(360, 690),
      minTextAdapt: true,
      splitScreenMode: true,
      builder: () =>
      MaterialApp(
        //... other code
        builder: (context, widget) {
          //add this line
          ScreenUtil.setContext(context);
          return MediaQuery(
            //Setting font does not change with system font size
            data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
            child: widget!,
          );
        },
        theme: ThemeData(
          textTheme: TextTheme(
            //To support the following, you need to use the first initialization method
            button: TextStyle(fontSize: 45. sp)
          ),
        ),
      ),
    );
  }
}