i usually use ListView.builder but in this case im using list.map.toList() then now i need to limit the length of the item / itemCount but how ?
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: data
.map<Widget>(
(e) => card(e),
)
.toList(),
),
To limit the number of items displayed in the Row, you can use the take() method to create a new list with a limited number of items.
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: data
.map<Widget>((e) => card(e))
.take(5) // Limit the list to 5 items
.toList(),
)
You can use for loop with min from dart:math to solve this
Row(
mainAxisAlignment: MainAxisAlignment.start,
children:[
for(int i = 0; i < min(3, data.length); i++)
card(data[i]),
),
Related
what i am trying to is have containers widget to have unique id so that i can uniquely identify them i have tried :
Map<int,Container> box={
1:Container(),
2:Container(),
3:Container(),
};
Map<int,Widget> box={
1:Container(),
2:Container(),
3:Container(),
};
Column(
mainAxisAlignment: MainAxisAlignment.start,
children:<Widget> [
box[1],
],
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
children:[
box[1],
],
),
tried both
is there any way to do this .
I believe you are trying to use List<Widget>
Define:
List<Widget> list = [Container(), Container(), Container()];
Use:
Column(
children: [list[0]],
);
I am trying to create scrollable row that does not automatically center its items.
As you can see I have a row (that is scrollable via a SingleChildScrollView). However, the items are automatically centered by the SingleChildScrollView:
I want to be able to customize the alignment of the items to be either on the start or end. My code looks like this:
Widget buildHorizontalRow(List entries) {
var list = <Widget>[];
for (var entry in entries) {
list.add(Text(
entry.name,
));
}
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: list,
),
);
}
Note that when I remove the SingleChildScrollView completely, the items start on the left as expected. How do I make them start on the left and scrollable?
Update #1:
The parents of this row look like this:
Padding(
padding: const EdgeInsets.only(
left: 16.0, right: 16.0, bottom: 8.0, top: 8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [....
PS: Also please note that I do not want to use a ListView.
While using Column the default is crossAxisAlignment: CrossAxisAlignment.center,, using CrossAxisAlignment.start, solves the issue.
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
You can try this, it working from my side.
Widget buildHorizontalRow(List entries) {
var list = <Widget>[];
for (var entry in entries) {
list.add(Text(
entry.name,
));
}
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [Row(children:list),Expanded(child:Container(),),]
),
);
}
What does the tripple point expression mean?
Column(
children: [
Text('Header'),
...List.generate( // what does it mean?
question.options.length,
(index) => SizedBox(height: index),
),
],
),
It's a spread operator. You can read about it here.
Simply it makes code smaller and easy to read. Here is the analog of the code above:
final children = <Widget>[
Text('Header'),
];
children.addAll(List.generate(
question.options.length,
(index) => SizedBox(height: index),
));
Column(
children: children,
),
The spread operator adds all values from the list to another list.
main issue is i want to add some space between Rows and this Rows are children of SingleChildScrollView, my widget tree :
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
// first row with 3 column
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(),
Container(),
Container(),
],
),
Row(
// second row also with 3 column ans so on
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(),
Container(),
Container(),
//Row( third row also with 3 column ans so on
//Row( fourth row also with 3 column ans so on
// ....
],
),
],
),
),
i got the following out put :
so how to add more space to the widget SingleChildScrollView , so to expect that mainAxisAlignment:MainAxisAlignment.spaceBetween put some space between the rows , or how simply add a space between rows?
Things like SizedBox work great if you are happy with a fixed pixel gap. Spacer is another alternative, and is flexed, which may or may not be what you want, depending on what you have it nested under. If you prefer to work with relative sizes, I can also recommend FractionallySizedBox, which operates on a percentage of the area, and works great for responsive designs. If you wanted to have a 5% vertical gap, for example, you could express this as:
FractionallySizedBox(heightFactor: 0.05),
try between the rows
SizedBox(height:20),
final code
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
// first row with 3 column
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(),
Container(),
Container(),
],
),
SizedBox(height:20),
Row(
// second row also with 3 column ans so on
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(),
Container(),
Container(),
//Row( third row also with 3 column ans so on
//Row( fourth row also with 3 column ans so on
// ....
],
),
],
),
),
Insert a Padding widget.
Row(...),
Padding(padding: EdgeInsets.only(bottom: 10),
Row(...)
You can also use Spacer( ... . )
For me Padding is ok
Row(...),
SizedBox(width:20). // If want horizontal space use width for vertical use height
Row(...)
you can use SizedBox b/w Rows
I tried some other solutions to this like using asMap() and forEach but kept getting different errors. Like it was saying the return type of my ChartBar isn't a 'MapEntry', as defined by anonymous closure, or The expression here has a type of 'void', and therefore cannot be used.
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.end,
children: myList.map((data) {
return ChartBar(
///etc
}).toList(),
)
I want the index as well.
mirkancal's suggestion didn't work because Map.map returns another Map (and therefore the enumeration callback you pass it is expected to return a MapEntry).
You instead need to use Map.entries so that you can use Iterable.map instead to construct a List:
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.end,
children: myList.asMap().entries.map((MapEntry entry) {
return ChartBar(entry.key, entry.value);
}),
)
You alternatively can use Dart's new collection-for construct:
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.end,
children: [for (MapEntry entry in myList.asMap().entries)
ChartBar(entry.key, entry.value)
],
)
In the above, entry.key will be the index, and entry.value will be the original value in myList.
For the index you could use indexOf(value) function from the list to get index value. For example:
List list = List.generate(3, (int index) => index * index); // [0, 1, 4]
list.indexOf(4) // returns 2
As for your other issue, I'd need to see more code to see how you populate myList. I would suggest this approach (if it fits) to render your Row children. Use a function to return that list, for example:
buildList() {
List<Widget> list = List<Widget>();
chartBars.forEach((chart) => { //chartBars list with info
// add your ChartBar widget to the list with appropiate info
list.add(ChartBar(someProperty: chart.property));
});
return list;
}
Then on your Row widget just call that function when you build it's children:
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.end,
children: buildList()
)