How to do that a Container follow path of Containers? (AnimatedContainer) - flutter

I have a grid of Containers (blue and red containers), and on top of that, a green Container (with StackWidget) which I need move throught red Containers (path)
Is possible to achieve what I need?
I have the grid of containers and a list with path coords
List<Map<int, int>> path = [
{2: 0},
{2: 1},
{2: 2},
{2: 3},
{2: 4},
{3: 4},
{4: 4},
{5: 4},
{5: 5},
{5: 6},
{5: 7},
//...

Related

Flutter/Dart - Trying to iterate over a map of values // Syntax help needed

I'm a self-learning beginner at coding, failing at a self-set task. The aim of the task is ultimately to figure out the syntax...but I spent hours now. So...help pls! Warning: I thoroughly confused myself...so don't expect beauty in my attempt.
I want to use iterate over this map:
const marginsCard = [
{
'ID': 0,
'margins': [
{'marginLeft': 0},
{'marginRight': 5},
{'marginBottom': 0},
{'marginTop': 20},
],
},
{
'ID': 1,
'margins': [
{'marginLeft': 5},
{'marginRight': 0},
{'marginBottom': 0},
{'marginTop': 20,},
],
},
{
'ID': 2,
'margins': [
{'marginLeft': 5},
{'marginRight': 0},
{'marginBottom': 0},
{'marginTop': 20,},
],
},
];
The goals are to
iterate over 'ID'
hand over the values for the margins to a constructor method that
hand back a Card with the specified margins
put those Cards in a list.
The function calling the constructor function in its current state:
buildCardElementList(){
cardElementsList = [
...(marginsCard[int.parse('ID')] as List<Map<String,Object>>).map((cardElement){
return buildCardElement(cardElement['marginLeft'], cardElement['marginRight'], cardElement['marginBottom'], cardElement['marginTop']);
}).toList()];
return cardElementsList;
}
There is so much try and eror in this, I'm sure there are multiple issues. Can someone help me out with clean syntax so I can start to understand what I'm doing again?
Thanks!
EDIT // P.S.: I'm leaving out the receiving/constructing function; it's not the issue.
Enjoy ;)
void main() {
final cards = marginsCard.map(_buildCard).toList();
print(cards);
}
Card _buildCard(Map<String, Object> cardElement) {
return Card(
marginLeft: resolveMargin(cardElement, 'marginLeft'),
marginRight: resolveMargin(cardElement, 'marginRight'),
marginBottom: resolveMargin(cardElement, 'marginBottom'),
marginTop: resolveMargin(cardElement, 'marginTop'),
);
}
num resolveMargin(Map<String, Object> cardElement, String marginName) {
final marginElements = cardElement['margins'] as List<Map<String, Object>>;
return marginElements.firstWhere((marginElement) => marginElement.containsKey(marginName))[marginName] as num;
}
class Card {
final num marginLeft, marginRight, marginBottom, marginTop;
Card({required this.marginLeft, required this.marginRight, required this.marginBottom, required this.marginTop});
#override
String toString() => "marginLeft: $marginLeft; marginRight: $marginRight; marginBottom: $marginBottom; marginTop: $marginTop";
}
const marginsCard = [
{
'ID': 0,
'margins': [
{'marginLeft': 0},
{'marginRight': 5},
{'marginBottom': 0},
{'marginTop': 20},
],
},
{
'ID': 1,
'margins': [
{'marginLeft': 5},
{'marginRight': 0},
{'marginBottom': 0},
{'marginTop': 20,},
],
},
{
'ID': 2,
'margins': [
{'marginLeft': 5},
{'marginRight': 0},
{'marginBottom': 0},
{'marginTop': 20,},
],
},
];

Dart // Flutter: How to remove Items from List depending on content of entry

