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

MediaQuery inconsistent on different phones – Flutter

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

Tags:

3

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    You may need to wrap your body in SafeArea widget. That’s the first issue that comes to mind if your layout works on some phones and does not work on other models.

    Login or Signup to reply.
  3. 0

    One very important thing to mention: different phones may have 1.text scaling and 2.display scaling. For example people with bad vision may use the largest text and that may cause an issue in your case.enter image description here

    You can use double textScale = MediaQuery.of(context).textScaleFactor;

    And depending on that change your styles. Or you can ignore scaling and all users will see the same.

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

Back To Top
Search