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

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


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')),        ],      ),    );  }}


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.