I am need to create to Material Widget per row, but when i create it i wanted to add padding when i do so for the column the yellow error appears with this error:
Another exception was thrown: A RenderFlex overflowed by 4.1 pixels on
the bottom.
Another exception was thrown: A RenderFlex overflowed by 4.1 pixels on
the bottom.
Another exception was thrown: A RenderFlex overflowed by 4.1 pixels on
the bottom.
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY
╞═════════════════════════════════════════════════════════ The
following assertion was thrown during layout: A RenderFlex overflowed
by 0.200 pixels on the right. The relevant error-causing widget was:
Row
Row:file:///E:/work/nabaa_mobile-main/lib/ui/screens/home/widgets/bottom_home_page/home.dart:134:25
To inspect this widget in Flutter DevTools, visit:
http://127.0.0.1:9101/#/inspector?uri=http%3A%2F%2F127.0.0.1%3A56940%2FUjrL2FntShg%3D%2F&inspectorRef=inspector-1305
The overflowing RenderFlex has an orientation of Axis.horizontal. 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#164c6
relayoutBoundary=up1 OVERFLOWING: creator: Row ← Column ← Semantics ←
DefaultTextStyle ← AnimatedDefaultTextStyle ←
_InkFeatures-[GlobalKey#020b0 ink renderer] ← NotificationListener ← CustomPaint ←
_ShapeBorderPaint ← PhysicalShape ← _MaterialInterior ← Material ← ⋯ parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use
size) constraints: BoxConstraints(0.0<=w<=135.2, 0.0<=h<=Infinity)
size: Size(135.2, 40.0) direction: horizontal mainAxisAlignment:
start mainAxisSize: max crossAxisAlignment: center textDirection: ltr
verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════════════════════════
Another exception was thrown: A RenderFlex overflowed by 12 pixels on
the bottom. Another exception was thrown: A RenderFlex overflowed by
0.200 pixels on the right. Another exception was thrown: A RenderFlex overflowed by 12 pixels on the bottom. Another exception
was thrown: A RenderFlex overflowed by 0.200 pixels on the right.
Another exception was thrown: A RenderFlex overflowed by 12 pixels
on the bottom. Another exception was thrown: A RenderFlex
overflowed by
0.200 pixels on the right. Another exception was thrown: A RenderFlex overflowed by 12 pixels on the bottom. Performing hot
reload... Reloaded 1 of 1166 libraries in 4,534ms. Performing hot
reload... Reloaded 1 of 1166 libraries in 3,199ms. ══╡ EXCEPTION
CAUGHT BY RENDERING LIBRARY
╞═════════════════════════════════════════════════════════ The
following assertion was thrown during layout: A RenderFlex overflowed
by 0.200 pixels on the right. The relevant error-causing widget was:
Row
Row:file:///E:/work/nabaa_mobile-main/lib/ui/screens/home/widgets/bottom_home_page/home.dart:140:27
To inspect this widget in Flutter DevTools, visit:
http://127.0.0.1:9101/#/inspector?uri=http%3A%2F%2F127.0.0.1%3A56940%2FUjrL2FntShg%3D%2F&inspectorRef=inspector-2705
The overflowing RenderFlex has an orientation of Axis.horizontal. 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#4f67e
relayoutBoundary=up1 OVERFLOWING: creator: Row ← Column ← Padding ←
DefaultTextStyle ← AnimatedDefaultTextStyle ←
_InkFeatures-[GlobalKey#c9285 ink renderer] ← NotificationListener ← CustomPaint ←
_ShapeBorderPaint ← PhysicalShape ← _MaterialInterior ← Material ← ⋯ parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use
size) constraints: BoxConstraints(0.0<=w<=135.2, 0.0<=h<=Infinity)
size: Size(135.2, 40.0) direction: horizontal mainAxisAlignment:
start mainAxisSize: max crossAxisAlignment: center textDirection: ltr
verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════════════════════════
Another exception was thrown: A RenderFlex overflowed by 12 pixels on
the bottom.
========================================================================
the code is
GridView.count(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
crossAxisCount: 2,
mainAxisSpacing: 4,
scrollDirection: Axis.vertical,
crossAxisSpacing: 4.w,
// padding: EdgeInsets.all(9),
children: List.generate(4, (index) {
return Material(
// padding: const EdgeInsets.all(8.0),
shape: RoundedRectangleBorder(
// side: ,
borderRadius: BorderRadius.circular(18.0),
),
type: MaterialType.button,
color: whiteColor,
elevation: 5,
// clipBehavior: Clip.antiAliasWithSaveLayer,
shadowColor: blackColor.withOpacity(0.5),
child: Column(
children: [
Row(
children: [
CircleAvatar(
foregroundColor: blackColor,
child: ClipOval(
child:
Image.asset('assets/images/meta-logo.png'),
),
),
Padding(
padding: EdgeInsetsDirectional.only(start: 4.w),
child: Text(
"company_name".tr,
// textAlign: TextAlign.end,
style: Get.textTheme.headline3!
.copyWith(color: faddenGreyColor),
),
),
],
),
Align(
alignment: AlignmentDirectional.centerStart,
heightFactor: 0.3.h,
child: Text(
"opportunity_title".tr,
style: Get.textTheme.headline4,
),
),
Row(
children: [
Icon(
Icons.calendar_today_outlined,
color: faddenGreyColor,
size: 13.sp,
),
Padding(
padding: EdgeInsetsDirectional.only(start: 2.w),
child: Text(
"date".tr,
style: Get.textTheme.headline3!.copyWith(
color: faddenGreyColor,
),
),
),
],
),
Row(
children: [
Icon(
Icons.location_on_outlined,
color: faddenGreyColor,
size: 15.sp,
),
Padding(
padding: EdgeInsetsDirectional.only(start: 2.w),
child: Text(
"location".tr,
style: Get.textTheme.headline3!.copyWith(
color: faddenGreyColor,
),
),
),
],
),
SizedBox(height: 2.h),
],
),
);
}),
),
-> Use Can Use For This Code SingleChildScrollView
import 'package:flutter/material.dart';
class Data extends StatefulWidget {
const Data({Key? key}) : super(key: key);
#override
_DataState createState() => _DataState();
}
class _DataState extends State<Data> {
#override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: GridView.count(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
crossAxisCount: 2,
mainAxisSpacing: 4,
scrollDirection: Axis.vertical,
crossAxisSpacing: 4,
// padding: EdgeInsets.all(9),
children: List.generate(4, (index) {
return Material(
// padding: const EdgeInsets.all(8.0),
shape: RoundedRectangleBorder(
// side: ,
borderRadius: BorderRadius.circular(18.0),
),
type: MaterialType.button,
color: Colors.white,
elevation: 5,
// clipBehavior: Clip.antiAliasWithSaveLayer,
shadowColor: Colors.black.withOpacity(0.5),
child: Column(
children: [
Row(
children: [
CircleAvatar(
foregroundColor: Colors.black,
child: ClipOval(
child: Image.asset('assets/images/meta-logo.png'),
),
),
Padding(
padding: EdgeInsetsDirectional.only(start: 4),
child: Text(
"company_name",
// textAlign: TextAlign.end,
style: TextStyle(),
),
),
],
),
Align(
alignment: AlignmentDirectional.centerStart,
child: Text(
"opportunity_title",
style: TextStyle(),
),
),
Row(
children: [
Icon(
Icons.calendar_today_outlined,
color: Colors.red,
size: 13,
),
Padding(
padding: EdgeInsetsDirectional.only(start: 2),
child: Text(
"location",
style: TextStyle(),
),
),
],
),
Row(
children: [
Icon(
Icons.location_on_outlined,
color: Colors.red,
size: 15,
),
Padding(
padding: EdgeInsetsDirectional.only(start: 2),
child: Text(
"location",
style: TextStyle(),
),
),
],
),
SizedBox(height: 2),
],
),
);
}),
),
);
}
}
Expanded all your widget in Column
GridView.count(
shrinkWrap: true,
physics: const ScrollPhysics(),
crossAxisCount: 2,
mainAxisSpacing: 4,
scrollDirection: Axis.vertical,
crossAxisSpacing: 4,
// padding: EdgeInsets.all(9),
children: List.generate(4, (index) {
return Material(
// padding: const EdgeInsets.all(8.0),
shape: RoundedRectangleBorder(
// side: ,
borderRadius: BorderRadius.circular(18.0),
),
type: MaterialType.button,
elevation: 5,
// clipBehavior: Clip.antiAliasWithSaveLayer,
color: Colors.white,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
Expanded(
child: Row(
children: [
Expanded(
child: CircleAvatar(
child: ClipOval(
child: Image.asset('images/profile.png'),
),
),
),
Expanded(
child: Padding(
padding: EdgeInsetsDirectional.only(start: 4),
child: Text(
"company_name",
// textAlign: TextAlign.end,
),
),
),
],
),
),
Expanded(
child: Align(
alignment: AlignmentDirectional.centerStart,
heightFactor: 0.3,
child: Text(
"opportunity_title",
),
),
),
Expanded(
child: Row(
children: [
Expanded(
child: Icon(
Icons.calendar_today_outlined,
),
),
Expanded(
child: Padding(
padding: EdgeInsetsDirectional.only(start: 2),
child: Text(
"date",
),
),
),
],
),
),
Expanded(
child: Row(
children: [
Expanded(
child: Icon(
Icons.location_on_outlined,
),
),
Expanded(
child: Padding(
padding: EdgeInsetsDirectional.only(start: 2),
child: Text(
"location",
),
),
),
],
),
),
],
),
),
);
}),
),
output:
I created an ExpansionTile widget and on expanding it display a search textfield and list of book using ListView.Builder, but it sending me this error
RenderBox was not laid out: RenderRepaintBoundary#6b9d7 NEEDS-LAYOUT NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
package:flutter/…/rendering/box.dart:1
Failed assertion: line 1929 pos 12: 'hasSize'
The relevant error-causing widget was
ExpansionTile
here is the code
return SafeArea(
child: Container(
padding: EdgeInsets.all(16.0),
color: Color(int.parse(bodycolor)),
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Column(children: [
ExpansionTile(
leading: Icon(Icons.info_rounded,
color: HexColor("#5344ed")),
title: Text(
"Select Staff",
style: GoogleFonts.montserrat(
fontSize: 18.0,
fontWeight: FontWeight.bold,
color: HexColor("#5344ed")),
),
children: [
buildSearch(),
ListView.builder(
shrinkWrap: true,
itemCount: books.length,
itemBuilder: (context, index) {
final book = books[index];
return ListTile(
title: Text(book.title),
subtitle: Text(book.author),
);
},
)
]),
])),
),
Update:
I edit my code, it result this ouput.
please help if anyone know how to do this.
Try below code hope its help to you
Your List ->
List<String> data = [
"Counter No 1",
"Counter No 2",
"Counter No 3",
"Counter No 4",
];
Your Widget->
SingleChildScrollView(
child: Column(
children: [
// your other widget
buildSearch(),
ExpansionTile(
leading: Icon(
Icons.info_rounded,
),
title: Text(
"Select Staff",
),
children: [
ListView.builder(
shrinkWrap: true,
itemCount: data.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(data[index]),
subtitle: Text('Your Data'),
);
},
),
],
),
],
),
),
Your result screen before tap and other widget->
Your result screen after tap->
You also refer my answer here for ExpansionPanel
You just need to wrap your SafeArea in a Material widget
You need to wrap your SafeArea in a Material widget
Hi I'm working on a project that requires a ListView builder sadly when ever I try to put in that ListView builder this the error I get:
════════ Exception caught by rendering library ═════════════════════════════════
Vertical viewport was given unbounded height.
The relevant error-causing widget was
ListView
lib\screens\questionScreen.dart:50
════════════════════════════════════════════════════════════════════════════════
════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderViewport#18955 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1940 pos 12: 'hasSize'
here is my code:
Scaffold(
body: Container(
alignment: Alignment.center,
width: MediaQuery.of(context).size.width - 20,
padding: EdgeInsets.fromLTRB(20, 120, 20, 50),
child: Column(
children: [
Text(
questions[question.getListNumber()].soru,
style: TextStyle(fontSize: 40),
),
ListView.builder(
itemCount: 1,
itemBuilder: (BuildContext context, int index) {
return ListTile(
tileColor: Colors.white,
);
},
),
],
),
));
just set shrinkWrap: true property and wrap the ListView.builder with an Expanded, it will solve everything, or if you have any fixed size for the ListView.builder wrap in a SizedBox/Container with the fixed size.
You are giving infinite space to an unbounded widget. Your ListView is inside of the Column should be wrapped with a finite space widget such as container.
Scaffold(
body: Container(
alignment: Alignment.center,
width: MediaQuery.of(context).size.width - 20,
padding: EdgeInsets.fromLTRB(20, 120, 20, 50),
child: Column(
children: [
Text(
questions[question.getListNumber()].soru,
style: TextStyle(fontSize: 40),
),
Container(
child: ListView.builder(
itemCount: 1,
itemBuilder: (BuildContext context, int index) {
return ListTile(
tileColor: Colors.white,
);
},
),
),
],
),
));
When I am embedded InkWell in CustomScrollView like this:
child: SizedBox(
height: 500.0,
child: CustomScrollView(slivers: <Widget>[
InkWell(
onTap: () => {},
child: Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Container(
child: Text(
item.subName == "" ? "Comment" : item.subName,
style: Theme.of(context).textTheme.headline5.copyWith(
fontWeight: FontWeight.w600,
),
),
),
),
),
SliverPadding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
sliver: viewService.buildComponent("articlelist"),
)
]),
),
),
shows this error:
======== Exception caught by widgets library =======================================================
'package:flutter/src/widgets/framework.dart': Failed assertion: line 4345 pos 14: 'owner._debugCurrentBuildTarget == this': is not true.
The relevant error-causing widget was:
CustomScrollView file:///Users/dolphin/Documents/GitHub/cruise-open/lib/src/page/channel/channeldetail_component/view.dart:96:24
====================================================================================================
should I use InkWell in CustomScrollView? CustomScrollView could only use sliver component? what should I do to fix it?
Try wrapping InkWell in SliverToBoxAdapter
I'm trying to implement a ListView inside my drawer so when the screen orientation change i don't get an overflow error.
But as soon i add my ListView to the drawer it do not render anymore and i'm getting the errors :
I/flutter (13071): Another exception was thrown: Incorrect use of ParentDataWidget.
I/flutter (13071): Another exception was thrown: RenderBox was not laid out: RenderShrinkWrappingViewport#91f4f relayoutBoundary=up11 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
And i couldn't figure out hwy my code do not work. Doew someone has an idea why ?
Thank you !
This is my code :
Widget build(BuildContext context) {
return Drawer(
child: Container(
child: Flex(
direction: Axis.vertical,
children: <Widget>[
Align(
alignment: Alignment.bottomLeft,
child: Padding(
padding: const EdgeInsets.only(left: 40, bottom: 20),
child: Text(
"test",
overflow: TextOverflow.ellipsis,
maxLines: 1,
style: TextStyle(
color: Colors.white,
fontSize: 25,
),
),
),
),
Expanded(
child: ListView(
shrinkWrap: true,
children: <Widget>[],
),
)
],
),
),
);
}