I have a vertical ListView inside a Card inside a Row, next to another widget, which can have different heights. Now I would like the Card to stretch to fill all the space of the Row. Here is an example:
#override
Widget build(BuildContext context) {
return Row(
children: [
Card(
child: WidgetWithDynamicHeight(),
),
Card(
child: ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) => MyListTile(items[index]),
),
),
]
);
}
Now, I could wrap everything with a SizedBox and set a fixed height, but that is not what I want. I want the Row to be as big as the first Widget (WidgetWithDynamicHeight), and the second card to have the exact same size. How can I implement that?
Try Intrinsic height. It will build all children at the same height of the tallest child
return IntrinsicHeight(
child: Row(
children: [
Card(
child: WidgetWithDynamicHeight(),
),
Card(
child: ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) => MyListTile(items[index]),
),
),
]
)
);
More about IntrinsicHeight
Related
I have this code:
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => addProductClass()),
);
},
child: const Icon(
Icons.add,
color: Colors.black,
),
),
body: Column(children: [
FutureBuilder(
future: getDocId(),
builder: (context, snapshot) {
return ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: dataIDs.length,
itemBuilder: (BuildContext context, int index) {
return GetProduct(
documentId: dataIDs[index],
);
},
);
}),
Text("text")
]));
}
And i want to use scrollDirection: Axis.horizontal for listview. When I insert this value, I got the error:
Horizontal viewport was given unbounded height
Viewports expand in the cross axis to fill their container and '
'constrain their children to match their extent in the cross axis. '
'In this case, a horizontal viewport was given an unlimited amount of '
'vertical space in which to expand
How can I resolve this?
Easiest way is to provide a fixed height, either using a SizedBox or a ConstrainedBox with a maxHeight set.
Try to set shrinkwrap to true for listview builder
here is an example of listview builder in horizontal mode :
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
scrollDirection: Axis.horizontal,
itemCount: 10,
itemBuilder: (BuildContext context, int index){
return Container( margin: EdgeInsets.all(5), height:10, width:20, color:black);
}
),
),
hope it will help !
I am facing this
Exception :
FlutterError (RenderViewport does not support returning intrinsic
dimensions. Calculating the intrinsic dimensions would require
instantiating every child of the viewport, which defeats the point of
viewports being lazy. If you are merely trying to shrink-wrap the
viewport in the main axis direction, consider a
RenderShrinkWrappingViewport render object (ShrinkWrappingViewport
widget), which achieves that effect without implementing the intrinsic
dimension API.)
When i add ProductsWidget the Exception occurs.
the code of Products Widget is:
class ProductsWidget extends GetResponsiveView<HomeTabController> {
#override
Widget build(BuildContext context) {
return ListView.builder(
shrinkWrap: true,
itemCount: 3,
// padding: EdgeInsets.symmetric(vertical: 20),
physics: NeverScrollableScrollPhysics(),
itemBuilder: (context, index) => Column(
children: [
Row()])}}
the calling code is:
body: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: constraints.maxHeight,
),
child: IntrinsicHeight(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
// flex: 1,
child: HomeAppBar()),
// listView
// i made shrinkWrap=true
// neverScroll
Flexible(fit: FlexFit.tight, child: ProductsWidget()),
],
),
),
),
);
}),
Try wrapping your ProductsWidget in a SizedBox and give it a width (width: double.maxFinite,) and potentially height.
I had a similar issue and I found the following post helpful: flutter listview with radio not showing in alertDialog
That is because ListView builds each child lazily. You can use a Column wrapped in a SingleChildScrollView instead of the ListView.
Replace SingleChildScrollView with CustomScrollView like this:
return Scaffold(
appBar: AppBar(
title: Text('Expanded Scrollable'),
),
body: CustomScrollView(
physics: AlwaysScrollableScrollPhysics(),
slivers: [
SliverFillRemaining(
fillOverscroll: true,
child: Column(
children: <Widget>[
Text('Hello ... '),
Divider(
height: 2,
),
Expanded(
child: Container(color: Colors.red,), // replace this Container with your listview
)
],
),
)
],
),
);
I am trying to build a Nested listview but getting "RenderFlex children have non-zero flex but incoming height constraints are unbounded" error with below code.
Layers are like this...
Each item of a horizontal ListView has a Text widget and a ListView widget.
At the second level, each item of vertical ListView contains again a Text widget and a ListView.
At the third level, each item of the ListView contains a Text widget.
-Horizontal ListView
- Person's Name
- ListView
- Relation Name
- ListView
- Person's Name
Thanks in advance.
person.relations is a Map<String, List<Person>>
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Relationship Explorer"),
),
body: SafeArea(
child: BlocBuilder<RelationCubit, CubitState>(
bloc: _cubit,
builder: (_, state) {
if (state is RelationSuccessState) {
return ListView.builder(
scrollDirection: Axis.horizontal,
itemBuilder: (_, outerIndex) =>
_relationTreeView(context, outerIndex),
itemCount: _cubit.people.length,
);
} else {
return WaitWidget();
}
},
),
),
);
}
Widget _relationTreeView(BuildContext context, int outerIndex) {
var person = _cubit.people[outerIndex];
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(person.displayName ?? ''),
Expanded(
child: Container(
width: MediaQuery.of(context).size.width,
child: ListView.builder(
shrinkWrap: true,
physics: ClampingScrollPhysics(),
itemCount: person.relations?.length,
itemBuilder: (_, index) {
var persons = person.relations?[index];
return Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(person.relations!.keys.elementAt(index)),
Expanded(
child: Container(
width: MediaQuery.of(context).size.width,
child: ListView.builder(
shrinkWrap: true,
physics: ClampingScrollPhysics(),
itemCount: persons.length,
itemBuilder: (_, index) {
var innerPerson = persons[index];
return Text(innerPerson.displayName ?? '');
},
),
),
)
],
);
},
),
),
),
],
);
}
Wrap the list view with a container and give a height.
I have several containiers inside a ListView which will result in a scrollable content within a page. Each container has a Column as child and within the Column I have a title and a divider, then the actual content.
I want one of the container to be something like:
Title
--------- (divider)
Scrollable content (most likely a ListView)
What I have so far:
Container(
height: 250,
child: Column(children: <Widget>[
Text('Title'),
Divider(),
SingleChildScrollView(
child: ListView.builder(
shrinkWrap: true,
itemCount: 15,
itemBuilder: (BuildContext context, int index) {
return Text('abc');
}
)
)
]
)
The thing is that I want the container to have a specific height, but I get an overflow pixel error.
Wrap your ListView with Expanded. Remove your SingleChildScrollView as ListView has its own scrolling behaviour. Try as follows:
Container(
height: 250,
child: Column(children: <Widget>[
Text('Title'),
Divider(),
Expanded(
child: ListView.builder(
shrinkWrap: true,
itemCount: 15,
itemBuilder: (BuildContext context, int index) {
return Text('abc');
}
),
)
]
))
Wrap your ListView.builder() widget inside a SizedBox() widget and specify available height after accommodating Title() widget.
Container(
height: 250,
child: Column(children: <Widget>[
Text('Title'),
Divider(),
SizedBox(
height: 200, // (250 - 50) where 50 units for other widgets
child: SingleChildScrollView(
child: ListView.builder(
shrinkWrap: true,
itemCount: 15,
itemBuilder: (BuildContext context, int index) {
return Text('abc');
}
)
)
)
]
)
You can also use Container() widget instead SizedBox() widget but only if needed.
SizedBox() is a const constructor where Container() widget is not, so SizedBox() allows the compiler to create more efficient code.
I want to create listview like this image. How can I achieve this using flutter?
Please do a favour if you know how to make it?
You need a List view widget and with builder which contains a card widget which has Row as child.
ListView :-
ListView.builder(
padding: EdgeInsets.all(10.0),
shrinkWrap: false,
itemCount: model.length,
itemBuilder: (BuildContext context, int index) {
return listItem(context, index);
},
List item :-
model is removed
Widget listItem(BuildContext context, int index) {
return Card(
child: Row(
children: <Widget>[
Container(margin: EdgeInsets.all(10),child: Text("1")),
Container(height: 20,width: 1,color: Colors.blue,),
Container(margin:EdgeInsets.all(10),child: Text("asdasd"))
],
),
);
}