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

5,249

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 {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _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;

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  void initState() {
    _tabController = TabController(length: 3, vsync: this);
    _tabController.addListener(_handleTabSelection);
    super.initState();
  }

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

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

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

Solution 2

This will be made very easy by the refactored scrolling "sliver" code currently landing as part of https://github.com/flutter/flutter/projects/3.

SliverList https://docs.flutter.io/flutter/widgets/SliverList-class.html is designed to enable exactly this kind of composition and should be ready for general usage in about two weeks time.

Share:
5,249
Dvdwasibi
Author by

Dvdwasibi

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

Updated on December 01, 2022

Comments

  • 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.

    Diagram:

    Layout Diagram

    Code:

    new DefaultTabController(
      length: 3,
      child: new Block(
        children: [
          new Container(
            height: 200.0,
            decoration: new BoxDecoration(
              backgroundColor: Colors.blue[500],
            ),
          ),
          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?