Why this code is not correct?
I have this error:
RenderBox was not laid out: RenderRepaintBoundary#681d3 relayoutBoundary=up1 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'
The relevant error-causing widget was
Scaffold
lib…\rank\rankView.dart:23
Should I define size for scaffold?
SafeArea(
child: Scaffold(
resizeToAvoidBottomInset: false,
body: SingleChildScrollView(
child: Stack(children: <Widget>[
Positioned(
top: 550,
left: 8,
right: 8,
bottom: 0,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
for (final result in controller.results)
Container(height: 50, color: Colors.black),
]))
Why you are using scaffold inside a safearea. If you have this as a screen. they you can simply return a scaffold and add safearea as a child of scaffold.
return Scaffold(
body: SafeArea(), );
like this
You are using stack to position inside a scrollview. I don't think that's a good way. as you have only one widget inside a stack.
So better you can use container position it according to. and then add a child column to the container.
So your code might look like this,
Scaffold(
resizeToAvoidBottomInset: false,
body: SafeArea(
child: SingleChildScrollView(
child: Container(
//you need to position from the top 550 and left right 8 units
//that you can do by the margin or padding:
margin: EdgeInsets.only(top: 550, left: 8, right: 8),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
for (final result in controller.results)
Container(height: 50, color: Colors.black),
],
),
),
),
),
);
That should work perfectly.
Related
The following assertion was thrown during paint():
RenderBox was not laid out: RenderRepaintBoundary#09022 relayoutBoundary=up1 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1979 pos 12: 'hasSize'
The following assertion was thrown during performResize():
Vertical viewport was given unbounded height.
Viewports expand in the scrolling direction to fill their container. In this case, a vertical viewport was given an unlimited amount of vertical space in which to expand. This situation typically happens when a scrollable widget is nested inside another scrollable widget.
If this widget is always nested in a scrollable widget there is no need to use a viewport because there will always be enough vertical space for the children. In this case, consider using a Column instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size the height of the viewport to the sum of the heights of its children.
Hello everyone, this has already been applied before, everything worked, but now I'm getting an error that my list gets an unlimited height. What is the problem?
In Flowers.shoppingBasket - an array consisting of words (pieces 5 +-)
Flowers.shoppingBasket = await SharedPreferencesUtil.getData<StringList>("header");
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Center(
child: Column (
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 500,
height: 650,
child:
ListView.builder(
controller: controller,
padding: EdgeInsets.all(5),
itemCount: Flowers.shoppingBasket!.length,
itemBuilder: (context, index) {
if (index < Flowers.shoppingBasket!.length) {
return Container(
padding: EdgeInsets.all(5),
margin: EdgeInsets.all(2),
decoration: const BoxDecoration(
border: Border(bottom: BorderSide(color: Colors.black))
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 200,
child: Column(
children: [
Container(
margin: EdgeInsets.all(5),
child: Text(' ${Flowers.shoppingBasket?[index]}', style: TextStyle(fontSize: 15),),
),
],
),
),
],
),
);
} else {
............
}
}
)
You missed to add shrinkwrap in listview
ListView.builder(
shrinkWrap: true,
)
Wrap your ListView.builder with Expanded widget.
Expanded(
child: ListView.builder(
padding: EdgeInsets.all(5),
I will recommend to check this video
you can wrap your Listview.builder in Expanded widget to let listview take the all space.
In TabBarView -> Column, Iam getting this exception A RenderFlex overflowed by 120 pixels on the bottom.
while scrolling, It happens only on the particular part/container: TabBarView -> Column -> Container.
here is an image for better understanding sample image
here is the code for tabView.dart:
class TabView extends StatelessWidget {
List<Category> categories = [
];
final TabController tabController;
TabView({Key key, this.tabController}) : super(key: key);
#override
Widget build(BuildContext context) {
print(MediaQuery.of(context).size.height / 9);
return TabBarView(
physics: NeverScrollableScrollPhysics(),
controller: tabController,
children: <Widget>[
Column( **//Exception here**
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Container(
margin: EdgeInsets.all(8.0),
height: MediaQuery.of(context).size.height/9,
width: MediaQuery.of(context).size.width,
// padding: EdgeInsets.only(top: 4.0),
child: ListView.builder(
//shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: categories.length,
itemBuilder: (_, index) => CategoryCard(
category: categories[index],
)),),
SizedBox(
height: 16.0,
),
Flexible(child: RecommendedList()),
],
),
Column(children: <Widget>[
SizedBox(
height: 16.0,
),
Flexible(child: RecommendedList())
]),
Column(children: <Widget>[
SizedBox(
height: 16.0,
),
Flexible(child: RecommendedList())
]),
Column(children: <Widget>[
SizedBox(
height: 16.0,
),
Flexible(child: RecommendedList())
]),
Column(children: <Widget>[
SizedBox(
height: 16.0,
),
Flexible(child: RecommendedList())
]),
]);
}
}
code for recommendedList.dart:
class RecommendedList extends StatelessWidget {
List<Product> products = [....];
#override
Widget build(BuildContext context) {
return Column( **//Exception here**
children: <Widget>[
Container(
height: 20,
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
IntrinsicHeight(
child: Container(
margin: const EdgeInsets.only(left: 16.0, right: 8.0),
width: 4,
color: Colors.lightBlue,
),
),
Center(
child: Text(
'Recommended',
style: TextStyle(
color: darkGrey,
fontSize: 16.0,
fontWeight: FontWeight.bold),
)),
],
),
),
Flexible(
child: Container(),
),//
],
);
}
}
These 2 classes are used in main page, here is the code:
return Scaffold(
resizeToAvoidBottomPadding: false,
bottomNavigationBar: CustomBottomBar(controller: bottomTabController),
body: CustomPaint(
painter: MainBackground(),
child: TabBarView(
controller: bottomTabController,
physics: NeverScrollableScrollPhysics(),
children: <Widget>[
SafeArea(
child: NestedScrollView(
headerSliverBuilder:
(BuildContext context, bool innerBoxIsScrolled) {
// These are the slivers that show up in the "outer" scroll view.
return <Widget>[
SliverToBoxAdapter(
child: appBar,
),
SliverToBoxAdapter(
child: topHeader, //child: ParallaxMain(),
),
SliverToBoxAdapter(
child: ProductList(
products: products,
),
),
SliverToBoxAdapter(
child: ProductList2(),
),
SliverToBoxAdapter(
child: tabBar,
),
];
},
body: Container(
child: TabView(
tabController: tabController,
),
//: MediaQuery.of(context).size.height/10,
),
),
),
CategoryListPage(),
CheckOutPage(),
ProfilePage()
],
),
),
);
and here is the exception i got:
A RenderFlex overflowed by 104 pixels on the bottom.
The relevant error-causing widget was:
Column file:///E:/arm%20dataset/flutter_ecommerce_template-m/lib/screens/main/components/tab_view.dart:59:11
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#7b505 OVERFLOWING
... needs compositing
... parentData: <none> (can use size)
... constraints: BoxConstraints(w=411.4, h=13.1)
... size: Size(411.4, 13.1)
... direction: vertical
... mainAxisAlignment: start
... mainAxisSize: min
... crossAxisAlignment: center
... verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════════════════════════
════════ (2) Exception caught by rendering library ═════════════════════════════════════════════════
A RenderFlex overflowed by 19 pixels on the bottom.
The relevant error-causing widget was:
Column file:///E:/arm%20dataset/flutter_ecommerce_template-m/lib/screens/main/components/recommended_list.dart:37:12
════════════════════════════════════════════════════════════════════════════════════════════════════
Please help me out.
Use ListView instead of Column should help.
Did you try using wrapping your Column with SingleChildScrollView widget like this?
SingleChildScrollView(
child: Column(
children: <Widget>[
Wrapping the Column widget with SingleChildScrollview should work.. Let me know if it worked for you..
Can anyone help me with this exception that I keep running into? I am not sure what attempt next in order to fix the overflow as the panel expands. I've tried wrapping it into a flexible widget but that doesn't seem to fix the issue.
Here is my exception:
════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 68 pixels on the bottom.
The relevant error-causing widget was:
Column file:///Users/selorm/AndroidStudioProjects/flutter_master/lib/src/widgets/weather_widget.dart:17:14
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#8829e relayoutBoundary=up1 OVERFLOWING
... needs compositing
... parentData: offset=Offset(0.0, 0.0) (can use size)
... constraints: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=410.6)
... size: Size(411.4, 410.6)
... direction: vertical
... mainAxisAlignment: center
... mainAxisSize: max
... crossAxisAlignment: center
... verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════════════════════════
Here is my code:
#override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
//flex: 2,
//fit: FlexFit.loose,
child: Text(
this.weather.cityName.toUpperCase(),
style: TextStyle(
fontWeight: FontWeight.w900,
letterSpacing: 5,
color: AppStateContainer.of(context).theme.accentColor,
fontSize: 25),
),
),
SizedBox(
height: 20,
),
Flexible(
//flex: 1,
child:Text(
this.weather.description.toUpperCase(),
style: TextStyle(
fontWeight: FontWeight.w100,
letterSpacing: 5,
fontSize: 20,
color: AppStateContainer.of(context).theme.accentColor),
),
),
WeatherSwipePager(weather: weather),
Padding(
child: Divider(
color:
AppStateContainer.of(context).theme.accentColor.withAlpha(50),
),
padding: EdgeInsets.all(10),
),
ForecastHorizontal(weathers: weather.forecast),
Padding(
child: Divider(
color:
AppStateContainer.of(context).theme.accentColor.withAlpha(50),
),
padding: EdgeInsets.all(10),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ValueTile("wind speed", '${this.weather.windSpeed} m/s'),
Padding(
padding: const EdgeInsets.only(left: 15, right: 15),
child: Center(
child: Container(
width: 1,
height: 30,
color: AppStateContainer.of(context)
.theme
.accentColor
.withAlpha(50),
)),
),
ValueTile(
"sunrise",
DateFormat('h:m a').format(DateTime.fromMillisecondsSinceEpoch(
this.weather.sunrise * 1000))),
Padding(
padding: const EdgeInsets.only(left: 15, right: 15),
child: Center(
child: Container(
width: 1,
height: 30,
color: AppStateContainer.of(context)
.theme
.accentColor
.withAlpha(50),
)),
),
ValueTile(
"sunset",
DateFormat('h:m a').format(DateTime.fromMillisecondsSinceEpoch(
this.weather.sunset * 1000))),
Padding(
padding: const EdgeInsets.only(left: 15, right: 15),
child: Center(
child: Container(
width: 1,
height: 30,
color: AppStateContainer.of(context)
.theme
.accentColor
.withAlpha(50),
)),
),
ValueTile("humidity", '${this.weather.humidity}%'),
]
),
],
),
);
}
}
You have to two quick options:
use ListView() with shrinkWrap set to true
#override
Widget build(BuildContext context) {
return ListView(
shrinkWrap: true,
children: <Widget>[
// Children
],
);
}
wrap Column() with singleChildScrollView()
#override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
// Children
],
),
);
}
That's it
I am unable to successfully make Stack widget to work when i place it as a child of Column widget. My intention is to mix the Stack layout and Column/Row layout methods to reap the benefits of both approach. When i run the code the compile gave a scanty error message:
════════ (2) Exception caught by rendering library
═════════════════════════════════════════════════ A RenderFlex
overflowed by Infinity pixels on the bottom. User-created ancestor of
the error-causing widget was: Scaffold
file:///C:/Users/admin/AndroidStudioProjects/music_app/lib/main.dart:240:12
Blank white page was returned when i ran the code. What am i doing wrong? The following is the code snippet:
body: Column(
children: <Widget>[
Container(
child: Stack(
children: <Widget>[
Positioned(
top: 100,
left: 50,
child: Container(
child: Text("Text is Located here"),
),
),
],
),
)
],
),
Any help would be appreciated. Thanks
The error is occuring because you wrapped the Stack widget with Container which expands to the entire screen, if not provided height or width. So, just provide a custom height to the Container that will fix the overflow error. Working code below:
body: Column(
children: <Widget>[
Container(
color: Colors.blue,
height: 200,
child: Stack(
children: <Widget>[
Positioned(
top: 100,
left: 50,
child: Container(
child: Text("Text is Located here"),
),
),
],
),
)
],
),
I provided a test height. You may need to provide height or width per your requirement.
Hope this answers your question.
Please try below code:-
body: Column(
children: <Widget>[
Positioned(
top: 100,
left: 50,
child: Container(
child: Text("Text is Located here"),
),
),
],
),
I`m new in flutter framework and I want to use CustomLists.
My (body:) I wants to add a listviewBuilder into a Column but I give an empty page. if I use only listView in body part every things is fine.
Here is my Widget:
Widget _buildListView() {
return ListView.builder(itemBuilder: (BuildContext context, int index) {
return Dismissible(
key: Key('ke'),
onDismissed: (DismissDirection direction) {
if (direction == DismissDirection.endToStart) {
print('Swiped end to start');
} else if (direction == DismissDirection.startToEnd) {
print('Swiped start to end');
} else {
print('Other swiping');
}
},
background: Container(
color: Colors.red,
),
child: Container(
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Column(children: <Widget>[
Row(
children: <Widget>[
Container(
margin: EdgeInsets.symmetric(
horizontal: 8.0, vertical: 2.0),
padding: EdgeInsets.all(4.0),
color: Colors.red,
child: Text('12'),
),
SizedBox(
width: 8.0,
),
Text('135'),
],
)
]),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
children: <Widget>[
Container(
color: Colors.green,
width: 15,
height: 10,
),
SizedBox(
width: 5,
),
Text('120'),
SizedBox(
width: 5,
),
Container(
color: Colors.yellow,
width: 15,
height: 10,
),
],
)
]),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text('30'),
])),
],
),
Divider()
],
)),
);
},itemCount: 10,);
}
I get this errors:
The following assertion was thrown during performResize():
I/flutter (14466): Vertical viewport was given unbounded height.
I/flutter (14466): Viewports expand in the scrolling direction to fill their container.In this case, a vertical
I/flutter (14466): viewport was given an unlimited amount of vertical space in which to expand. This situation
I/flutter (14466): typically happens when a scrollable widget is nested inside another scrollable widget.
I/flutter (14466): If this widget is always nested in a scrollable widget there is no need to use a viewport because
I/flutter (14466): there will always be enough vertical space for the children. In this case, consider using a Column
I/flutter (14466): instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size
I/flutter (14466): the height of the viewport to the sum of the heights of its children.
add shrinkWrap property true for listview.
ListView.builder(
shrinkWrap:true,
itemBuilder: (BuildContext context, int index) {
return Container();
});
you have to wrap your ListView in a container that has the specified width and height values.
for example, wrap the ListView in the Container with height and with values or wrap it to an Expanded widget to fill the entire space its parent.
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: ListView.builder() // your list view builder widget
)
or
Expanded(
child: ListView.builder() // your list view builder widget
)
note that you should use the Expanded widget inside a flex widget that has specified the width and height values. like Column, Row , ...
Also, you should set the shrinkWrap value to true when using ListView inside another ListView widget.