How to avoid resizing on the split screen mode in Flutter?

Question

In attempts to develop a responsive app I faced the issue when the app resizes its components in split screen mode. As I checked, it was caused with the context and window are also changing their values while switching to split screen mode.

How it looks (My app is below), header is contorted by resizing when I used MediaQuery.of(context).height :

In full screen mode it is okay:

Is there any way to fix it.

My code:

main.dart:

import 'dart:ui';

import 'package:flutter/material.dart';
import 'screens/home.dart';
import 'package:flutter/services.dart';
import './sizing/Sizing.dart';

class Orient extends StatelessWidget{
    @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
       statusBarColor: Color.fromRGBO(9, 168, 48, 1), //or set color with: Color(0xFF0000FF)
    ));
    // TODO: implement build
    return MaterialApp(
        title: 'Orient tm',
        home: SafeArea(child: Home(dimensions: Sizing(),)),
    );
  } 
}

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

P.S I tried to get value of window size in static mode, not using a context. It works partially when the app is the first primary in the split screen mode but not when it is displayed as the second app ( see the first image ).

home.dart:

import 'dart:ui';

import 'package:flutter/material.dart';
import '../sizing/Sizing.dart';

class Home extends StatelessWidget{
  final Sizing dimensions;
  Home({this.dimensions});

  List<Widget> _nav() =>  <Widget>[
      Expanded(
        flex: 2,
        child: Icon(Icons.menu),
      ),
       Expanded(
         flex: 8,
         child: Padding(
            padding: EdgeInsets.symmetric(vertical: dimensions.height*0.01), 
            // child: Container(child: Image.asset('assets/images/orient1.png'),),
           )
      ),
      Expanded(
        flex: 2,
        child: Icon(Icons.search),
      ),
  ]; 


  Container _header(context) => 
      Container(
          child: Center( 
            child: Row(
              children: _nav(),
            )
          ),
          decoration: BoxDecoration(
            color: Color.fromRGBO(9, 168, 48, 1),
            borderRadius: BorderRadius.vertical(
                bottom: Radius.elliptical(
                    dimensions.width, dimensions.width*(7/75))),
          ),
  );

    @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return (
      Scaffold(
        extendBodyBehindAppBar: true,
         appBar: PreferredSize(
           preferredSize: Size.fromHeight(dimensions.height*0.07),
           child: _header(context),
         ),
         body: Container(
           decoration: BoxDecoration(
             color: Colors.white
           ),
         ),
      )
    );
  }
}

Sizing.dart:

import 'dart:ui';

import 'package:flutter/material.dart';

var size = MediaQueryData.fromWindow(window).size;

class Sizing{

    final double height;
    final double width;

    Sizing(): height = size.height, width = size.width;

}

Solution

The solution came to me accidentaly, I dont't know why but it works. I replaced ScreenUtil().setHeight with ScreenUtil().setWidth for HEIGHT, that is really weird but it works perfectly.

Comments

[Csaba Toth]

But how do you know when to do that?