Tabbar in flutter streches some of the tab's contents beyond screen's width

Question

in the following code, you'll see i have three tabs in the tab bar. Analytics, Quality Control and Inventory.

The first two tabs work fine when you don't visit the 3rd tab. But when you go to the 3rd tab, you'll see that the content of the tab will stretch out weirdly in width and the content will go outside the screen limits too. It also won't cause any errors in the debug console.

Also, if you go to another page and then come back to the 3rd page, the bug will solve and the content size will return to normal. Here is what it looks like:

This is how the screen looks like with the stretched out content

This is what the screen should look like

Here is the code for the Dashboard:

class DashboardScreen extends StatelessWidget {
  static const String routeName = '/dashboard';

  const DashboardScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3, 
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Dashboard'),
          centerTitle: true,
          bottom: const TabBar(
            tabs: [
              Tab(
                text: 'Overview',
                icon: Icon(Icons.analytics),
              ),
              Tab(
                text: 'QC History',
                icon: Icon(Icons.verified_user),
              ),
              Tab(
                text: 'Inventory Stock',
                icon: Icon(Icons.inventory),
              ),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            const AnalyticsScreen(),
            const QualityControlScreen(),
            InventoryScreen(),
          ],
        ),
      ),
    );
  }
}

Here is the code for Inventory Screen (3rd Tab I was talking about):

class InventoryScreen extends StatelessWidget {
  static const String routeName = '/inventory';

  InventoryScreen({Key? key}) : super(key: key);

  // Dummy data representing items in the factory's inventory
  final List<InventoryItem> inventoryItems = [
    InventoryItem(
      name: 'Item A',
      quantity: 10,
      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    ),
    InventoryItem(
      name: 'Item B',
      quantity: 5,
      description:
          'Ut enim ad minim veniam, quis nostrud exercitation ullamco.',
    ),
    InventoryItem(
      name: 'Item C',
      quantity: 15,
      description: 'Duis aute irure dolor in reprehenderit in voluptate velit.',
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: inventoryItems.length,
      itemBuilder: (context, index) {
        final item = inventoryItems[index];

        return CustomCardWidget(
          child: Column(
            children: [
              ListTile(
                title: Text(item.name),
                subtitle: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text('Quantity: ${item.quantity}'),
                    const SizedBox(height: 4),
                    Text(item.description),
                  ],
                ),
                onTap: () {
                  // TODO: Handle tapping on an inventory item
                },
              ),
              const SizedBox(height: 8),
              LinearProgressIndicator(
                value: item.quantity / 100,
              ),
              const SizedBox(height: 8),
              SizedBox(
                height: 200,
                child: SfCartesianChart(
                  primaryXAxis: CategoryAxis(),
                  series: <ChartSeries>[
                    ColumnSeries<InventoryItem, String>(
                      dataSource: [item],
                      xValueMapper: (InventoryItem item, _) => item.name,
                      yValueMapper: (InventoryItem item, _) => item.quantity,
                      color: Colors.blue,
                    ),
                  ],
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}

Also, here are the codes for the other screens too for comparison:

class QualityControlScreen extends StatelessWidget {
  static const String routeName = '/quality-control';

  const QualityControlScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const SingleChildScrollView(
      child: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: [
            QualityControlItem(
              testId: 'QC001',
              testName: 'Test A',
              status: QualityControlStatus.passed,
            ),
            QualityControlItem(
              testId: 'QC002',
              testName: 'Test B',
              status: QualityControlStatus.failed,
            ),
            QualityControlItem(
              testId: 'QC003',
              testName: 'Test C',
              status: QualityControlStatus.pending,
            ),
          ],
        ),
      ),
    );
  }
}

class AnalyticsScreen extends StatelessWidget {
  const AnalyticsScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return const SingleChildScrollView(
      child: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            ProductionProgress(),
            Attendance(),
            InventoryStock(),
            QualityControlHistory(),
          ],
        ),
      ),
    );
  }
}

I have tried to change the ListView.builder on the 3rd tab to SingleChildScrollView but that didn't change anything.

Edit: I replaced the content of the 3rd tab with just a text widget and it's still happening. I don't think it has anything to do with the content of the page.

ALSO, it only happens where there are 3 tabs. I tried with 2,4,5 no problem.

Answer 1

I face a very similar problem, also with 3 tabs, and it is alway navigating to the last tab which creates the distortion. Changing the content doesn't do anything.

It only appears though on Android Emulator. I cannot reproduce this error with deploying to a phisical mobile or rendering on the linux desktop app. So I suspect this is an emulator bug.