Question 411002 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter_ScreenUtil is not working when I go from web to mobile

I am trying to use the package Flutter_ScreenUtil 5.9.3. I develop on a Windows 11 machine and I have been debugging on Chrome. When I go to mobile, the size of everything seems to be very wrong.

In the main.dart I have this code:

@override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: const Size(360, 690),
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        home: const LoginScreen(),
                    navigatorKey: rootNavigatorKey,
      
      ),
    );
  }

At first, I only made changes in the different screens where I had different font sizes like this:

 style: TextStyle(
                  fontSize: 12.sp,
                  fontWeight: FontWeight.bold,
                ),

However, I was looking up some information on the internet and thought it said to wrap all of the screen build widgets in ScreenUtilInit. I have done this but there is no change like here:

@override
  Widget build(BuildContext context) {

    return ScreenUtilInit(
      child: Scaffold(

What am I doing wrong? I need to get the screens to look the same on mobile and web.
Thanks

Tags:

2

Answers


  1. 0 
    void main() async {
  await ScreenUtil.ensureScreenSize();
  runApp(MyApp());
}

    Have you added await SreenUtil.ensureScreenSize(); ??

    Login or Signup to reply.
  2. 0

    I strongly recommend you not use flutter_screenutil.

    You don’t want pixel perfect. You want responsive. And Flutter has many amazing tools to make responsive layouts, like LayoutBuilder for breakpoints, and Flex (Row/Column) widgets for adaptive sizing. Figma and other mockup tools are generally very poor at representing this… I wish there was a great tool to recommend. Oh, and familiarize yourself with less-referenced layout widgets like FittedBox, FractionallySizedBox, AspectRatio, Spacer, Wrap, and learn when to use double.infinity for a width or height rather than querying with MediaQuery for the useless screen size. This is a great writeup from the author of Boxy (the universal layout fixer): Check out this summary by Pixeltoast on the fundamentals of Flutter layout including MediaQuery: https://notes.tst.sh/flutter/media-query/.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search