Flutter Right way of fetching Data - flutter

I'm new to flutter and I'm currently trying to learn about fetching data
The Data might look something like this:
Data:
-- User1
---- User1Ticket1
-------- Title_text
-------- Title_picture
---- User1Ticket2
-- User2
---- User2Ticket1
---- User2Ticket2
I manage to fetch the data from RTDB and set it into a variable, The problem is I cannot useeach of the data because when I want to get the key of User1 and user2.. The data will covered in a double braces like this:
AllofUsersTicketId: [[user1Ticket1],[user2Ticket1],[user2Ticket2]]
How to fix this ? Here's my code, the allSolversPowId[j] is always null because there are braces wrapping each of them:
List solversId = powData.keys.toList();
List allSolversPowId = [];
for(int i =0; i < solversId.length; i++){
allSolversPowId.add(powData[solversId[i]].keys.toList());
}
for(int i = 0; i < solversId.length; i++) {
for (int j = 0; j < allSolversPowId.length; j++) {
calledWidget.add(
ReusablePositionWidget(
onTap: (){},
child: Column(
children: [
Text(
powData[solversId[i]][allSolversPowId[j]]['pow_text']
)
],
)
)
);
}

Try this,
By this way you will be able to access the element you need.
allSolversPowId[j][0]
Because,
[[user1Ticket1],[user2Ticket1],[user2Ticket2]] is a List of List.
Change the loop to something like this,
for(int i = 0; i < solversId.length; i++) {
for (int j = 0; j < allSolversPowId[i].length; j++) {
calledWidget.add(
ReusablePositionWidget(
onTap: (){},
child: Column(
children: [
Text(
powData[solversId[i]][allSolversPowId[i][j]]['pow_text']
)
],
)
)
);
}

Related

How to extend adding functionality of two objects in Dart?

I am using as a Latex renderer in my flutter project. I want to add a latex value to an existing Catex object. I have a List of Strings which hold latex values and a listview to display them in order. I want to add a list item to the Catex every time an OnTap method is called.
so far, + operator is not supported
The operator '+' isn't defined for the type 'CaTeX'.
CaTeX catex = r'\mu =: \sqrt{x}' as CaTeX;
int value = 0;
...
List<String> get data => [
r'\mu =: \sqrt{x}',
r'\eta = 7^\frac{4}{2}',
r'\epsilon = \frac 2 {3 + 2}',
r'x_{initial} = \frac {20x} {\frac{15}{3}}',
// ignore: no_adjacent_strings_in_list
r'\colorbox{red}{bunt} \boxed{ '
r'\rm{\sf{\bf{'
r'\textcolor{red} s \textcolor{pink} i \textcolor{purple}m '
r'\textcolor{blue}p \textcolor{cyan} l \textcolor{teal} e} '
r'\textcolor{lime}c \textcolor{yellow}l \textcolor{amber} u '
r'\textcolor{orange} b}}}',
r'\TeX',
r'\LaTeX',
r'\KaTeX',
r'\CaTeX',
'x_i=a^n',
r'\hat{y} = H y',
r'12^{\frac{\frac{2}{7}}{1}}',
r'\varepsilon = \frac{\frac{2}{1}}{3}',
r'\alpha\beta\gamma\delta',
// ignore: no_adjacent_strings_in_list
r'\colorbox{black}{\textcolor{white} {black} } \colorbox{white} '
r'{\textcolor{black} {white} }',
r'\alpha\ \beta\ \ \gamma\ \ \ \delta',
r'\epsilon = \frac{2}{3 + 2}',
r'\tt {type} \textcolor{teal}{\rm{\tt {writer} }}',
'l = a * t * e * x',
r'\rm\tt{sp a c i n\ \bf\it g}',
r'5 = 1 \cdot 5',
'{2 + 3}+{3 +4 }=12',
r'\backslash \leftarrow \uparrow \rightarrow \$',
r'42\uparrow 99\Uparrow\ \ 19\downarrow 1\Downarrow',
'5x = 25',
r'10\cdot10 = 100',
'a := 96',
];
...
changeListItems(int val) {
setState(() {
this.value = val;
if (this.value != 0) {
catex += data[this.value];
}
});
}
...
body: ListView.builder(
itemCount: this.value,
itemBuilder: (context, index) {
return Column(children: [catex]);
}),
...
onTap: (int index) {
index == 0
? this.value = this.value - 1
: this.value = this.value + 1;
changeListItems(this.value);
}
You can override the + operator for the Catex class with an extension:
extension Sum on Catex{
Catex operator +(Catex other) {
return Catex(this.input + other.input);
}
}
This is not very reliable since it depends on the input property of the Catex Package. Also, you are storing a constant Widget in your class which is also not recommended.
Widgets are meant to be created during the Build process so the Flutter framework can work on it properly.
The correct way to do it would be to have in your state a String which contains the input that will be passed to the Catex:
String catexInput = r'\mu =: \sqrt{x}';
[...]
catexInput += data[this.value];
[...]
return Catex(catexInput);
Edit:
If you want to have a Column with multiple Catex Widgets, you can do the same thing except that your state will need to contain a list of Strings:
List<String> catexInputs = [r'\mu =: \sqrt{x}'];
[...]
catexInput.add(data[this.value]);
[...]
return Column(children: [for (String input in catexInput) Catex(input)]);;

Cannot red property 'getText' protractor

I am trying to do a loop into a loop and a get the Cannot red property 'getText' of undefined error.
Here is my code:
element.all(by.className('col-md-4 ng-scope')).then(function(content) {
element.all(by.className('chart-small-titles dashboard-alignment ng-binding'))
.then(function(items) {
for(var i = 0; i<=content.length; i++) {
items[i].getText().then(function(text) {
expect(text).toBe(arrayTitle[i]);
});
}
});
element.all(by.className('mf-btn-invisible col-md-12 ng-scope'))
.then(function(itemsText) {
for(var i=0; i<=content.length; i++) {
for(var x = 0; x<=arrayContent.length; x++) {
itemsText[i].getText().then(function(textContent) {
expect(textContent).toBe(arrayContent[x]);
});
}
}
});
});
I am using the .then in the .getText() so i don't know what happens.
Your main problem now is you wrote 30 lines of code and you debug all of them at once. There maybe 1000 on possible issues. For this reason noone will help you, because I don't want to waste my time and make blind guesses myself. But if you reorgonize your code so you can debug them 1 by 1 line, then every line may have only a few issues.
With that said, stop using callbacks, I can see you don't completely understand what they do. Instead start using async/await. See how easy it is... Your code from question will look like this
// define elementFinders
let content = element.all(by.className('col-md-4 ng-scope'));
let items = element.all(by.className('chart-small-titles dashboard-alignment ng-binding'));
let itemsText = element.all(by.className('mf-btn-invisible col-md-12 ng-scope'));
// get element quantity
let contentCount = await content.count();
let itemsTextCount = await itemsText.count();
// iterate
for(var i = 0; i<contentCount; i++) {
// get text
let text = await items.get(i).getText();
// assert
expect(text).toBe(arrayTitle[i]);
}
// iterate
for(var i=0; i<contentCount; i++) {
for(var x = 0; x<itemsTextCount; x++) {
// get text
let text = await itemsText.get(i).getText();
// assert
expect(text).toBe(arrayContent[x]);
}
}
This way you can console.log any variable and see where your code breaks

If statement inside a For loop - (If null don't add)

I'm working on a project with Firestore, I'm gathering Button data to create each button with a For loop. I could manage to get this data and store it to a List and create the buttons. Now I'm attempting to let the User Add or Delete his own buttons inside the App.
This is an ExampleIf I have 5 buttons in my App, I'm gathering info from firestore to know if these buttons are OFF or ON. I'm storing this bool states into a List, so if I have 5 buttons, I would have a list that you be:
List<bool> cardsValue = [false, false, true, false, true];
But when I delete one of these buttons, so Let's say I deleted the middle one, I would get an array, like this:
List<bool> cardsValue = [false, false, null, false, true];
I would need to Add an If statement so when I receive null as response, It won't add that null into my List. So my list would be:
List<bool> cardsValue = [false, false, false, true];
End of example
Actual code:
This is how my List actually looks:
List<bool> cardsValue = [for (int i = 0; i < cardamount; i++) snapshot.data[devices[i]]];
What I though on doing but unfortunatly didn`t work was:
List<bool> cardsValue = [for (int i = 0; i < cardamount; i++) if (snapshot.data[devices[i]] == null){}else{snapshot.data[devices[i]]}];
You can use where method of List class to filter out null values
List<bool> cardsValue = [for (int i = 0; i < cardamount; i++) snapshot.data[devices[i]]]
.where((v) => v != null)
.toList()
.cast<bool>()
Output
[false, false, false, true]
Your initial approach was close, but Dart's collection-for and collection-if constructs cannot use braces; they must be used with expressions, not statements.
List<bool> cardsValue = [
for (int i = 0; i < cardamount; i++)
if (snapshot.data[devices[i]] != null)
snapshot.data[devices[i]]
];

How to change data point color of Birt line chart for those points which are below marker line through script

I am using Birt line chart where I want to achieve something like this How to format series labels of a BIRT chart by script
I want to show the points which are below marker line in red color just like this link has mentioned.
Modify fillColor of marker.
Code Snippet:
beforeGeneration: function(options)
{
var throughTargetPercent = this.getReportVariable("through_target_percent");
for(var i = 0 ; i < options.series.length ; i++){
var data = options.series[i].data;
var len = data.length;
for (var j=0; j < len; j++){
if(data[j].y < throughTargetPercent) {
data[j]= {
y: data[j].y,
marker: {
fillColor: "yellow"
}
}
}
}
}
},
Hope it helps!

Google OrgChart - Google Visualization

I have create a chart using orgchart similar to the following. Chart generated through the data stored in mysql table (using php).
My question is I want to display the depth level in each node along with other details. How to do that?
Example:
Food -> Level 1
Vegetable and Meat -> Level 2
Vegetable 1, Vegetable 2 and Meat 1 -> Level 3
** There is api method (data.getSelection.row) to get the row (depth) of selected node. But it always seems to give the index of selected node instead of the row of selected node. **
Not sure how you want to display them, but here is the idea I came up with:
var depth = {}; // here we store node depths
google.visualization.events.addListener(chart, 'ready', function () {
for (var i = 0; i < data.getNumberOfRows(); i++) {
depth[i] = 0; // we iniialize all in 0 depth
}
for (var i = 0; i < data.getNumberOfRows(); i++) { // for each row
var childs = chart.getChildrenIndexes(i); // we check its descendants
for (var child = 0; child < childs.length; child++) {
depth[childs[child]] += depth[i] + 1; // and add the parents depth+1
}
}
console.log(depth) // here we have already all nodes depth
});
google.visualization.events.addListener(chart, 'select', function () {
if (chart.getSelection().length > 0) {
var node_row = chart.getSelection()[0].row;
console.log(depth[node_row]) // now just show the depth of selected node
}
})
chart.draw(data, {
allowHtml: true
});
Working fiddle: http://jsfiddle.net/a2zwqf1r/