MediaQuery inconsistent on different phones

Question

i have a scaffold that keeps giving me overflow errors when i test on different phones. i only used mediaquery.of(context).size.height once in the code and i get overflow error 0f 40.392 and it makes no sense since i never used decimals when declaring heights

    Scaffold(
      backgroundColor: Colors.black,
      appBar: PreferredSize(
        preferredSize: const Size.fromHeight(50),
        child: AppBar(
          elevation: 0,
          iconTheme: const IconThemeData(color: Colors.blue),
          backgroundColor: mode.background1,
          actions: actionList(),
        ),
      ),
      body: Container(
        height: MediaQuery.of(context).size.height - 104,
        child: Column(
          children: [
            Container(
                //overflow error exists right here
                height: MediaQuery.of(context).size.height - 107,
                child: getWid(_selectedindex)),
            Container(
              height: 3,
              child: Row(
                children: [
                  mydivider(0),
                  mydivider(1),
                  mydivider(2),
                  mydivider(3),
                ],
              ),
            )
          ],
        ),
      ),
      bottomNavigationBar: Theme(
        data: Theme.of(context).copyWith(
            brightness: Brightness.dark,
            canvasColor: mode.canvasColor,
            primaryColor: const Color.fromARGB(255, 45, 124, 243),
            textTheme: Theme.of(context)
                .textTheme
                .copyWith(bodySmall: const TextStyle(color: Colors.grey))),
        child: SizedBox(
          height: 54,
          child: BottomNavigationBar(
              onTap: (int index) {
                setState(() {
                  _selectedindex = index;
                });
              },
              currentIndex: _selectedindex,
              type: BottomNavigationBarType.fixed,
              selectedItemColor: Colors.blue,
              unselectedItemColor: Colors.grey,
              items: const [
                BottomNavigationBarItem(
                  icon: Icon(Icons.list),
                  label: 'List',
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.local_grocery_store),
                  label: 'Checkout',
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.history),
                  label: 'Transactions',
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.settings_outlined),
                  label: 'Settings',
                )
              ]),
        ),
      ),
    )

its clear i gave all widgets height. i think the only logical explanation is an error from building the widgets on this particular phone but i don't know how to go about it. plus i've tested many applications on said phone before. I appreciate your help

Answer 1

Instead of using MediaQuery use LayoutBuilder for building UI.

return Scaffold(
  body: LayoutBuilder(
    builder: (context, constraints) {
      final width = constraints.maxWidth;

      return Text("");
    },
  ),
);

More about LayoutBuilder and adaptive-responsive.