In my Flutter app, I have a database which keeps track of which items the user liked and which he disliked. I have the function
List finalFavoritesList;
void queryDb() async {
final db = await database;
final allRows = await db.query(TABLE_FAVORITE);
List finalFavoritesList = allRows.toList(growable: true);
print(finalFavoritesList);
}
which in my understanding creates a dart list from the sqflite database. Logcat prints:
[{id: 0, isFavorite: 0}, {id: 1, isFavorite: 1}, {id: 2, isFavorite: 0}, {id: 3, isFavorite: 1}, {id: 4, isFavorite: 0}, {id: 5, isFavorite: 1}]
Now I want to remove every entry, where isFavorite is equal to 0 but I don't know how. This new list should have another name.
I think your question itself has an answer!
Use removeWhere function.
List favorite = [{'id': 0, 'isFavorite': 0}, {'id': 1, 'isFavorite': 1}, {'id': 2, 'isFavorite': 0}, {'id': 3, 'isFavorite': 1}, {'id': 4, 'isFavorite': 0}, {'id': 5, 'isFavorite': 1}];
favorite.removeWhere((item) => item['isFavorite'] == 0);
print(favorite);
Output:
[{id: 1, isFavorite: 1}, {id: 3, isFavorite: 1}, {id: 5, isFavorite: 1}]
Refer: https://api.dart.dev/stable/2.9.3/dart-core/List/removeWhere.html
Hope that solves your case!

Retrieve entries from map based on one of the key values

I have reviewed similar posts but am still failing to line things up with what i'm after.
I want to retrieve all entries from the following map where the condition a particular condition is met.
The simple map
List<Map<String, dynamic>> _playList = [
{'songId': 1, 'setId': 1},
{'songId': 2, 'setId': 1},
{'songId': 3, 'setId': 1},
{'songId': 4, 'setId': 2},
{'songId': 5, 'setId': 3},
{'songId': 6, 'setId': 4},
{'songId': 6, 'setId': 5},
{'songId': 6, 'setId': 6},
{'songId': 6, 'setId': 7},
];
I am trying to use a method which will iterate through this map, find all entries for the int that was passed into the method and then store the results in a new array.
The method I have so far
Future<List<Song>> songFromCurrentSetlist (int setlistId) async {
_playList.forEach((_) => setlistId == _playList.???);
}
Clearly, a bit stuck.
Basically, if 1 is received for setlistId in the parameter list for the method, I am expecting to get back the values 1,2,3 for each of the songIds that exist for setlistId == 1.
Thank you,
Bob
You can create a list of songs and add new songs when your setId match.
Following Example Clear your Idea.
void main(){
List<Map<String, dynamic>> _playList = [
{'songId': 1, 'setId': 1},
{'songId': 2, 'setId': 1},
{'songId': 3, 'setId': 1},
{'songId': 4, 'setId': 2},
{'songId': 5, 'setId': 3},
{'songId': 6, 'setId': 4},
{'songId': 6, 'setId': 5},
{'songId': 6, 'setId': 6},
{'songId': 6, 'setId': 7},
];
List<int> songs = [];
songFromCurrentSetlist (int setlistId) async {
_playList.forEach((index){
if(index['setId'] == setlistId){
songs.add(index['songId']);
}
});
}
songFromCurrentSetlist(1);
print(songs.toList());
}
Instead of Map why you not using model class
Exp:
class Songs{
final int songId;
final int setId;
Songs(this.songId, this.setId);}
ListSongs> _playList
try using this

Visualize mongoDb with dcJs (Meteor)

I'm interested to visualize Meteor data (mongoDb) with dcJs. However, I can't find much information about this topic.
I recreated http://www.codeproject.com/Articles/697043/Making-Dashboards-with-Dc-js-Part-2-Graphing using Meteor.
Without calling mongodb,
var data = [
{_id: "iD1", date: "12/27/2012", http_404: 2, http_200: 190, http_302: 100},
{_id: "iD2", date: "12/28/2012", http_404: 2, http_200: 10, http_302: 100},
{_id: "iD3", date: "12/29/2012", http_404: 1, http_200: 300, http_302: 200},
{_id: "iD4", date: "12/30/2012", http_404: 2, http_200: 90, http_302: 0},
{_id: "iD5", date: "12/31/2012", http_404: 2, http_200: 90, http_302: 0},
{_id: "iD6", date: "01/01/2013", http_404: 2, http_200: 90, http_302: 0},
{_id: "iD7", date: "01/02/2013", http_404: 1, http_200: 10, http_302: 1},
{_id: "iD8", date: "01/03/2013", http_404: 2, http_200: 90, http_302: 0},
{_id: "iD9", date: "01/04/2013", http_404: 2, http_200: 90, http_302: 0},
{_id: "iD10", date: "01/05/2013", http_404: 2, http_200: 90, http_302: 0},
{_id: "iD11", date: "01/06/2013", http_404: 2, http_200: 200, http_302: 1},
{_id: "iD12", date: "01/07/2013", http_404: 1, http_200: 200, http_302: 100}
];
The result is working fine.
By inserting and calling data from mongodb, failed.
Not sure what's missing here.
Hope to get advice. Thanks!
I suspect the error is fired from the following code:
var minDate = dateDim.bottom(1)[0].date;
var maxDate = dateDim.top(1)[0].date;
It's probable that your template rendered callback is being fired before the data has been loaded from the database.
Probably the easiest way to fix it would be to put an if statement:
if (Dichas.find().count() !== 0) {
... all of the code that depends on there being data
}

