Below is my Alertdialog:
return AlertDialog(
title: const Text('Choose Device'),
content: ListView.builder(
shrinkWrap: true,
itemCount: listDevices.length,
itemBuilder: (_, int index) => deviceList(listDevices[index]),
),
);
Below is deviceList function:
Widget deviceList(String strDevice) => SizedBox(
height: 150.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Row(
children: <Widget>[
const Icon(Icons.toys),
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Text(strDevice),
),
],
),
const SizedBox(
height: 20.0,
),
],
),
);
Its not displaying Listview and am getting error as:
The following assertion was thrown during paint():
RenderBox was not laid out: RenderPhysicalShape#aedc0 relayoutBoundary=up2
'package:flutter/src/rendering/box.dart':
Failed assertion: line 2001 pos 12: 'hasSize'
What might be the issue? Thanks.
You can use like this:
List<String> listDevices = <String>['iPhone 11', 'Samsung M22f', 'MacBook Pro', 'Xiaomi note 12 pro'];
I opened AlertDialog box when tap on ElevatedButton like this:
ElevatedButton(
onPressed: () {
showDialog(
context: context,
builder: (ctx) => AlertDialog(
title: const Text("Alert Dialog Box"),
content: SizedBox(
// height: 250,
width: 150,
child: ListView.builder(
shrinkWrap: true,
itemCount: listDevices.length,
itemBuilder: (_, int index) => deviceList(listDevices[index]),
),
),
),
);
//onTap function define here
},
child: const Text('Send Message'),
),
I don't changes your deviceList widget
And i clearly show AlertDialogBox with ListView. I hope it's help you.
Happy Coding :}
Try to wrap ListView.builder in a SizedBox with a specific height and width.
AlertDialog(
title: const Text('Choose Device'),
content: SizedBox(
height: 300,
width: 300,
child: ListView.builder(
shrinkWrap: true,
itemCount: listDevices.length,
itemBuilder: (_, int index) =>
deviceList(listDevices[index]),
),
),
),
Related
I am using the flutter package infiniteListView in order to get a horizontal list of infinitely scrolling list of days that users can click on.
This is the following error I am getting
The following assertion was thrown during performLayout():
RenderFlex children have non-zero flex but incoming height constraints are unbounded.
When a column is in a parent that does not provide a finite height constraint, for example
if it is in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting aflex
on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining
space in the vertical direction.
Here is my code
Widget build(BuildContext context) {
return Container(
// Leave margin here for top bar
color: Colors.grey[900],
padding: EdgeInsets.fromLTRB(10.0, 20.0, 10.0, 5.0),
child: (Column(children: [
Expanded(
child: InfiniteListView.builder(
scrollDirection: Axis.horizontal,
controller: _infiniteController,
anchor: 0.5,
itemBuilder: (BuildContext context, int index) {
return Material(
child: InkWell(
onTap: () {},
child: ListTile(
title: Text('Item #$index'),
subtitle: Text('Subtitle $index'),
trailing: const Icon(Icons.chevron_right),
),
),
);
}),
),
])));
}
Solution 1:
Column has Unbounded Constriants (Infinite Height). Wrap your
InfiniteLiewView into a SizedBox(height 300: child:
//InfiniteListView);
Solution 2:
If that does not work, Pass shrinkWrap: true to InfiniteLiewView,
Solution 3:
Wrap you Column into a SizedBox(height 400, child: //code) .
Try this out, Let me know then.
wrap your ListTile with Fixed width, ListTile by default takes full width(something like double.infinity). also our Axis.horizontal, will take double.infinity, and this is where errors come.
Widget build(BuildContext context) {
return Scaffold(
body: Container(
// Leave margin here for top bar
color: Colors.grey[900],
padding: EdgeInsets.fromLTRB(10.0, 20.0, 10.0, 5.0),
child: (Column(mainAxisSize: MainAxisSize.min, children: [
Expanded(
child: InfiniteListView.builder(
// itemCount: 222,
scrollDirection: Axis.horizontal,
controller: _infiniteController,
anchor: 0.5,
itemBuilder: (BuildContext context, int index) {
return Material(
child: InkWell(
onTap: () {},
child: SizedBox(
width: 100,
child: ListTile(
title: Text('Item #$index'),
subtitle: Text('Subtitle $index'),
trailing: const Icon(Icons.chevron_right),
),
),
),
);
},
),
),
])),
),
);
}
I want a Raisedbutton that appears after the Container.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Galeria clase 1'),
),
body: Container(padding: EdgeInsets.all(8), child: galeria(array)),
floatingActionButton: FloatingActionButton(
onPressed: _optionsDialogBox,
tooltip: 'Pick Image',
child: Icon(Icons.add_outlined),
),
);
}enter code here
I tried this but there is the next error -> RenderBox was not laid out: RenderFlex#02bd4 relayoutBoundary=up1
body: Column(children: <Widget>[
(Container(
padding: EdgeInsets.all(8),
child: galeria(
array,
),
)),
RaisedButton(
child: Text("Guardar red"),
onPressed: () {
safeNeuralNetwork();
},
),
]),
galeria Function
Widget galeria(List<Uint8List> array) {
return StaggeredGridView.countBuilder(
crossAxisCount: 2,
itemCount: array.length,
itemBuilder: (BuildContext context, int index) {
return ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Container(
color: Colors.deepPurple,
child: Column(
children: <Widget>[Image.memory(array[index])],
),
),
);
},
// staggeredTileBuilder: (int index) => new StaggeredTile.fit(1),
staggeredTileBuilder: (int index) => new StaggeredTile.fit(1),
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
);
}
StaggeredGridView (or nearly any ScrollView) widget can't work with unbounded (infinite) height like in your case. You can't have a Column widget and a ScrollView inside it without using Expanded or something like that. Why? Because you need something to limit the maximum height of that widget. In this case we will use an Expanded widget. So go and modify your code like this:
body: Column(
children: <Widget>[
Expanded(
child: Padding(
child: galeria(array),
padding: EdgeInsets.all(8.0),
),
),
RaisedButton(
onPressed: () {
safeNeuralNetwork();
},
child: Text("Guardar red"),
),
],
),
With this we basically said: "Hey, go and render this column but please, stick a RaisedButton at the bottom and use the remaining space for the StaggeredGridView.".
I have a widget ListView but still I can't scroll through the pictures. I tried replacing Column but still it didn't work for me. Is there any other option?
Also, when I wrap StreamBuilder with SingleChildScrollView I get following error:
RenderBox was not laid out: RenderRepaintBoundary#9fda5 relayoutBoundary=up11 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1702 pos 12: 'hasSize'
Here is my code:
StreamBuilder(
stream: Firestore.instance
.collection('userImage')
// .orderBy('date', descending: true)
.where('name', isEqualTo: name)
.snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData)
return Center(child: CircularProgressIndicator());
return ListView(
children: [
Row(
children: [
Text('$name'),
IconButton(
icon: Icon(
Icons.open_in_new,
size: 30,
color: Colors.grey,
),
onPressed: logout)
],
),
Row(
children: [
Image.asset(
'assets/like.png',
height: 30,
width: 30,
),
Image.asset(
'assets/donate.png',
height: 30,
width: 30,
),
Icon(
Icons.offline_bolt,
color: Colors.grey,
size: 36,
),
],
),
Padding(
padding: const EdgeInsets.only(
left: 100, right: 100, top: 50, bottom: 50),
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)),
child: SizedBox(
height: 50,
child: Center(
child: Text(
'order pics & clips',
style: TextStyle(color: Colors.white),
)),
),
onPressed: () {
print(name);
print(email);
print(account);
},
),
),
ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: snapshot.data.documents.length,
itemBuilder: (context, i) {
return Column(
children: [
ProfilePost(
snapshot.data.documents[i]['url'],
snapshot.data.documents[i]['likes'].toString(),
snapshot.data.documents[i]['donations']
.toString())
],
);
}),
],
);
}),
You could use the shrinkWrap: true property on the ListView() and ListView.builder() widgets so that the total size (height) of the listview is the sum of the heights of the children.
I have tried to return a list of widgets in horizontal direction, i want to expand widgets width dynamically. how can i achieve this. (Note: ListView.builder placed inside column)
ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: widget.playType.length,
itemBuilder: (BuildContext context, int index) {
return Flex(
direction: Axis.horizontal,
children: <Widget>[
Flexible(
child: InkWell(
onTap: () {},
child: Container(
padding: EdgeInsets.only(left: 10, right: 10),
color: colorSubMenuBg,
height: 45,
child: Align(
alignment: Alignment.center,
child: Text(
widget.playType[index],
style: CustomTextStyle.listTile4(context),
),
),
),
),
),
],
);
});
Expected output should be like this highlighted part:
Wrap Container( height: 70)in your ListViewBuilder()
like this
Container(
height: 70,
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: widget.playType.length,
itemBuilder: (BuildContext context, int index) {
return Flex(
direction: Axis.horizontal,
children: <Widget>[
Flexible(
child: InkWell(
onTap: () {},
child: Container(
padding: EdgeInsets.only(left: 10, right: 10),
color: colorSubMenuBg,
height: 45,
child: Align(
alignment: Alignment.center,
child: Text(
widget.playType[index],
style: CustomTextStyle.listTile4(context),
),
),
),
),
),
],
);
}),
);```
Actual working code, i removed flex from ListView.builder and added width for ListItems and ListView.
var buttonListWidth = MediaQuery.of(context).size.width;
Container(
height: 45,
width: buttonListWidth,
child: ListView.builder(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: widget.playType.length,
itemBuilder: (BuildContext context, int index) {
return InkWell(
onTap: () {
setState(() {});
},
child: Container(
color: colorSubMenuBg,
height: 45,
width: buttonListWidth / widget.playType.length,
child: Align(
alignment: Alignment.center,
child: Text(
widget.playType[index],
style: CustomTextStyle.listTile4(context),
),
),
),
);
}))
Try adding a Row over the ListView.builder and add mainAxisSize: MainAxisSize.min, property to that Row.
ItemExtent property of ListView.builder
itemExtent: MediaQuery.of(context).size.height / LENGHT,
I am developing a Flutter application and I want to dynamically adjust the height of the ListView.
I want the list to have a maximum height of 200. If the height is more than that, user will have to scroll to reach the bottom. If height is below 200, it will take only as much space as needed.
Preview of application: Screenshot. As you can see Restaurants nearby is pushed to the very bottom of the page. I want the ListView to only take height of 200 or less so that the content below isn't pushed to the bottom.
Here is my current code:
#override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Restaurants nearby',
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
Divider(),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text('Enter restaurant manually'),
onPressed: () {
print('Button pressed');
},
),
],
),
Flexible(
child: ListView.builder(
itemBuilder: (BuildContext context, int index) {
return ListTile(
leading: CircleAvatar(
backgroundColor: Colors.cyan,
),
title: Text('Test restaurant'),
subtitle: Text('80m'),
);
},
itemCount: 15,
),
),
Text(
'Restaurants nearby',
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
],
),
);
}
You are using Flexible widget, that's why your ListView expands. You have to change Flexible to ConstrainedBox and add shrinkWrap: true to your ListView.
ConstrainedBox(
constraints: BoxConstraints(maxHeight: 200, minHeight: 56.0),
child: ListView.builder(
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
return ListTile(
leading: CircleAvatar(
backgroundColor: Colors.cyan,
),
title: Text('Test restaurant'),
subtitle: Text('80m'),
);
},
itemCount: 15,
),
),
More info here: https://api.flutter.dev/flutter/widgets/ConstrainedBox-class.html
You can use LimitedBox
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(...),
Divider(),
Row(...),
LimitedBox(
maxHeight: 200.0,
child: ListView.builder(...),
),
Text(...),
],
),
Recommended solution in case when the incoming constraints are unbounded
Consider wrapping the ListView into this
LimitedBox(
maxHeight: 200,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
child: ListView.builder(
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
return ListTile(
leading: CircleAvatar(
backgroundColor: Colors.cyan,
),
title: Text('Test restaurant'),
subtitle: Text('80m'),
);
},
itemCount: _itemsCount,
),
),
]
)
),
Note that:
shrinkWrap of ListView is set to true
mainAxisSize of Column is set to MainAxisSize.min
maxHeight of LimitedBox is set to 200
A complete snippet:
import 'package:flutter/material.dart';
class DebugWidget extends StatefulWidget {
#override
_DebugWidgetState createState() => _DebugWidgetState();
}
class _DebugWidgetState extends State<DebugWidget> {
int _itemsCount = 1;
#override
Widget build(BuildContext context) {
Widget child = Container(
padding: EdgeInsets.all(10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Restaurants nearby',
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
Divider(),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text('Enter restaurant manually'),
onPressed: () {
print('Button pressed');
},
),
RaisedButton(
child: Text('+1'),
onPressed: () {
setState(() {
_itemsCount += 1;
});
},
),
RaisedButton(
child: Text('-1'),
onPressed: () {
setState(() {
_itemsCount -= 1;
});
},
),
],
),
LimitedBox(
maxHeight: 200,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
child: ListView.builder(
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
return ListTile(
leading: CircleAvatar(
backgroundColor: Colors.cyan,
),
title: Text('Test restaurant'),
subtitle: Text('80m'),
);
},
itemCount: _itemsCount,
),
),
]
)
),
Text(
'Restaurants nearby',
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
],
),
);
return Scaffold(
body: child,
);
}
}
I found a solution to this problem. you should wrap your ListView with LimittedBox or ConstraintBox and give them maxHeight and set shrinkWrap property of ListView to true. the solution would be something like this.
LimitedBox(
maxHeight: 200,
child: ListView.builder(
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
return ListTile(
leading: CircleAvatar(
backgroundColor: Colors.cyan,
),
title: Text('Test restaurant'),
subtitle: Text('80m'),
);
},
itemCount: 15,
),
),
I see that this question has never been answered only with giving a fixed height, so here is what works for me.
For some reason if you set the shrinkwrap to true it doesn't look like it is working but it does, the problem is in the padding settings of the ListView, set the padding to edgeinstets.zero. That fixes it for me.
Wrap inside a Flexible
ShrinkWrap true
Padding, zero
and if needed the column to MainAxisSize.min.
Hope it helps some people.
Example of my code:
Flexible(
child: Container(
decoration: BStyles.cardDecoration1,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const Text(
'PRODUCTION TASKS',
),
const SizedBox(
height: textVerticalSpacing,
),
Flexible(
child: ListView.builder(
itemCount: recentTasks.length,
padding: EdgeInsets.zero,
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
return TaskCard(
task: recentTasks[index],
widthInfo: MediaQuery.of(context).size.width * 0.6,
);
},
),
),
const SizedBox(
height: itemSpacing,
),
Align(
alignment: Alignment.centerRight,
child: InkWell(
onTap: () { },
child: const Text(
'View more',
),
),
),
const SizedBox(
height: textVerticalSpacing,
),
],
),
),
),
),
ConstrainedBox(
constraints: BoxConstraints(maxHeight: 200.0),
child: [your child here],
)
This make your child's height not bigger than 200.0
You can always size the ListView container as % of the viewport (assuming of course that the other widgets also are sized in the same manner):
return Container(
height: MediaQuery.of(context).size.height * 0.75,
child: ListView.builder(
itemBuilder: (ctx, index) {
return Card(...