Teddy Bear
Reputation: 31
Tabbar in the body gives error message overflowing
import 'package:flutter/material.dart';
import '../constants/constants.dart';
class BooksPage extends StatefulWidget {
const BooksPage({Key? key}) : super(key: key);
@override
State<BooksPage> createState() => _BooksPageState();
}
class _BooksPageState extends State<BooksPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
),
body: SingleChildScrollView(
child: SizedBox(
height: MediaQuery.of(context).size.height,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
"Hello",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
),
const Text(
"Name Surname",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25),
),
const SizedBox(
height: 30,
),
TextField(
decoration: InputDecoration(
fillColor: const Color.fromARGB(244, 243, 243, 243),
filled: true,
prefixIcon: Icon(Icons.search),
hintText: "Search the book",
contentPadding:
const EdgeInsets.symmetric(horizontal: 15, vertical: 17),
enabledBorder: searchBox(),
focusedBorder: searchBox(),
errorBorder: searchBox(),
disabledBorder: searchBox(),
)),
SizedBox(height: 20,),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text(
"My books",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
),
TextButton(onPressed: () {}, child: Text("see more", style: TextStyle(color: Colors.grey),))
],
),
SizedBox(
height: 260,
width: MediaQuery.of(context).size.width,
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: 3,
itemBuilder: (BuildContext context, int index) {
return Container(
alignment: Alignment.bottomLeft,
width: 190,
margin: EdgeInsets.all(8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.red,
image: DecorationImage(
image: AssetImage("assets/images/pride.jpg",),
fit: BoxFit.fill
),
),
);
}),
),
SizedBox(height: 30,),
DefaultTabController(
length: 2, // length of tabs
initialIndex: 0,
child: Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: TabBar(
isScrollable: true,
labelColor: Colors.green,
unselectedLabelColor: Colors.black,
tabs: [
Tab(text: 'Expenses'),
Tab(text: 'Income'),
],
),
),
Container(
height:double.maxFinite, //height of TabBarView
decoration: BoxDecoration(
border: Border(
top: BorderSide(
color: Colors.grey, width: 0.5))),
child: TabBarView(
children: <Widget>[
Container(
child: Center(
child: Text('Display Tab 1',
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold)),
),
),
Container(
child: Center(
child: Text('Display Tab 2',
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold)),
),
),
]))
]),
)),
],
),
),
),
),
);
}
}
After adding tabbar it gives me an error message " The relevant error-causing widget was Column lib\screens\books_page.dart:92 The overflowing RenderFlex has an orientation of Axis.vertical. The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size. This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView. The specific RenderFlex in question is: RenderFlex#20a41 relayoutBoundary=up14 OVERFLOWING" How can I fix it?
Upvotes: 0
Views: 878
Answers (1)
Arash Mohammadi
Reputation: 1419
I edited your code to make it work. There were multiple parts that needed to change and I have marked them with comments:
I know giving the constant height of 200 might not be the best way, but I could not make it wrap its children. If you found a way for it, please let me know,it would be appreciated.
import 'package:flutter/material.dart';
class BooksPage extends StatefulWidget {
const BooksPage({Key? key}) : super(key: key);
@override
State<BooksPage> createState() => _BooksPageState();
}
class _BooksPageState extends State<BooksPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(),
body: Container(
// ****** Add height here
height: MediaQuery.of(context).size.height,
child: SingleChildScrollView(
child: SizedBox(
// ****** Remove height from here
// height: MediaQuery.of(context).size.height,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
"Hello",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
),
const Text(
"Name Surname",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25),
),
const SizedBox(
height: 30,
),
const TextField(
decoration: InputDecoration(
fillColor: const Color.fromARGB(244, 243, 243, 243),
filled: true,
prefixIcon: Icon(Icons.search),
hintText: "Search the book",
contentPadding: const EdgeInsets.symmetric(
horizontal: 15, vertical: 17),
)),
SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text(
"My books",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 20),
),
TextButton(
onPressed: () {},
child: Text(
"see more",
style: TextStyle(color: Colors.grey),
))
],
),
SizedBox(
height: 260,
width: MediaQuery.of(context).size.width,
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: 3,
itemBuilder: (BuildContext context, int index) {
return Container(
alignment: Alignment.bottomLeft,
width: 190,
height: 190,
margin: EdgeInsets.all(8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.red,
// image: DecorationImage(
// image: AssetImage(
// "assets/images/pride.jpg",
// ),
// fit: BoxFit.fill),
),
);
}),
),
SizedBox(
height: 30,
),
DefaultTabController(
length: 2, // length of tabs
initialIndex: 0,
// ****** Removed Expanded widget *********
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: TabBar(
isScrollable: true,
labelColor: Colors.green,
unselectedLabelColor: Colors.black,
tabs: [
Tab(text: 'Expenses'),
Tab(text: 'Income'),
],
),
),
Container(
// ******** Add this height to the Container ********
height: 200,
// height: double.maxFinite, //height of TabBarView
decoration: BoxDecoration(
border: Border(
top: BorderSide(
color: Colors.grey, width: 0.5))),
child: TabBarView(children: <Widget>[
Container(
child: Center(
child: Text('Display Tab 1',
style: TextStyle(
fontSize: 22,
color: Colors.white,
fontWeight: FontWeight.bold)),
),
),
Container(
child: Center(
child: Text('Display Tab 2',
style: TextStyle(
fontSize: 22,
color: Colors.white,
fontWeight: FontWeight.bold)),
),
),
]))
])),
],
),
),
),
),
),
);
}
}
(I removed the parts that needed the Constant.dart or image)
Upvotes: 1
Related Questions
- TabBarView within Scrollable Page
- Controller's length property (2) does not match the number of tabs (3) present in TabBar's tabs property
- why Not enough tapbar space?
- Bottom overflowed by xxx pixel using TabBarView() in flutter
- Getting 'Horizontal viewport was given unbounded height.' with TabBarView in flutter
- Large text in tab is not showing completely Flutter
- Flutter - Tab title overflow in Convex Bottom Bar
- Flutter tab bar inside Appbar bottom give bottom overflow exception
- How to fix 'Controller's length property does not match the number of tabs present in TabBar's tabs property.'
- right overflowed by 88 pixel in tab bar flutter tabbar