CODEWITHSUNDEEP
androidflutter
Prudhvi
Prudhvi

Reputation: 116

Automatic rebuild when app screen size changes in flutter

I am using Screenutil package to make my flutter app responsive and it works but I have a problem. Whenever I use splitscreen, the app doesn't rebuild its widgets and they overflow. If I restart the app, it resizes perfectly according to the split screen size. Now, similarly when I exit split screen to full screen mode, the app widgets stay the same size as they were in split screen, until I restart the app. So I want the app to automatically rebuild itself whenever there is a change in screen size. How do I implement this?

Screenutil code:

class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
SystemChrome.setPreferredOrientations([
  DeviceOrientation.portraitUp,
]);
return ScreenUtilInit(
  designSize: const Size(392.72727272727275, 807.2727272727273),
  minTextAdapt: true,
  builder: () => MaterialApp(
    builder: ((context, widget) {
      ScreenUtil.setContext(context);
      return MediaQuery(
        data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
        child: widget!,
      );
    }),
    theme: ThemeData(
      textTheme: TextTheme(
        button: TextStyle(fontSize: 45.sp),
      ),
      colorScheme:
          ColorScheme.fromSwatch().copyWith(secondary: Colors.white),
    ),
    debugShowCheckedModeBanner: false,
    home: const Wrapper(),
  ),
);
}
}

Normal screen size:

enter image description here

Split Screen Error:

enter image description here

Works fine when app restarted in Split Screen:

enter image description here

Upvotes: 0

Views: 4634

Answers (2)

Felipe Caroca
Felipe Caroca

Reputation: 36

you can try removing the const keyword from the wrapper widget so it will rebuild

Upvotes: 2

gorkhali1234
gorkhali1234

Reputation: 312

Well, when it comes to adapting to screen size usually a percentage of dimension is used. In the case of flutter, we can find available width and height using MediaQuery.

Widget build(BuildContext context) {
//Inside Build function since we need context.
  // This is device height 
  final deviceHeight = MediaQuery.of(context).size.height;
  // Device width
  final deviceWidth =   MediaQuery.of(context).size.width;
  // Subtract paddings to calculate available dimensions
  final avaliableHeight = deviceHeight - AppBar().preferredSize.height - MediaQuery.of(context).padding.top - MediaQuery.of(context).padding.bottom;
  final availableWiddth = deviceWidth - MediaQuery.of(context).padding.right -MediaQuery.of(context).padding.left;
......
}

Now you can multiply available Height and Width with screen percentage to adapt. For instance,

Size(availableHeight * .4 ,availableWidth * .5)

Here we're using 4 part of height and 5 of width.

Upvotes: 0

Related Questions