Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create a bounded scrollable TabBarView

I need to implement the following layout in Flutter.

Layout

When the user scrolls, I want the entire layout to scroll (hiding the header and tab bar). However, I can't nest a TabBarView inside a ListView since the TabBarView doesn't have a bounded height and ListViews don't provide a bounded height to their children.

I've already seen these questions, but all of them have unsatisfactory answers for this use case:

  • How can I have a TabView with variable height content within a Scrollable View with Flutter? : Exactly what I needed, but the only answer doesn't provide any concrete code on how to implement this, only a reference to a feature (SliverList) that I can't figure out how to implement.
  • how to implement a sliverAppBar with a tabBar : The provided code doesn't work since the SliverList doesn't accept a constructor with this shape (and I tried adapting it to use a delegate without success).
  • Getting 'Horizontal viewport was given unbounded height.' with TabBarView in flutter : This use case doesn't work for me since I need the entire layout to scroll, and in that answer, the header is fixed to the top.
like image 372
Ozymas Avatar asked Dec 12 '18 16:12

Ozymas


People also ask

How do you make a TabBarView scrollable in flutter?

It is simple to add scrollable on flutter. Just create SingleChildScrollView widget as a TabBarView and put all the contents as it's child.

How do you make a scrollable list in flutter?

Just change Column widget to ListView widget — and that's all. Your container becomes scrollable.

Is scrollable in flutter?

isScrollable property Null safety Whether this tab bar can be scrolled horizontally. If isScrollable is true, then each tab is as wide as needed for its label and the entire TabBar is scrollable. Otherwise each tab gets an equal share of the available space.


1 Answers

On top of Miguel Ruvio's answer replacing the ListView in the body with the TabBarView gets you almost all of the way per D.R.'s comment. I did get some overflow issues when one of my widgets in the was wrapped in a column. Replacing that with ListView per this example

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: Tabs()));
}

class Tabs extends StatefulWidget {
  @override
  _RoomTabsState createState() => _RoomTabsState();
}

class _RoomTabsState extends State<Tabs> with TickerProviderStateMixin {
  var _scrollViewController;
  var _tabController;

  @override
  void initState() {
    super.initState();
    _scrollViewController = ScrollController();
    _tabController = TabController(vsync: this, length: 2);
  }

  @override
  Widget build(BuildContext context) {
    return NestedScrollView(
      controller: _scrollViewController,
      headerSliverBuilder: (context, bool) => [
        SliverAppBar(
          bottom: TabBar(
            controller: _tabController,
            tabs: [
              Tab(text: "All"),
              Tab(text: "Living room"),
            ],
          ),
        ),
      ],
      body: TabBarView(
        controller: _tabController,
        children: [
          ListView(children: [
            Text("test"),
            Text("test"),
            Text("test"),
            Text("test"),
            Text("test"),
            Text("test"),
            Text("test"),
            Text("test"),
            Text("test"),
            Text("test"),
            Text("test"),
            Text("test"),
            Text("test"),
            Text("test"),
            Text("test"),
            Text("test"),
            Text("test"),
            Text("test"),
            Text("test"),
            Text("test"),
          ]),
          Text("test"),
        ],
      ),
    );
  }
}

comming from this github issue.

like image 86
Ryan Palmer Avatar answered Nov 07 '22 20:11

Ryan Palmer