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.
Related
starCountRef.orderByChild('Series').startAt('sam').endAt('1')
This code only work if I use int values to fetch data; string values are not fetching the data.
DatabaseReference starCountRef =
FirebaseDatabase.instance.ref('/Shop/qw1234/Inventory/');
bool data = false;
Expanded(
child: FirebaseAnimatedList(
query: starCountRef
.orderByChild('Series')
.startAt('sam')
.endAt('1'),
itemBuilder: (context, snapshot, animation, index) {
return ListTile(
onTap: (() {
print(index);
}),
title: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Text('Price: Rs '),
Text(
snapshot.child('Price').value.toString()),
],
),
],
),
subtitle: Padding(
padding: const EdgeInsets.only(top: 10, bottom: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
'Model: ',
style: TextStyle(
fontWeight: FontWeight.bold),
),
Text(snapshot
.child('Series')
.value
.toString()),
],
),
],
),
),
);
}),
)
My firebase realtime database I am trying to setup a search box to search product and edit or delete them
Can any one help me? I am developing an inventory app for a shop. I am trying to make a search box so the owners can see their stock limits and item prices.
I rather think the firebase query works in ASCII order. In ASCII order, numbers appear before letters so starting at 'a letter string' and ending at 'a number string' is likely to cause you problems.
I don't see a '1' in your example of 'Series', you aren't trying to reference the '1' child in the 'Inventory' node are you?
I want to return two widgets when one condition is true. Something like this:
Row(
children: [
...
if (session.server.autoVenta)
SizedBox(
width: size.width * 0.16,
child: const TextPrimary(
text: "N° Doc:",
),
),
if (session.server.autoVenta)
SizedBox(
width: size.width * 0.24,
child: Text(order.documento),
),
]
)
But using only one if.
I've searched on google but I couldn't find anything.
Like
Row(
children: [
if (true) ...[
Widget(),
Widget(),
],
Widget(),
],
)
you can many options to do it :
first, you can use the spread operator inside the children in your column to add a List of widgets at once :
Row(
children: [
/* other widgets */
if (condition) ...[
YourWidget1(),
YourWidget2(),
YourWidget3(),
],
you can use for it also a separate List<Widget> containing your widgets
or you can use nested Row if you don't want the spread operator :
Row(
children: [
/* other widgets */
if (condition) RowWidgets(),
),
Widget RowWidgets() {
return Row(
children: [
YourWidget1(),
YourWidget2(),
YourWidget3(),
],
);}
I'm struggling with this and can't describe it as well as I should on search engine, so here's my problem: I have a Row containing two Expanded with flex: 5 aiming to have two width-equal cells; inside the first cell, I have a Column (containing a Table and a Button); inside the second cell I have a Column (containing a ListView and a Button); I'd like to force the ListView to become scrollable once its content gets higher than first cell's intrinsic height, so second cell's height never gets higher than first cell's height.
Row(
children: [
Expanded(
flex: 5,
child: Column(
children: [
DataTable(),
ElevatedButton()
]
), // Column
), // Expanded
Expanded(
flex: 5,
child: Column(
children: [
ListView(),
ElevatedButton()
]
), // Column
) // Expanded
]
) // Row
I lost myself trying stuff with shrinkWrap: true on the ListView, IntrinsicHeight() around the Row, etc.
Thank you for your help!
EDIT:
Solution I found is going the hard way by listening to first cell's size changes and to set its height as second cell's height (thanks to this Medium link). Even tho I'd rather go for a cleaner way, it seems to work like it should.
This is what my code currently looks like:
Row(
children: [
Expanded(
flex: 5,
child: WidgetSize(
onChange: (size) {
if (size != null)
setState(() => heightOfTable = (size as Size).height);
},
child: Column(
children: [
DataTable(),
ElevatedButton()
]
), // Column
), // WidgetSize
), // Expanded
Expanded(
flex: 5,
child: Container(
height: heightOfTable,
child: Column(
children: [
ListView(),
ElevatedButton()
]
), // Column
), // Container
) // Expanded
]
) // Row
If you've got a better idea, please let me know! :)
I think you can try wrapping the ListView inside a Container and give a suitable height and `width.
Row(
children: [
Expanded(
flex: 5,
child: Column(
children: [
DataTable(),
ElevatedButton()
]
), // Column
), // Expanded
Expanded(
flex: 5,
child: Column(
children: [
Container(
height:,
width:,
child: ListView()),
ElevatedButton()
]
), // Column
) // Expanded
]
) // Row
Hey how can i load one of several lists with one id?
my lists look like this
List one = [
{'name': 'USA'},
{'name': 'Germany'},
];
List two = [
{'name': 'BMW'},
{'name': 'Audi'},
];
i need load one of this list like this
body: Column(
children: one.map((info) {
return Container(
child: SizedBox(
children: [
Text(
info['name'],
),
],
),
),
);
}).toList(),
));
all i want is to load one of the two lists depending on the id of my previous page
for example id 1 was passed then two.map should be loaded
I have created a variable on this page that is also passed, I tried to use variable.map but it doesn't work
If you have many lists, put your Lists into a List. With your variable from the previous page you can call the right List out of your data.
data[variable].map(info) { ....... }
Edit:
Step
create List<List> data ; their you can save all your list; when you want your List "one".
const List<List<dynamic>> data = [[{'name': 'USA'},{'name': 'Germany'},],[ {'name': 'BMW'},{'name': 'Audi'},]];
Step
put it into your widget tree and call the right data with your variable(x)(INTEGER) to get the right list and map it as before:
body: Column(
children: data[x].map((info) {
return Container(
child: SizedBox(
children: [
Text(
info['name'],
),
],
),
),
);
}).toList(),
));
If that isn't working you may have another problem in another topic.
Tom
ternary operator helps you
body: Column(
children:Your variable == 1
? one.map((info) {
return Container(
child: SizedBox(
child: Text(
info['name'],
),
),
);
}).toList()
: one.map((info) {
return Container(
child: SizedBox(
child: Text(
info['name'],
),
),
);
}).toList()),
);
I have an image and I want to create a row of 5 copies of that image. The simplest way I see of doing that is the following:
Row(
children: <Widget>[
Expanded(
child: Image.asset('images/penny.png'),
),
Expanded(
child: Image.asset('images/penny.png'),
),
Expanded(
child: Image.asset('images/penny.png'),
),
Expanded(
child: Image.asset('images/penny.png'),
),
Expanded(
child: Image.asset('images/penny.png'),
),
],
),
However, this approach is obviously incredibly repetitive. I could write a function for the Expanded widget to make it look a little cleaner, but is there a better approach that is less repetitive and will allow me to easily control how many duplicate images I can create?
Container(
child: Row(
children: List.generate(
5,
(index) => Expanded(
child:
Image.asset('assets/yourImage'))),
))
I found a way of doing it with GridView, so I think I'll use this, as it'll also be useful later when I want to create more pennies. (Like for 100 pennies, I would want to display them in several rows and not just one.)
GridView.count(
crossAxisCount: 5 ,
children: List.generate(5,(index){
return Container(
child: Image.asset('images/penny.png'),
);
}),
)
To make this even more customizable:
GridView build2DArrayOfPennies(int rowCount, int numItems, String imageFile) {
return GridView.count(
crossAxisCount: rowCount,
children: List.generate(numItems,(index){
return Container(
child: Image.asset(imageFile),
);
}),
);