Adding labels to google scatter charts

I am using google charts API to draw scatter, is there a way to label each node in the scatter diagram. I guess it only uses the numeric values.....Any other tools I can use instead.
Example:
Name Age Response
Allen 12 40
Tom 16 45
Sim 17 60
X and y axis will be age and response respectively, but each node on the graph can I label as Allen, Tom, Sim
I was having same issue to plot labels for points on chart itself.
Google chart have solved this problem now. You can add one more property as annotation. By which you can add labels.
See how it looks like. Generally I do annotation in number and then explain what those number are about.
var data = google.visualization.arrayToDataTable([
['Age', 'Weight', {role: 'annotation'}],
[ 8, 12, 'Point 1'],
[ 1, 5.5, 'Point 2'],
[ 11, 14, 'Point 3'],
[ 4, 5, 'Point 4'],
[ 3, 3.5, 'Point 5'],
[ 6.5, 7, 'Point 6']
]);
You can label the points in a Google ScatterChart by adding a tooltip. Tooltips show up when you mouseover a data point.
The code for your data table should look something like this:
var dt = new google.visualization.DataTable(
{
cols: [{id: 'A', label: 'Age', type: 'number'},
{id: 'B', label: 'Response', type: 'number'},
{id: 'C', label: 'Name', type:'tooltip', p:{role:'tooltip'}}
],
rows: [{c:[{v: 12}, {v: 40}, {v:'Allen'}]},
{c:[{v: 16}, {v: 45}, {v:'Tom'}]},
{c:[{v: 17}, {v: 60}, {v:'Sim'}]}
]
},
0.6
)
When you mouseover the points, the name will show up.
Link to Tooltips:
https://developers.google.com/chart/interactive/docs/roles#tooltiprole
Link to DataTable class (for formatting data):
https://developers.google.com/chart/interactive/docs/reference#DataTable
NOTE: if you're trying to plot multiple data series, you have to specify a tooltip for each one. For example, if you add a separate data series for Average Response, the code would change to:
var dt = new google.visualization.DataTable(
{
cols: [{id: 'A', label: 'Age', type: 'number'},
{id: 'B', label: 'Response', type: 'number'},
{id: 'C', label: 'Name', type:'tooltip', p:{role:'tooltip'}},
{id: 'D', label: 'AvgResp', type: 'number'},
{id: 'E', label: 'Category', type:'tooltip', p:{role:'tooltip'}}
],
rows: [{c:[{v: 12}, {v: 40}, {v:'Allen'}, {v:null}, {v:null}]},
{c:[{v: 16}, {v: 45}, {v:'Tom'}, {v:null}, {v:null}]},
{c:[{v: 17}, {v: 60}, {v:'Sim'}, {v:null}, {v:null}]},
{c:[{v: 12}, {v: null}, {v:null}, {v: 35}, {v:'Avg. 12yo'}]},
{c:[{v: 16}, {v: null}, {v:null}, {v: 48}, {v:'Avg. 16yo'}]},
{c:[{v: 17}, {v: null}, {v:null}, {v: 52}, {v:'Avg. 17yo'}]}
]
},
0.6
)
To do it using the visualization API, just use a cell_object (https://google-developers.appspot.com/chart/interactive/docs/reference#cell_object). The google API playground was useful for me, might be for you: https://code.google.com/apis/ajax/playground
Here's an example of some code:
var data = google.visualization.arrayToDataTable([
['Age','Response'],
[ {v:12, f: 'Allen'}, 40],
[ {v:16, f: 'Tom'}, 45],
[ {v:17, f: 'Sim'}, 60]
]);
Hope that helps!
https://developers.google.com/chart/image/docs/gallery/scatter_charts#chart_types
This page documents coloring the plots and adding a legend.
With Google charts you can't, short of using the legend and cross referencing. I don't know of any scatter chart creator that will label the individual plots.