Error: Renderbox Was Not Laid out: Needs-Paint Needs-Compositing-Bits-Update
I Am Having Problem Using Singlechildscrollview in This Way, I Don't No What Is Wrong, I Keep Getting This Error. If Add the Singlechildscrollview the Page...
i am having problem using SingleChildScrollView in this way, i dont no what is wrong, i keep getting this error.
If add the SingleChildScrollView the page will be blank(will not show all the widget)but if i remove the SingleChildScrollView, the page will show.
RenderBox was not laid out: RenderPadding#583c0 relayoutBoundary=up1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart': Failed assertion: line 1929 pos 12: 'hasSize
The relevant error-causing widget was Scaffold Scaffold:file:///Users/mac/Documents/Uneleap-Platform-master/lib/screens/Pages/forum/forum.dart:25:12
here is the code
SafeArea(
minimum: EdgeInsets.only(left: 25.0, right: 20.0, top: 10.0),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
WidgetForum(
details: 'The Get Is Not Geting together ?',
name: 'Nina Simon',
url: 'assets/dashboard_pic.png',
),
SizedBox(
height: 5,
),
WidgetForum(
details:
'''Notes is designed for whatever’s on your mind.\nJot down your thoughts. Download Notes.\nThere is something wonderful in writing. \nThe Get Is Not Getting Together?''',
name: 'James Nugar',
url: 'assets/dashboard_pic.png',
),
Text(
'Topics',
style: TextStyle(
fontSize: 35,
),
),
Expanded(
child: ListView.separated(
scrollDirection: Axis.horizontal,
separatorBuilder: (_, inedex) => SizedBox(
width: 20,
),
itemCount: topics.length,
itemBuilder: (context, index) {
return Container(
height: 50,
width: 100,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(15),
image: DecorationImage(
image: AssetImage('assets/saved_2.png'),
fit: BoxFit.fill,
),
),
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Align(
alignment: Alignment.bottomLeft,
child: Text(
topics[index].schoolNmae!,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
)
],
),
);
}),
),
WidgetForum(
details:
'''Notes is designed for whatever’s on your mind.\nJot down your thoughts. Download Notes.\nThere is something wonderful in writing. \nThe Get Is Not Getting Together?''',
name: 'Sam Ajayi',
url: 'assets/dashboard_pic.png',
),
],
),
),
),
// bottomSheet:
floatingActionButton: FloatingActionButton(
onPressed: () {
Scaffold.of(context).showBottomSheet<void>((BuildContext context) {
return Container(
height: 250,
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
),
),
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 50,
horizontal: 15.0,
),
child: Column(
children: [
Row(
children: [
Icon(
CustomIcons.answers_forum,
color: Colors.grey,
),
SizedBox(
width: 10,
),
Text(
'Post',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
color: Colors.white,
),
)
],
),
Padding(
padding: const EdgeInsets.only(right: 120.0),
child: Divider(
thickness: 2,
color: Colors.white,
),
),
Row(
children: [
Icon(
CustomIcons.create_forum,
color: Colors.grey,
),
SizedBox(
width: 10,
),
Text(
'Create Forum',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
color: Colors.white,
),
)
],
),
Align(
alignment: Alignment.bottomRight,
child: GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Container(
height: 70,
width: 70,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
child: Center(
child: Icon(Icons.add),
),
),
),
)
],
),
),
);
});
},
child: Icon(Icons.add),
),
);
}
}
class WidgetForum extends StatefulWidget {
final String? name;
final String? details;
final String? url;
WidgetForum(
{Key? key, required this.name, required this.details, required this.url})
: super(key: key);
@override
_WidgetForumState createState() => _WidgetForumState();
}
class _WidgetForumState extends State<WidgetForum> {
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Container(
height: 50,
width: 50,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(widget.url!),
fit: BoxFit.fill,
),
),
),
SizedBox(
width: 5,
),
Text(
widget.name!,
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25),
)
],
),
PopupMenuButton(
color: Colors.black,
offset: Offset(0, 40),
itemBuilder: (_) => <PopupMenuItem<String>>[
new PopupMenuItem<String>(
child: Center(
child: Text(
'Fellow',
style: TextStyle(
color: Colors.white,
),
),
),
),
new PopupMenuItem<String>(
child: Center(
child: Text(
'Block',
style: TextStyle(
color: Colors.white,
),
),
),
),
new PopupMenuItem<String>(
child: Center(
child: Text(
'Report',
style: TextStyle(
color: Colors.white,
),
),
),
),
],
child: Container(
height: 20,
width: 20,
child: SvgPicture.asset('assets/library_pre.svg'),
),
),
],
),
SizedBox(height: 18),
Text(
widget.details!,
style: TextStyle(fontSize: 15),
),
SizedBox(height: 18),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Icon(
CustomIcons.icons8_up_2_11,
color: Colors.red,
),
Text('36'),
Icon(
CustomIcons.icons8_down,
color: Colors.grey,
),
Icon(
CustomIcons.answers_forum,
color: Colors.grey,
),
Text('3')
],
),
Text('Sep 2, 2020')
],
),
Divider(
thickness: 1,
)
],
);
}
}
10 Answers
You cannot use Expanded in Column if it has a parent SingleChildScrollView because When you use column it tries to be in screen height and when use expanded inside, The column will allocate remaining space to the child of the expanded widget, Now if you use SingleChildScrollView It will try to expand(by direction, vertically in your case) as long as possible but as you're using the Expanded which tries to take remaining space, So it goes infinite thus throws that error,
So Either remove SingleChildScrollView and use Column and expanded or remove the Expanded and Use SingleChildScrollView also make sure ShrinkWrap in ListView to true.
Column(
children: [
Text(
'Hello, World!',
style: Theme.of(context).textTheme.headline4,
),
Container(
height: 50,
width: 200,
color: Colors.amber,
child: const Text('Random widget'),
),
Expanded(
child: ListView.separated(
shrinkWrap: true,
itemCount: 20,
separatorBuilder: (_, __) => const Divider(),
itemBuilder: (context, int index) {
return ListTile(
title: Text('Item at $index'),
);
},
),
)
],
);
Or to Scroll all the widgets You can do using SingleChildScrollView
Remove the
Expandedwidget here.
SingleChildScrollView(
child: Column(
children: [
Text(
'Hello, World!',
style: Theme.of(context).textTheme.headline4,
),
Container(
height: 50,
width: 200,
color: Colors.amber,
child: const Text('Random widget'),
),
ListView.separated(
shrinkWrap: true,
itemCount: 20,
separatorBuilder: (_, __) => const Divider(),
itemBuilder: (context, int index) {
return ListTile(
title: Text('Item at $index'),
);
},
),
],
),
);
Wrap it in a Container and add a height to it. Fixed it for me.
I solved the issue by enclosing the Column widget in a Container widget that has a set width and height
This code were raising the similar error
Column(children: [
Expanded(
child: CarouselSlider(
items: imageSliders,
carouselController: _controller,
options: CarouselOptions(
autoPlay: true,
enlargeCenterPage: true,
aspectRatio: 2.0,
onPageChanged: (index, reason) {
setState(() {
_current = index;
});
}),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: Provider.of<Products>(context, listen: false).product.productImages.asMap().entries.map((entry) {
return GestureDetector(
onTap: () => _controller.animateToPage(entry.key),
child: Container(
width: 12.0,
height: 12.0,
margin: EdgeInsets.symmetric(vertical: 8.0, horizontal: 4.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: (Theme.of(context).brightness == Brightness.dark
? Colors.white
: Colors.black)
.withOpacity(_current == entry.key ? 0.9 : 0.4)),
),
);
}).toList(),
),
]),
To solved this, I remove the Expand Widget from it. Updated Code
Column(children: [
CarouselSlider(
items: imageSliders,
carouselController: _controller,
options: CarouselOptions(
autoPlay: true,
enlargeCenterPage: true,
aspectRatio: 2.0,
onPageChanged: (index, reason) {
setState(() {
_current = index;
});
}),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: Provider.of<Products>(context, listen: false).product.productImages.asMap().entries.map((entry) {
return GestureDetector(
onTap: () => _controller.animateToPage(entry.key),
child: Container(
width: 12.0,
height: 12.0,
margin: EdgeInsets.symmetric(vertical: 8.0, horizontal: 4.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: (Theme.of(context).brightness == Brightness.dark
? Colors.white
: Colors.black)
.withOpacity(_current == entry.key ? 0.9 : 0.4)),
),
);
}).toList(),
),
]),
Don't use Expanded widget inside the SingleChildScrollView, just remove Expanded widget it is starts working for me.
You are using 2 scrolling widgets which is causing this issue. Column and Expanded can't be used while using SingleChildScrollView.
I encountered the same issue before, to fix it, remove the Expanded widget and set shrinkWrap: true, in the listview.seperated()widget
You cannot use Expanded in Column if it has a parent SingleChildScrollView because When you use column it tries to be in screen height and when use expanded inside, The column will allocate remaining space to the child of the expanded widget, Now if you use SingleChildScrollView It will try to expand(by direction, vertically in your case) as long as possible but as you're using the Expanded which tries to take remaining space, So it goes infinite thus throws that error,
So Either remove SingleChildScrollView and use Column and expanded or remove the Expanded and Use SingleChildScrollView also make sure ShrinkWrap in ListView to true.
I have found the same problem. but in my case I was trying to provide row of widgets for trailing property of the listTile class .and I solve it by wrapping the row with container and set its width.
In one case, I got the same error.
When I scrolled to top of the log message, I found out the issue in below widget.I have wrapped the Row with IntrinsicHeight widget.
IntrinsicHeight(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: []));
On removing IntrinsicHeight widget, it solved.
Using Column inside SingleChildScrollView throws this error since Column has an infinite height. The same happens with ListView if you add Column as one of its direct children.
This is how I nest my scrollable content instead:
SafeArea(
child: ListView(
children: [
Text('Hello World!'),
SizedBox(height: 100,
Text('Put your long text here to test'),
]
)
);
And it worked for me!
You're welcome. :)
Chloe Bennett explores the intersection of pop culture, streaming entertainment, digital trends, and contemporary lifestyle. Her weekly commentary reaches thousands of culture enthusiasts.
