How to solve overflow issues in flutter tabs? - flutter

Question

Following is a custom tab I've created:
class Tabs extends StatefulWidget {
final tabs;
final views;
Tabs({this.tabs, this.views});
#override
_TabsState createState() => _TabsState();
}
class _TabsState extends State<Tabs> with SingleTickerProviderStateMixin {
late TabController _tabController;
#override
void initState() {
_tabController = TabController(length: widget.tabs.length, vsync: this);
super.initState();
}
#override
void dispose() {
super.dispose();
_tabController.dispose();
}
#override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
return SingleChildScrollView(
physics: BouncingScrollPhysics(),
child: Container(
height: size.height,
child: Column(
children: [
Container(
height: 45,
decoration: BoxDecoration(
border: Border(
bottom:
BorderSide(color: Colors.grey, width: 3),
),
),
child: TabBar(
isScrollable: true,
controller: _tabController,
indicatorPadding: EdgeInsets.only(bottom: -2.5),
indicator: UnderlineTabIndicator(
borderSide: BorderSide(
width: 4,
color: Colors.blue,
),
),
labelColor: Colors.blue,
unselectedLabelColor: Colors.black,
tabs: [
...widget.tabs.map(
(e) => Tab(
child: Container(
child: Text(
e,
style: GoogleFonts.inter(
fontSize: 14,
fontWeight: FontWeight.w600,
),
),
),
),
)
],
),
),
Expanded(
child: TabBarView(
controller: _tabController,
children: [...widget.views],
),
),
],
),
),
);
}
}
But as soon as I use it inside my app screen, I'm getting overflow issues:
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: "Home"
elevation: 0,
toolbarHeight: 36,
),
drawer: DrawerNavigation(),
body: SingleChildScrollView(
physics: BouncingScrollPhysics(),
child: Column(
children: [
SizedBox(
height: 100,
),
Tabs(
tabs: ['tab1', 'tab2'],
views: [
Tab1(),
Tab2(),
],
),
],
),
),
);
}
}
The error I'm getting from is from single child scroll view.
I've tried removing single child scroll view from the tabs, but then the custom tabs wont' work.

Answer 1

just remove single child scroll view from custom Tab like this,
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
class Tabs extends StatefulWidget {
final tabs;
final views;
Tabs({this.tabs, this.views});
#override
_TabsState createState() => _TabsState();
}
class _TabsState extends State<Tabs> with SingleTickerProviderStateMixin {
late TabController _tabController;
#override
void initState() {
_tabController = TabController(length: widget.tabs.length, vsync: this);
super.initState();
}
#override
void dispose() {
super.dispose();
_tabController.dispose();
}
#override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
return Container(
height: size.height,
child: Column(
children: [
Container(
height: 45,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(color: Colors.grey, width: 3),
),
),
child: TabBar(
isScrollable: true,
controller: _tabController,
indicatorPadding: EdgeInsets.only(bottom: -2.5),
indicator: UnderlineTabIndicator(
borderSide: BorderSide(
width: 4,
color: Colors.blue,
),
),
labelColor: Colors.blue,
unselectedLabelColor: Colors.black,
tabs: [
...widget.tabs.map(
(e) => Tab(
child: Container(
child: Text(
e,
style: GoogleFonts.inter(
fontSize: 14,
fontWeight: FontWeight.w600,
),
),
),
),
)
],
),
),
Expanded(
child: TabBarView(
controller: _tabController,
children: [...widget.views],
),
),
],
),
);
}
}
and convert stateless widget (Home) into stateful widget and it will work fine like this,
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Column(
children: [
SizedBox(
height: 100,
),
Tabs(
tabs: ["tab1", "tab2"],
views: [okay(), okay()],
)
],
),
),
);
}
}