How to implement Column inside of TabBarView with SingleChildScrollView? - flutter

Question

I have a tabBar and TabBarView in body of the Scaffold widget, which is wrapped with SingleChildScrollView.
I want to display Column widget in the TabBarView (in this case it is the fourth tab), but it returns the error with OverFlow since SingleChildScrollView only detects the first element of the Column.
Any way to display Column widget here?
return Scaffold(
resizeToAvoidBottomInset: false,
appBar: AppBar(
automaticallyImplyLeading: false,
leadingWidth: 80,
actions: const [
SizedBox(
width: 117.0,
)
],
leading: CustomBackButton(
onTap: () => Navigator.of(context).pop(),
),
backgroundColor: Theme.of(context).colorScheme.monochrome[300],
brightness: Brightness.light,
centerTitle: true,
title: Text(
'hello',
style: Theme.of(context).textTheme.subtitle1,
),
elevation: 0,
bottom: PreferredSize(
child: Container(
color: Theme.of(context).colorScheme.monochrome[400],
height: 1.0,
),
preferredSize: const Size.fromHeight(1.0),
),
),
body: SingleChildScrollView(
padding: const EdgeInsets.only(bottom: 64),
physics: const AlwaysScrollableScrollPhysics(),
child: Column(
children: [
DefaultTabController(
length: 4,
initialIndex: 0,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
TabBar(
indicatorWeight: 4.0,
indicatorColor:
viewState.player!.team!.primaryColor(context),
tabs: [
Tab(
child: Text(
'tab1',)
Tab(
child: Text(
'tab2',
Tab(
child: Text(
'tab3',)
Tab(
child: Text(
'tab4',)
],
),
SingleChildScrollView(
physics: const AlwaysScrollableScrollPhysics(),
child: Container(
height: 472,
decoration: const BoxDecoration(
border: Border(
top: BorderSide(
color: Colors.grey,
width: 0.5,
),
),
),
child: TabBarView(
children: [
TabView1(),
TabView2()
TabView3()
Column(
children: [
_buildYearSelection()
ProfileTable(),]),
],
),
),
)
],
),
),
),
),
],
),
),
);
}

Answer 1

Just try with ListView instead of column
ListView(
shrinkWrap: true,
physics: ScrollPhysics(),
children: [
Text("data"),
SizedBox(height: 500,),
Text("data"),
SizedBox(height: 500,),
Text("data"),
SizedBox(height: 500,),
Text("data"),
SizedBox(height: 500,),
Text("data"),
],
),

Answer 2

Perhaps what you are trying to do is create a TabBar that hides itself when scrolled.
If that is the case then there is an easy way to achieve it using CustomScrollView.
Something like this:
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
elevation: 0.0,
title: Text("MY title"),
),
body: CustomScrollView(slivers: [
const SliverAppBar(
title: TabBar(
indicatorWeight: 4.0,
tabs: [
Tab(child: Text("Tab 1")),
Tab(child: Text("Tab 2")),
],
),
),
SliverFillRemaining(
child: TabBarView(children: [
Container(child: Text("Scr 1")),
Container(child: Text("Scr 2")),
]),
),
]),
),
);
Below is the complete code:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Home(),
);
}
}
class Home extends StatelessWidget {
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
elevation: 0.0,
title: Text("MY title"),
),
body: CustomScrollView(slivers: [
const SliverAppBar(
title: TabBar(
indicatorWeight: 4.0,
tabs: [
Tab(child: Text("Tab 1")),
Tab(child: Text("Tab 2")),
],
),
),
SliverFillRemaining(
child: TabBarView(children: [
Container(child: Text("Scr 1")),
Container(child: Text("Scr 2")),
]),
),
]),
),
);
}
}