How to achieve vertical scrolling list with horizontal scrollable header in Flutter

Question

Thanks in advance,

The project(Using Flutter) I'm working on how to show a list of categories under the respective services.

Where categories have to be shown in vertical scrolling list and services have to be shown in the horizontal scrolling list.

Both the list(categories and services) should be scrolled respective to each other.

It's something like multiple tabs with a single vertical scrolling list. Having trouble while achieving this. Kindly share the idea to overcome this.

Answer 1

I think what you are looking for is a NestedScrollView . It works well with TabBarViews.

Your code would be something like this:

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  var _tabController;

  @override
  void initState() {
    super.initState();

    _tabController = TabController(length: 8, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    var tabBar = TabBar(
      controller: _tabController,
      //This property will allow your tabs to be horizontally scrollable
      isScrollable: true,
      indicatorColor: Colors.black,
      labelColor: Colors.black,
      tabs: [
        //Tab 1
        //Tab 2
        //Tab 3
        //etc
      ],
    );

    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (context, isScrolled) => [
          SliverAppBar(
            expandedHeight: 300,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
              title: Text('Title'),
              //Without this padding the title appears behind the tabs.
              //This is the whole reason why the tabBar is in a local variable, to
              //be able to use its height here.
              titlePadding: EdgeInsetsDirectional.only(
                  start: 72, bottom: tabBar.preferredSize.height + 16),
              background: //Your image
            ),
            // I did this this way to have a white bottom bar like in your photo,
            // however, you could just pass the tabBar. The background image would
            //be behind it.
            bottom: PreferredSize(
              child: Container(
                //This will keep your tabs centered if you have not enough to fill
                //the display's width 
                alignment: Alignment.center,
                width: double.infinity,
                color: Colors.white,
                child: tabBar,
              ),
              preferredSize: Size(double.infinity, tabBar.preferredSize.height),
            ),
          ),
        ],
        body: TabBarView(
          controller: _tabController,
          children: <Widget>[
            //Child 1
            //Child 2
            //Child 3
            //etc
          ],
        ),
      ),
    );
  }
}

This would be the end result:

I hope this is what you were looking for:D