Flutter - make scrollable a page that contains a DefaultTabController - flutter

Question

I am developing an app and I have a page in which I show a block of data and below that I show the tabBars and TabBarView containing additional data. The problem I am struggling with is that if I try to wrap the widget "DefaultTabController" with "SingleChildScrollView" it throws an error and the page does not work.
I need to find a way to show the tabBars and TabBarView at the bottom of the page and make the entire page scrollable
I put the code:
In the build method I put 4 widgets inside the column
_showEventHeader shows a single image with a title
_showUserAndEventData shows plain text
_showTabs shows the tab headers
_showTabsContent shows the content of the tabs (images and comments)
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
backgroundColor: Theme.of(context).primaryColor,
body: Column(
children: [
..._showEventHeader(),
Container(
padding: EdgeInsets.all(15),
child: _showUserAndEventData()),
_showTabs(),
_showTabsContent(),
],
)
));
}
List<Widget> _showEventHeader() {
return [
SizedBox(
height: 20,
),
GestureDetector(
onTap: () {
if (Val.valStr(widget.evento.bannerUrl).isNotEmpty) {
Navigator.of(context).push(MaterialPageRoute(builder: (ctx) {
return FlypperFullImage(
imgURL: widget.evento.bannerUrl,
);
}));
}
},
child: Stack(
alignment: Alignment.bottomRight,
children: [
FlypperCustomImageNetWork(
imageURL: widget.evento.bannerUrl,
height: 200,
width: 200,
showAsRectangle: true,
fillWidth: true,
),
Container(
child: FlypperQrImage(
qrData: widget.evento.code,
size: 65,
),
)
],
),
),
SizedBox(
height: 20,
),
!_ticketsAvailable
? Text('$_noTicketAvailableMessage',
style: Theme.of(context).textTheme.headline2)
: SizedBox(
height: 1,
),
Card(
color: Theme.of(context).primaryColor,
elevation: 5,
child: Padding(
padding: const EdgeInsets.all(5),
child: Text(
Val.valStr(widget.evento.name).isNotEmpty
? Val.valStr(widget.evento.name)
: 'Sin nombre',
textAlign: TextAlign.justify,
style: Theme.of(context)
.textTheme
.headline1 /*FlypperStyleHelper.eventTitle(context)*/),
),
),
SizedBox(
height: 10,
),
];
}
Widget _showUserAndEventData() {
return SingleChildScrollView(
child: Container(
color: Theme.of(context).primaryColor,
child: Column(
children: [
SizedBox(height: 10),
Row(mainAxisAlignment: MainAxisAlignment.start, children: [
this.user != null
? /*FlypperCustomImageBase64(
imageBase64: this.user.profileImageUrl)*/
FlypperCustomImageNetWork(
imageURL: this.user.profileImageUrl,
keepImageCached: true,
height: 65,
width: 65,
)
: SizedBox(height: 1),
SizedBox(
height: 10,
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
this.user != null
? this.user.userName.isEmpty
? this.user.email
: this.user.userName
: '',
style: Theme.of(context).textTheme.headline1,
/* FlypperStyleHelper.eventUserData(context, 18),*/
),
Text(
this.user != null
? Val.valInt(this.user.followers).toString() +
' seguidores'
: '',
style: Theme.of(context).textTheme.bodyText1
/*FlypperStyleHelper.eventUserData(context, 15),*/
)
],
),
)
]),
_getEventDetailInfo(),
SizedBox(
height: 20,
),
_showBuyButton(),
SizedBox(
height: 10,
),
FlypperIconButton(
icon: Icons.location_on,
width: 150,
handlerFunction: () => _openMapWithCalculatedRoute(context),
),
Divider(
color: Colors.grey,
thickness: 2,
)
],
),
),
);
}
Widget _showTabs() {
return TabBar(
isScrollable: true,
labelStyle: Theme.of(context).textTheme.headline2,
tabs: [
Tab(
text: 'Fotos, videos...',
/*icon: Icon(Icons.event, color: Theme.of(context).buttonColor)*/
),
Tab(
text: 'Comentarios',
/*icon: Icon(Icons.attach_file, color: Theme.of(context).buttonColor),*/
),
],
);
}
Widget _showTabsContent() {
return Flexible(
child: TabBarView(
children: [
SingleChildScrollView(
child: Column(
children: [
Container(
color: Theme.of(context).primaryColor,
child: Column(children: [_getDetailImage()]),
),
],
),
),
Container(child: Text('Comments section')) //comentarios, pendiente
// SingleChildScrollView(
// child: Container(
// color: Theme.of(context).primaryColor,
// child: Column(children: [_getDetailImage()]),
// ),
// ),
// Container(child: Text('Comments section')) //comentarios, pendiente
],
),
);
}
I also attached an screenshot so you can understand better what I am saying

Answer 1

Try this i have a give example and edit it some value :-
TabBar(
isScrollable: true,
unselectedLabelColor: Colors.white.withOpacity(0.3),
indicatorColor: Colors.white,
tabs: [
Tab(
child: Text('Tab 1'),
),
Tab(
child: Text('Investment'),
),
Tab(
child: Text('Your Earning'),
),
]),
And all Widget vale call in a List view Like this:-
_showEventHeader() {
return new Container(
height: 20,
child: ListView(
shrinkWrap: true,
scrollDirection: Axis.vertical,
Column(
children: [])));}