The getter 'children' isn't defined for the class 'PageView' - list

I am just out of ideas on how this is possible, but here's the code:
PageView widgetPageView = new PageView(children: <Widget>[],);
dataList.forEach((e){
Leader c = Leader.fromJson(e);
widgetPageView.children.add(*unimportant stings*); <--- Error here
});
The thing is that when I define PageView it has the "children" getter, while in the for loop it doesn't. Please help. The error itself is "The getter 'children' isn't defined for the class 'PageView'"

final List<Widget> children = [];
PageView widgetPageView = PageView(
children: children,
);
dataList.forEach((e) {
Leader c = Leader.fromJson(e);
children.add(Text('child 1'));
});

Related

Flutter: Import the correct color values ​with the linked id from another class

I want to access the data in a list that is in another class (class RubricItem). The color must be the one with the corresponding id.
Then I would like to insert the data from the list that I called from the RubricItem class into the list that are in the Colors class. In the Colors class is the parameter id :. And depending on which ID I typed in, my "rubricColor:" should know what its value should be.
Example:
I write down the id value of the list from the Colors class 'BlueAccent', then he also has to know which color has to be written in rubricColor:. He sees 'BlueAccent' at the id: from the Colors class and compares this with the id: in the list from the RubricItem class and sees the color value in the same list from the RubricItem class and my rubricColor: value in the list the Colors class, takes the value of color from the list of the RubricItem class.
I hope you understand what I mean.
It was very difficult for me to explain.
RubricItem class:
class _RubricItemState extends State<RubricItem> {
final List<Rubric> rubrics = [
Rubric(
id: 'BlueAccent',
title: "BLUEACCENT",
color: Colors.blueAccent,
icon: 'assets/icons/blueAC.png',
),
Rubric(
id: "Pink",
title: "PINK",
color: Colors.pinkAccent,
icon: 'assets/icons/PINK.png',
),
Rubric(
id: 'GreenAccent',
title: "GREENACCENT",
color: Colors.greenAccent,
icon: 'assets/icons/GreenAccent.png',
),
];
...
List of Color classes:
final List<Colorr> colors = [
Colorr(
id: 'BlueAccent', // with this id he should be find the id in the List of the RubricItem() class
title: 'Blabla',
rubric: '',
rubricColor: , //(RubricItemColor)
),
];
Use maps instead of lists.
map<String, Rubric>
map<String, Colorr>
and the Strings are the ids. And then just use the ids
Edit1: example
I don't know if this is the best way to approach your problem but it works.
I used the key of the map as the id and removed the id from both Rubric class and Colorr class.
import 'package:flutter/material.dart';
void main() {
final Map<String,Rubric> rubrics = {
'BlueAccent': Rubric(title:'BLUEACCENT',color: Colors.blueAccent, icon: 'assets/icons/blueAC.png'),
};
final Map<String, Colorr> colors = {
'BlueAccent': Colorr(title: 'title', rubric:rubrics['BlueAccent'],rubricColor: rubrics['BlueAccent'].color),
};
}
class Rubric{
Rubric({this.title,this.icon,this.color});
final String title;
final Color color;
final String icon;
}
class Colorr{
Colorr({this.title,this.rubric,this.rubricColor});
final String title;
final Rubric rubric;
final Color rubricColor;
}

Flutter - How to do a tick box filter for a list to narrow down search

I am very new to flutter and still learning. I am struggle on how to create a filter for a list of cars. E.g. tick a box to only show red cars.
I do a little bit of searching but I can't seem to figure out how to do it. I did see a "where" method but struggling to make sence of it.
What is the the best way of doing this and can you please point me in the right direction. Can't get my head about this one.
So to create a filter for your list. Lets assume that you have a class for your car:
Class Car {
final String carName;
final String color;
Car({this.carName, this.color});
}
And lets say you have some car objects:
List<Car> AllCars = [
new Car(carName: "McQueen",color: "red"),
new Car(carName: "Mater",color: "rusty"),
];
Now you create a statefulWidget for your list:
class ListPage extends StatefulWidget{
#override
_listPageState createState() => new _listPageState();
}
class _listPageState extends State<ListPage> {
List<Car> _RedCars = null;
#override
void initState() {
super.initState();
_RedCars = AllCars.where((i) => i.color == "red").toList();
}
#override
Widget build(BuildContext context) {
return new Scaffold(
body: new Container(
child: new Text(
"Boom!!! You are done. Now build your list on the page."
),
),
);
}
}
So, what you are trying to do can be achieved by this. Now all you have to do is to do it dynamic, show this list on your page. Remember the more your struggle the more you learn.

Get reference to paper via dom element

Is there a way to get the paper for an element by referencing the element?
I'm creating elements in a loop and with each element i'm creating a new Raphael(...). See sample below.
Basically I want to stop the animation on click, but paper is undefined and calling stop() on the element itself doesn't work either.
$.each(el,function(key,value)
{
var li = $("<li>",{id:"item"+key).appendTo("#myUl");
var ppr = new Raphael($("item"+key),get(0),48,48);
//... do stuff like animate ...
li.click(function()
{
console.log($(this).paper); //undefined
})
})
I was wondering about a closure like below to capture the paper, so when the anonymous func runs, it has the variable captured.
Note, I'm not sure this is the best method overall, something feels a bit clunky about creating a new paper each time, but just trying to address the specific issue.
Untested code, but if you can get it on a fiddle, I think it should be possible to sort.
$.each(el,function(key,value)
{
var li = $("<li>",{id:"item"+key).appendTo("#myUl");
var ppr = new Raphael($("item"+key),get(0),48,48);
(function() {
var myPaper = ppr;
li.click(function()
{
console.log(myPaper);
})
})();
})
You can also attach the paper to the element's "data" using https://api.jquery.com/data/
$.each(el,function(key,value)
{
var li = $("<li>",{id:"item"+key).appendTo("#myUl");
var ppr = new Raphael($("item"+key),get(0),48,48);
li.data("paper", ppr ); // SAVE
li.click(function()
{
console.log($(this).data("paper")); // LOAD
})
})

Dojo: set store for template filteringselect

in order to get familiar with dojo I'm working on a test project which consists of the following components:
data grid (created declaratively), filled with JSON data; clicking on a line will open a dialog containing a form (works)
form (created from template), with several input fields, filled with data from the grid store (works)
FilteringSelect (part of form) (doesn't work, no content)
The FilteringSelect contains dynamic data. In order to keep data traffic low, I thought it wise to get this data when the whole page is loaded and to pass it into the template initialization function.
In fact, I don't really know how to assign the store to the FilteringSelect.
Any help would be greatly appreciated.
Here's my code. I shorten it to the what I consider relevant parts so that it's easier to understand.
Grid Part:
var data_list = fetchPaymentProposalList.fetch();
/*create a new grid*/
var grid = new DataGrid({
id: 'grid',
store: store,
structure: layout
});
// store for FilteringSelect
var beneficiaryList = FetchBeneficiaryList.fetch();
var beneficiaryListStore = new Memory({
identifier : "id",
data : beneficiaryList
});
return {
// function to create dialog with form
instantiate:
function(idAppendTo) {
/*append the new grid to the div*/
grid.placeAt(idAppendTo);
/*Call startup() to render the grid*/
grid.startup();
grid.resize();
dojo.connect(grid, "onRowClick", grid, function(evt) {
var rowItem = this.getItem(evt.rowIndex);
var itemID = rowItem.id[0];
var store = this.store;
var paymentProposalForm = new TmpPaymentProposalForm();
paymentProposalForm._init(store.getValue(rowItem, "..."), ..., beneficiaryListStore);
});
}
};
The beneficiarylist comes as something like this:
return { 12: { id : 1, name : "ABC" }};
The FilteringSelect in the template looks like this:
<input data-dojo-type="dijit/form/FilteringSelect" name="recipient" id="recipient" value="" data-dojo-props="" data-dojo-attach-point="recipientNode" />
Template Init Code looks like this:
_init: function(..., beneficiaryListStore) {
this.recipientNode.set("labelAttr", "name");
this.recipientNode.set("searchAttr", "name");
// here should come the store assignment, I guess???
var dia = new Dialog({
content: this,
title: "ER" + incoming_invoice,
style: "width: 600px; height: 400px;"
});
dia.connect(dia, "hide", function(e){
dijit.byId(dia.attr("id")).destroyRecursive();
});
dia.show();
}
For anyone who's interested, here's my solution:
var beneficiaryList = FetchBeneficiaryList.fetch();
var beneficiaryData = {
identifier : "id",
items : []
};
for(var key in beneficiaryList)
{
if(beneficiaryList.hasOwnProperty(key))
{
beneficiaryData.items.push(lang.mixin({ id: key }, beneficiaryList[key]));
}
}
var beneficiaryListStore = new Memory({
identifier : "id",
data : beneficiaryData
});
That did the trick

how can i show/hide a raphael object with button click event

i want to show/hide my raphael svg graph with a button click event
please someone who know how to do this. please help me
i try to do by this way but it's not working.
var p = Raphael(900,70,200,200);
p.circle(20,20,20);
$n("#shide").click(function(){
p.hide();
});
please someone who know how to do this. please help me.
Thanks in advance.
You'd better use the return value of drawing functions.
var element1 = p.circle(20,20,20);
var element2 = p.circle(99,99,20);
$n("#shide").click(function(){
element1.hide();
// element2.hide();
});
Also I have some advanced skills about this kind of problem. These skills will be very usefull when you draw your circles or other things with the ajax response data.
function drawCircle() {
var elementObj = {};
$.ajax({url: '', dataType: 'json', method: 'post', data: yourData, success: function (data) {
elementObj['circle1'] = p.circle(20,20,20);
elementObj['circle2'] = p.circle(99,99,20);
});
return elementObj;
}
Then you call this function like this:
var ele = drawCircle();
var hoverInCb = function () {
ele['circle1'] && ele['circle1'].show();
ele['circle2'] && ele['circle2'].show();
};
var hoverOutCb = function () {
ele['circle1'] && ele['circle1'].hide();
ele['circle2'] && ele['circle2'].hide();
};
These code will work because that the returned elementObj is a 'link' of the object. After the data fetched by ajax request, the elementObj will be filled with data, and the ele variable outside there will also get the new data.
Like this:
var paper = Raphael(10, 50, 320, 200);
paper.circle(10, 10, 10, 10)
.attr({fill: "#000"})
.click(function () {
this.hide();
});