Flutter App UI bigger on real device than in simulator

Question

I have this flutter app which runs perfectly on the iOS and Android Simulator: app on iOS simulator

But when I am running the same exact app on my iPhone 12, everything (fontsize, textfields, etc...) appear bigger and I therefore get a render-overflow error. This upscaling happens on every screen in my app. app on real iPhone 12

I tried turning my mac completely off and on again. Flutter doctor is also completely fine.

[EDIT] This also happens with the complete default Flutter project. I don't understand why the scaling only happens on the real device and not in the simulator.

Here is the default project in the simulator:

Here is the default project on a real iPhone 12:

Answer 1

You have to calculate the size dynamic with the MediaQuery.of(context).size or use some kind of package , they do it for you dynamically.

import "package:flutter/material.dart";
import 'package:flutter_screenutil/flutter_screenutil.dart';


void main() async {
    // Add this line
      await ScreenUtil.ensureScreenSize();
      runApp(MyApp());
}


class MyApp extends StatelessWidget {
   const MyApp({Key? key}) : super(key: key);
   @override
   Widget build(BuildContext context) {

     // Add this Widget and call your root Widget here.
      return ScreenUtilInit(
         builder: (context , child) {
            return MaterialApp(
               debugShowCheckedModeBanner: false,
               title: 'First Method',
               home: Column(
                   children:<Wigdet>[
                      Container(
                         width: 50.w,
                        height:200.h
                      ),
                       Text("Ola".sp)
                ]
              ),
        );
      }
    );
  },
);

} }