Search code examples
flutterlayouttabbaradaptive-design

How to get the screensize to set the size of widget in flutter?


I have this code where it'll get the screen width to calculate and set tab adaptive width accoridng to screensize. It works fine in debug mode but In release mode the tab always found to be scrollable with large amoung of width. isScrollable property of Tabbar is set to true to provide desired width for tabs.

final double screenWidth = Data.screen.width;

@override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: 4);
    _tabController.addListener(_handleTabSelection);
    tabWidth = screenWidth / 4.8;
  }


@override
  Widget build(BuildContext context) {
    List<Widget> myTabs = [
      const HomePageTab(
        icon: Icons.groups_rounded,
      ),
      SizedBox(
        width: tabWidth,
        child: const HomePageTab(
          title: 'Chats',
        ),
      ),
      SizedBox(
        width: tabWidth,
        child: const HomePageTab(
          title: 'Status',
        ),
      ),
      SizedBox(
        width: tabWidth,
        child: const HomePageTab(
          title: 'Calls',
        ),
      ),
    ];

.

In release mode

enter image description here

In Debug mode 

enter image description here


Solution

  • Use var screenSize = MediaQuery.of(context).size