How to make a screen with Tabs and TabBarViews both scrollable in flutter?

Question

I've been trying to add SingleChildScrollView to my code so that the whole page including Tabs and TabBarViews are scrolled together.

RenderFlex children have non-zero flex but incoming height constraints are unbounded Horizontal viewport was given unbounded height.

These are the errors I encountered to make the whole page scrollable.

import 'package:buttons_tabbar/buttons_tabbar.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';

import '../widgets/style_grid.dart';

class StyleScreen extends StatefulWidget {
  const StyleScreen({super.key});

  @override
  State<StyleScreen> createState() => _StyleScreenState();
}

class _StyleScreenState extends State<StyleScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Screen')),
      body: SafeArea(
        child: DefaultTabController(
          length: 5,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              ButtonsTabBar(
                backgroundColor: Colors.grey[300],
                radius: 16,
                unselectedLabelStyle: TextStyle(color: Colors.black),
                labelStyle: TextStyle(
                    color: Colors.orange, fontWeight: FontWeight.bold),
                tabs: [
                  Tab(
                    icon: Icon(Icons.directions_car),
                    text: "All",
                  ),
                  Tab(
                    icon: Icon(Icons.directions_transit),
                    text: "Cat1",
                  ),
                  Tab(
                    icon: Icon(Icons.directions_transit),
                    text: "Cat2",
                  ),
                  Tab(
                    icon: Icon(Icons.directions_transit),
                    text: "Cat3",
                  ),
                  Tab(
                    icon: Icon(Icons.directions_transit),
                    text: "Cat4",
                  ),
                ],
              ),
              Expanded(
                child: TabBarView(
                  physics: NeverScrollableScrollPhysics(),
                  children: <Widget>[
                    StyleGrid(),
                    StyleGrid(),
                    StyleGrid(),
                    StyleGrid(),
                    StyleGrid(),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

I want to make the red area scrollable.

score 0 · Answer 1 · answered Jul 17 '22 at 14:15

Try wrapping it in the following class. This provides both vertical and horizontal scrolling.

class ScrollableWidget extends StatelessWidget {
      final Widget child;
    
      const ScrollableWidget({Key? key, required this.child}) : super(key: key);
    
      @override
      Widget build(BuildContext context) => SingleChildScrollView(
            physics: const BouncingScrollPhysics(),
            scrollDirection: Axis.horizontal,
            child: SingleChildScrollView(
              physics: const BouncingScrollPhysics(),
              scrollDirection: Axis.vertical,
              child: child,
            ),
          );
    }

score 0 · Accepted Answer · answered Jul 17 '22 at 14:16

You can use NestedScrollView. It is better to use ListView.builder or CustomScrollView instead of using SingleChildScrollView on StyleGrid

class StyleScreen extends StatefulWidget {
  const StyleScreen({super.key});

  @override
  State<StyleScreen> createState() => _StyleScreenState();
}

class _StyleScreenState extends State<StyleScreen>
    with SingleTickerProviderStateMixin {
  late final TabController controller = TabController(length: 5, vsync: this);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Screen')),
      body: NestedScrollView(
        headerSliverBuilder: (context, innerBoxIsScrolled) => [
          SliverToBoxAdapter(
            child: tabBar(),
          )
        ],
        body: TabBarView(
          controller: controller,
          children: List.generate(
              5, (index) => SingleChildScrollView(child: StyleGrid())),
        ),
      ),
    );
  }

  ButtonsTabBar tabBar() {
    return ButtonsTabBar(
      controller: controller,
      backgroundColor: Colors.grey[300],
      radius: 16,
      unselectedLabelStyle: TextStyle(color: Colors.black),
      labelStyle: TextStyle(color: Colors.orange, fontWeight: FontWeight.bold),
      tabs: [
        Tab(
          icon: Icon(Icons.directions_car),
          text: "All",
        ),
        Tab(
          icon: Icon(Icons.directions_transit),
          text: "Cat1",
        ),
        Tab(
          icon: Icon(Icons.directions_transit),
          text: "Cat2",
        ),
        Tab(
          icon: Icon(Icons.directions_transit),
          text: "Cat3",
        ),
        Tab(
          icon: Icon(Icons.directions_transit),
          text: "Cat4",
        ),
      ],
    );
  }
}

Your answer fixed the issue. Thank you so much. By the way, why do I have to put StyleGrid as a child of SingleChildScrollView? Cuz it still works without SingleChildScrollView. — sinsadong, Jul 18 '22 at 01:36
If you've already maintained overflow inside `StyleGrid` you don't need to wrap it — Md. Yeasin Sheikh, Jul 18 '22 at 07:52

How to make a screen with Tabs and TabBarViews both scrollable in flutter?

2 Answers2