How can I have a TabView with variable height content within a Scrollable View with Flutter?


Solution 1

I don't know what is the block (the link is not working anymore). But as I see from the question, you need to put TableView inside some scrollable component.

The easiest solution is to use tab controller + container instead of TabView Widget.

enter image description here

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
      home: MyHomePage(),

class MyHomePage extends StatefulWidget {
  _MyHomePageState createState() => _MyHomePageState();

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  final List<Widget> myTabs = [
    Tab(text: 'one'),
    Tab(text: 'two'),
    Tab(text: 'three'),

  TabController _tabController;
  int _tabIndex = 0;

  void dispose() {

  void initState() {
    _tabController = TabController(length: 3, vsync: this);

  _handleTabSelection() {
    if (_tabController.indexIsChanging) {
      setState(() {
        _tabIndex = _tabController.index;

  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: <Widget>[
            height: 120,
            child: Center(
              child: Text('something on top'),

            controller: _tabController,
            labelColor: Colors.redAccent,
            isScrollable: true,
            tabs: myTabs,
            child: [
              Text('second tab'),
                children: List.generate(20, (index) => Text('line: $index')).toList(),
              Text('third tab')
          Container(child: Text('another component')),

Solution 2

This will be made very easy by the refactored scrolling "sliver" code currently landing as part of

SliverList is designed to enable exactly this kind of composition and should be ready for general usage in about two weeks time.

Author by


I use Flutter to build things. Check out my list of FlutterFAQs

Updated on December 01, 2022


  • Dvdwasibi
    Dvdwasibi 21 days

    I have a TabBar & TabBarView nested within a Block. This is because the content inside the TabBarView is dynamic and the height of the content is not known until runtime.

    I cannot nest the Block inside the TabBarView because there is content preceding the TabBar that should scroll along with the TabBarView content.


    Layout Diagram


    new DefaultTabController(
      length: 3,
      child: new Block(
        children: [
          new Container(
            height: 200.0,
            decoration: new BoxDecoration(
          new TabBar(
            tabs: <Widget>[
              new Tab(text: '1'),
              new Tab(text: '2'),
              new Tab(text: '3'),
          new TabBarView(
            children: [
              new Text('one'),
              new Text('two'),
              new Text('three'),

    However, a TabBarView's Viewport is not constrained and requires an ancestor widget with a bounded height constraint. Unfortunately a Block does not give a bounded height because its scrollable nature.

    I receive this error when running the layout:

    ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY    ╞═════════════════════════════════════════════════════════
    I/flutter (28715): The following assertion was thrown during   performLayout():
    I/flutter (28715): RenderList object was given an infinite size during layout.
    I/flutter (28715): This probably means that it is a render object that tries to be as big as possible, but it was put
    I/flutter (28715): inside another render object that allows its children to pick their own size.
    I/flutter (28715): The nearest ancestor providing an unbounded height constraint is: ...

    Any ideas on how to best approach this?

  • WenhaoWu
    WenhaoWu about 5 years
    Could you give an example of using SilverList to construct a view like this. I tried this gist , but it still requires a fixed height container to wrap the TabBarView. Any help would be appreciated. Thanks
  • Dani
    Dani over 1 year
    it seems that it's missing the slide animation, right? Can you scroll horizontally also?