I need to implement the following layout in Flutter.
When the user scrolls, I want the entire layout to scroll (hiding the header and tab bar). However, I c
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 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.