Flutter Mobile App not showing TabBar in release apk

Question

I am facing a strange situation. My flutter app was working fine & no major changes were made in Tab bar. Somehow the Tab bar shows perfectly in Emulator and connected physical device. But the moment I build an APK and run on same physical device, Tab bar disappears.

I have create a Minimal Code from my main project mimicking the same behaviour

import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(Unige_App());
}

class Unige_App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MyApp();
  }
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  late TabController tabController = TabController(length: 3, vsync: this);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: DefaultTabController(
        length: 3,
        initialIndex: 0,
        child: Scaffold(
          backgroundColor: Colors.white,
          appBar: PreferredSize(
            preferredSize: Size.fromHeight(getScreenHeight() * .2),
            child: AppBar(
              backgroundColor: Colors.white,
              title: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Hero(
                      tag: 'logo',
                      child: Container(
                          height: kToolbarHeight,
                          margin: EdgeInsets.only(
                              top: 20.0, left: getScreenWidth() * .1),
                          child: Icon(
                            Icons.hail,
                            color: Colors.red,
                          )),
                    ),
                    InkWell(
                      onTap: () {},
                      child: Container(
                          margin: EdgeInsets.only(left: getScreenWidth() * .2),
                          child: const Icon(
                            Icons.logout,
                            color: Colors.red,
                          )),
                    ),
                  ]),
              bottom: TabBar(
                controller: tabController,
                indicatorSize: TabBarIndicatorSize.label,
                indicatorColor: Colors.red,
                tabs: [
                  Tab(
                    child: Container(
                      child: const Text(
                        "My Products",
                        style: TextStyle(color: Colors.blue, fontSize: 16),
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ),
                  Tab(
                    child: Container(
                      child: const Text(
                        "My Feedback",
                        style: TextStyle(color: Colors.blue, fontSize: 16),
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ),
                  Tab(
                    child: Container(
                      child: const Text(
                        "My Profile",
                        style: TextStyle(
                          color: Colors.blue,
                          fontSize: 16,
                        ),
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
          body: TabBarView(
            controller: tabController,
            children: [MyProductsPage(), MyFeedback(), MyProfile()],
          ),
        ),
      ),
    );
  }

  MyProductsPage() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          "My Products",
          style: TextStyle(fontSize: 22, color: Colors.red),
        )
      ],
    );
  }

  MyFeedback() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          "My Feedback",
          style: TextStyle(fontSize: 22, color: Colors.orange),
        )
      ],
    );
  }

  MyProfile() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          "My Profile",
          style: TextStyle(fontSize: 22, color: Colors.green),
        )
      ],
    );
  }

  double getScreenHeight() {
    var pixelRatio = window.devicePixelRatio;

    //Size in physical pixels
    var physicalScreenSize = window.physicalSize;
    var physicalHeight = physicalScreenSize.height;
    var logicalScreenSize = window.physicalSize / pixelRatio;

    var padding = window.padding;

//Size in logical pixels

    var logicalHeight = logicalScreenSize.height;

//Safe area paddings in logical pixels

    var paddingTop = window.padding.top / window.devicePixelRatio;
    var paddingBottom = window.padding.bottom / window.devicePixelRatio;
    return logicalHeight - paddingTop - paddingBottom;
  }

  double getScreenWidth() {
    var pixelRatio = window.devicePixelRatio;

    //Size in physical pixels
    var physicalScreenSize = window.physicalSize;
    var physicalWidth = physicalScreenSize.width;
    var logicalScreenSize = window.physicalSize / pixelRatio;
    var logicalWidth = logicalScreenSize.width;
    var padding = window.padding;

//Safe area paddings in logical pixels
    var paddingLeft = window.padding.left / window.devicePixelRatio;
    var paddingRight = window.padding.right / window.devicePixelRatio;
    var paddingTop = window.padding.top / window.devicePixelRatio;
    var paddingBottom = window.padding.bottom / window.devicePixelRatio;
    return logicalWidth - paddingLeft - paddingRight;
  }
}

Screenshots of above code: Physical device (Samsung phone) running from Android studio

Same Physical Device(Samsung phone) running APK (Tabbar disappeared)

The same behaviour is for my project as well as the minimal code above, Can someone help me ?

UPDATE

i tried running release version on attached physical device using:

 $ flutter devices
$ flutter run -d <device id> --release

But still get the disappeared Tab bar. Also the console is clean as in no error messages related to layout etc.

Answer 1

After posting the issue on flutter github https://github.com/flutter/flutter/issues/116546

I got the solution by an expert that, the methods getScreenHeight() & getScreenWidth() may be returning 0 as sizes because in release mode window.physicalSize sometimes returns 0 in android.

As suggested, i switched to MediaQuery for ascertaining the screen size & it worked !