Leaflet shapes move on zoom

Leaflet shapes move on zoom - leaflet

When I zoom in after loading the page, this happens:
https://gyazo.com/76b0458b1cd836a3b3d6ddaa493585da (I zoomed in and out with the mouse wheel)
However, after I move the map with the mouse just a bit, the issue is gone and everything functions perfectly... until I reload the page.
Does anyone have an idea why could this be happening?
Here I managed to recreate the issue: https://plnkr.co/edit/RD9yyEPY0Q1Udo57 (refresh the preview window after loading for the first time to see the issue)
for (let country of countries) {
country_layers = L.layerGroup();
$.getJSON('geojson_files/'+country[2]+'/'+country[0]+'.geojson', function(data) {
sites = L.geoJson(data, {
//"onEachFeature": forEachFeature,
"style": {color: country[1], fillPattern: country[4]},
"pane": country[3]
});
sites.addTo(country_layers);
mymap.addLayer(country_layers);
});
}
This is a part of the array countries:
countries = [
["neutral_zone_iraq", neutral_zone, "1935_10_03", "neutral_zone", null],
["afghanistan", neutral, "1935_10_03", "neutral", null],
["albania", neutral, "1935_10_03", "neutral", null],
["andorra", neutral, "1935_10_03", "neutral", null],
["argentina", neutral, "1935_10_03", "neutral", null],
["austria", neutral, "1935_10_03", "neutral", null],
["belgian_congo", neutral, "1935_10_03", "neutral", null],
["belgium", neutral, "1935_10_03", "neutral", null],
["bhutan", neutral, "1935_10_03", "neutral", null],
["bolivia", neutral, "1935_10_03", "neutral", null],
["brazil", neutral, "1935_10_03", "neutral", null],
["bulgaria", neutral, "1935_10_03", "neutral", null],
["chile", neutral, "1935_10_03", "neutral", null],
["colombia", neutral, "1935_10_03", "neutral", null],
["costarica", neutral, "1935_10_03", "neutral", null],
["cuba", neutral, "1935_10_03", "neutral", null],
["czechoslovakia", neutral, "1935_10_03", "neutral", null],
["danzig", neutral, "1935_10_03", "neutral", null],
["denmark", neutral, "1935_10_03", "neutral", null],
["dominican_republic", neutral, "1935_10_03", "neutral", null],
["dutch_east_indies", neutral, "1935_10_03", "neutral", null],
["finland", neutral, "1935_10_03", "neutral", null],
["ecuador", neutral, "1935_10_03", "neutral", null],
["el_salvador", neutral, "1935_10_03", "neutral", null],
["estonia", neutral, "1935_10_03", "neutral", null],
["greece", neutral, "1935_10_03", "neutral", null],
["guatemala", neutral, "1935_10_03", "neutral", null],
["haiti", neutral, "1935_10_03", "neutral", null],
["honduras", neutral, "1935_10_03", "neutral", null],
["hungary", neutral, "1935_10_03", "neutral", null],
["iceland", neutral, "1935_10_03", "neutral", null],
["iran", neutral, "1935_10_03", "neutral", null],
["iraq", neutral, "1935_10_03", "neutral", null],
["ireland", neutral, "1935_10_03", "neutral", null],
["latvia", neutral, "1935_10_03", "neutral", null],
["liberia", neutral, "1935_10_03", "neutral", null],
["lichtenstein", neutral, "1935_10_03", "neutral", null],
["lithuania", neutral, "1935_10_03", "neutral", null],
["luxembourg", neutral, "1935_10_03", "neutral", null],
["macau", neutral, "1935_10_03", "neutral", null],
["mexico", neutral, "1935_10_03", "neutral", null],
["monaco", neutral, "1935_10_03", "neutral", null],
["nepal", neutral, "1935_10_03", "neutral", null],
["netherlands", neutral, "1935_10_03", "neutral", null],
["nicaragua", neutral, "1935_10_03", "neutral", null],
["norway", neutral, "1935_10_03", "neutral", null],
["panama", neutral, "1935_10_03", "neutral", null],
["paraguay", neutral, "1935_10_03", "neutral", null],
["peru", neutral, "1935_10_03", "neutral", null],
["philippines", neutral, "1935_10_03", "neutral", null],
["poland", neutral, "1935_10_03", "neutral", null],
["portugal", neutral, "1935_10_03", "neutral", null],
["portuguese_cape_verde", neutral, "1935_10_03", "neutral", null],
["portuguese_east_africa", neutral, "1935_10_03", "neutral", null],
["portuguese_guinea", neutral, "1935_10_03", "neutral", null],
["portuguese_india", neutral, "1935_10_03", "neutral", null],
["portuguese_timor", neutral, "1935_10_03", "neutral", null],
["portuguese_west_africa", neutral, "1935_10_03", "neutral", null],
["romania", neutral, "1935_10_03", "neutral", null],
["san_marino", neutral, "1935_10_03", "neutral", null],
["sao_tome_and_principe", neutral, "1935_10_03", "neutral", null],
["saudi_arabia", neutral, "1935_10_03", "neutral", null],
["siam", neutral, "1935_10_03", "neutral", null],
["sweden", neutral, "1936_09_28", "neutral", null],
["switzerland", neutral, "1935_10_03", "neutral", null],
["tibet", neutral, "1935_10_03", "neutral", null],
["turkey", neutral, "1935_10_03", "neutral", null],
["uruguay", neutral, "1935_10_03", "neutral", null],
["usa", neutral, "1935_10_03", "neutral", null],
["vatican", neutral, "1935_10_03", "neutral", null],
["venezuela", neutral, "1935_10_03", "neutral", null],
["yemen", neutral, "1935_10_03", "neutral", null],
["yugoslavia", neutral, "1935_10_03", "neutral", null],
["australia", neutral, "1935_10_03", "neutral", null],
["bahamas", neutral, "1935_10_03", "neutral", null],
["bahrain", neutral, "1935_10_03", "neutral", null],
["barbados", neutral, "1935_10_03", "neutral", null],
["basutoland", neutral, "1935_10_03", "neutral", null],
["bechuanaland", neutral, "1935_10_03", "neutral", null],
["bermuda", neutral, "1935_10_03", "neutral", null],
["british_burma", neutral, "1935_10_03", "neutral", null],
["british_guiana", neutral, "1935_10_03", "neutral", null],
["british_honduras", neutral, "1935_10_03", "neutral", null],
["british_hong_kong", neutral, "1935_10_03", "neutral", null],
["british_leeward_islands", neutral, "1935_10_03", "neutral", null],
["british_malaya", neutral, "1935_10_03", "neutral", null],
["british_somaliland", neutral, "1935_10_03", "neutral", null],
["british_western_pacific_territories", neutral, "1935_10_03", "neutral", null],
["british_windward_islands", neutral, "1935_10_03", "neutral", null],
["brunei", neutral, "1935_10_03", "neutral", null],
["canada", neutral, "1935_10_03", "neutral", null],
["ceylon", neutral, "1935_10_03", "neutral", null],
["cyprus", neutral, "1935_10_03", "neutral", null],
["egypt", neutral, "1935_10_03", "neutral", null],
["falklands", neutral, "1935_10_03", "neutral", null],
["gambia", neutral, "1935_10_03", "neutral", null],
["gibraltar", neutral, "1935_10_03", "neutral", null],
["gold_coast", neutral, "1935_10_03", "neutral", null],
["india", neutral, "1935_10_03", "neutral", null],
["jamaica", neutral, "1935_10_03", "neutral", null],
["kenya", neutral, "1935_10_03", "neutral", null],
["kingdom_of_sikkim", neutral, "1935_10_03", "neutral", null],
["kuwait", neutral, "1935_10_03", "neutral", null],
["maldives", neutral, "1935_10_03", "neutral", null],
["malta", neutral, "1935_10_03", "neutral", null],
["mauritius", neutral, "1935_10_03", "neutral", null],
["new_zealand", neutral, "1935_10_03", "neutral", null],
["nigeria", neutral, "1935_10_03", "neutral", null],
["north_borneo", neutral, "1935_10_03", "neutral", null],
["northern_rhodesia", neutral, "1935_10_03", "neutral", null],
["nyasaland", neutral, "1935_10_03", "neutral", null],
["oman", neutral, "1935_10_03", "neutral", null],
["palestine", neutral, "1935_10_03", "neutral", stripes_neutral],
["qatar", neutral, "1935_10_03", "neutral", null],
["saint_helena", neutral, "1935_10_03", "neutral", null],
["sarawak", neutral, "1935_10_03", "neutral", null],
["seychelles", neutral, "1935_10_03", "neutral", null],
["sierra_leone", neutral, "1935_10_03", "neutral", null],
["south_africa", neutral, "1935_10_03", "neutral", null],
["southern_rhodesia", neutral, "1935_10_03", "neutral", null],
["swaziland", neutral, "1935_10_03", "neutral", null],
["transjordania", neutral, "1935_10_03", "neutral", null],
["trinidad_and_tobago", neutral, "1935_10_03", "neutral", null],
["tristan_de_cunha", neutral, "1935_10_03", "neutral", null],
["trucial_states", neutral, "1935_10_03", "neutral", null],
["uganda", neutral, "1935_10_03", "neutral", null],
["uk", neutral, "1935_10_03", "neutral", null],
["zanzibar", neutral, "1935_10_03", "neutral", null],
["france", neutral, "1935_10_03", "neutral", null],
["french_cameroon", neutral, "1935_10_03", "neutral", null],
["french_equatorial_africa", neutral, "1935_10_03", "neutral", null],
["french_guiana", neutral, "1935_10_03", "neutral", null],
["french_india", neutral, "1935_10_03", "neutral", null],
["french_indochina", neutral, "1935_10_03", "neutral", null],
["french_madagascar", neutral, "1935_10_03", "neutral", null],
["french_oceania", neutral, "1935_10_03", "neutral", null],
["french_somaliland", neutral, "1935_10_03", "neutral", null],
["french_syria", neutral, "1935_10_03", "neutral", null],
["french_togoland", neutral, "1935_10_03", "neutral", null],
["french_west_africa", neutral, "1935_10_03", "neutral", null],
["guadelupe", neutral, "1935_10_03", "neutral", null],
["inini", neutral, "1935_10_03", "neutral", null],
["martinique", neutral, "1935_10_03", "neutral", null],
["morocco", neutral, "1935_10_03", "neutral", null],
["tangiers", neutral, "1935_10_03", "neutral", null],
["tunis", neutral, "1935_10_03", "neutral", null],
["mongolia", neutral, "1935_10_03", "neutral", null],
["tannu_tuva", neutral, "1935_10_03", "neutral", null],
["ussr", neutral, "1935_10_03", "neutral", null],
["germany", neutral, "1935_10_03", "neutral", null],
["xinjiang", neutral, "1935_10_03", "neutral", null],
["chengdu_clique", uf_puppet, "1935_10_03", "uf_puppet", null],
["chongqing_clique", uf_puppet, "1935_10_03", "uf_puppet", null],
["guangdong_clique", uf_puppet, "1935_10_03", "uf_puppet", null],
["hebei_chahar_council", uf_puppet, "1935_12_18", "uf_puppet", null],
["hunan_clique", uf_puppet, "1935_10_03", "uf_puppet", null],
["mianyang_clique", uf_puppet, "1935_10_03", "uf_puppet", null],
["nanchong_clique", uf_puppet, "1935_10_03", "uf_puppet", null],
["new_guanxi_clique", uf_puppet, "1935_10_03", "uf_puppet", null],
["ningxia_ma_clique", uf_puppet, "1935_10_22", "uf_puppet", null],
["northeastern_army", uf_puppet, "1935_10_23", "uf_puppet", null],
["ningxia_ma_clique", uf_puppet, "1935_10_04", "uf_puppet", null],
["pailingmiao_council", uf_puppet, "1935_10_03", "uf_puppet", null],
["qinghai_ma_clique", uf_puppet, "1935_10_03", "uf_puppet", null],
["shandong_clique", uf_puppet, "1935_10_03", "uf_puppet", null],
["shanxi_clique", uf_puppet, "1935_10_23", "uf_puppet", null],
["tunganistan", uf_puppet, "1935_10_03", "uf_puppet", null],
["xikang_clique", uf_puppet, "1935_10_03", "uf_puppet", null],
["yunnan_clique", uf_puppet, "1935_10_03", "uf_puppet", null],
["china", uf, "1935_10_03", "uf", null],
["chinese_soviet_republic", comintern, "1935_10_22", "comintern", null],
["east_chahar", axis_puppet, "1935_10_03", "axis_puppet", null],
["east_hebei", axis_puppet, "1935_11_15", "axis_puppet", null],
["manchukuo", axis_puppet, "1935_10_03", "axis_puppet", null],
["japan", axis, "1935_10_03", "axis", null],
["japanese_korea", axis_puppet, "1935_10_03", "axis_puppet", null],
["japanese_taiwan", axis_puppet, "1935_10_03", "axis_puppet", null],
["kwantung_leased_territory", axis_puppet, "1935_10_03", "axis_puppet", null],
["south_seas_mandate", axis_puppet, "1935_10_03", "axis_puppet", null],
["ethiopia", finland, "1936_07_14", "finland", stripes_finland],
["italy", italy, "1935_10_03", "italy", null],
["italian_east_africa", italy_puppet, "1936_07_14", "italy_puppet", null],
["italian_libya", italy_puppet, "1935_10_03", "italy_puppet", null],
["republican_africa", comintern_puppet, "1936_10_14", "comintern_puppet", null],
["republican_spain", comintern, "1937_01_15", "comintern", null],
["ifni", axis_puppet, "1935_10_03", "axis_puppet", null],
["nationalist_spain", axis, "1937_01_15", "axis", null],
["nationalist_africa", axis_puppet, "1936_10_14", "axis_puppet", null],
["spanish_morocco", axis_puppet, "1936_07_18", "axis_puppet", null],
["spanish_sahara", axis_puppet, "1935_10_03", "axis_puppet", null]
]
and this is an example from the .geojson file:
{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"Name":"Spanish State","Status":"Nationalist faction in the Spanish civil war","Government":"Unitary personalist dictatorship","Party":"National Movement (Movimiento Nacional)","HoG":"Francisco Franco"},"geometry":{"type":"Polygon","coordinates":[[[-14.49955,28.101209],[-14.493713,28.083188],[-14.501953,28.080462],[-14.510193,28.067588],[-14.507961,28.064861],[-14.480152,28.076827],[-14.408226,28.057893],[-14.361019,28.046985],[-14.334068,28.042895],[-14.322052,28.048955],[-14.28566,28.083491],[-14.251671,28.11408],[-14.234848,28.142541],[-14.222145,28.162216],[-14.208412,28.164335],[-14.198799,28.173415],[-14.188156,28.171296],[-14.067307,28.198834],[-14.011002,28.207609],[-13.985252,28.22697],[-13.944397,28.22939],[-13.899937,28.275509],[-13.895645,28.288208],[-13.901653,28.303625],[-13.89925,28.303927],[-13.897705,28.31224],[-14.49955,28.101209]]]}}]}
handling of panes:
mymap.createPane('neutral');
mymap.createPane('uf_occupied');
mymap.createPane('uf_puppet');
mymap.createPane('uf');
mymap.createPane('allies_occupied');
mymap.createPane('allies_puppet');
mymap.createPane('allies');
mymap.createPane('comintern_occupied');
mymap.createPane('comintern_puppet');
mymap.createPane('comintern');
mymap.createPane('finland_occupied');
mymap.createPane('finland');
mymap.createPane('italy_occupied');
mymap.createPane('italy_puppet');
mymap.createPane('italy');
mymap.createPane('axis_occupied');
mymap.createPane('axis_puppet');
mymap.createPane('axis');
mymap.getPane('neutral_zone').style.zIndex = 252;
mymap.getPane('neutral').style.zIndex = 253;
mymap.getPane('uf_occupied').style.zIndex = 254;
mymap.getPane('uf_puppet').style.zIndex = 255;
mymap.getPane('uf').style.zIndex = 256;
mymap.getPane('allies_occupied').style.zIndex = 257;
mymap.getPane('allies_puppet').style.zIndex = 258;
mymap.getPane('allies').style.zIndex = 259;
mymap.getPane('comintern_occupied').style.zIndex = 260;
mymap.getPane('comintern_puppet').style.zIndex = 261;
mymap.getPane('comintern').style.zIndex = 262;
mymap.getPane('finland_occupied').style.zIndex = 263;
mymap.getPane('finland').style.zIndex = 264;
mymap.getPane('italy_occupied').style.zIndex = 265;
mymap.getPane('italy_puppet').style.zIndex = 266;
mymap.getPane('italy').style.zIndex = 267;
mymap.getPane('axis_occupied').style.zIndex = 268;
mymap.getPane('axis_puppet').style.zIndex = 269;
mymap.getPane('axis').style.zIndex = 270;```

Related

Is there any way to show the unique value in Dropdownbutton list?

My code is :
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text.rich(
TextSpan(
children: [
TextSpan(
text: 'Select District',
style: getSemiBoldStyle(
color: Colormanager.lightGrey,
fontSize: AppSize.s14),
),
TextSpan(
text: AppStrings.star,
style: getSemiBoldStyle(
color: Colormanager.red,
fontSize: AppSize.s14),
),
],
),
),
const SizedBox(
height: AppSize.s4,
),
DropdownSearch<CoverageArea>(
popupProps: PopupProps.menu(
showSearchBox: true,
// disabledItemFn: (String s) => s.startsWith('I'),
searchFieldProps: TextFieldProps(
style: getBoldStyle(
color: Colormanager.black,
fontSize: FontSize.s15),
),
itemBuilder: (context, item, isSelected) =>
isSelected
? Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
item.district!,
style: getBoldStyle(
color: Colormanager.primary),
),
)
: Container(
padding: const EdgeInsets.all(8.0),
margin: const EdgeInsets.only(
bottom: 4),
color: Colormanager.lightGrey
.withOpacity(0.2),
child: Text(
item.district!,
style: getBoldStyle(
color: Colormanager.black,
fontSize: FontSize.s15),
),
),
),
items: controller.coverageAreas,
dropdownDecoratorProps: DropDownDecoratorProps(
baseStyle:
getSemiBoldStyle(color: Colormanager.black),
dropdownSearchDecoration: const InputDecoration(
// labelText: "Menu mode",
// hintText: "country in menu mode",
),
),
onChanged: (value) {
controller.selectedDistrict = value;
controller.selectDistrict.value =
value!.district.toString();
},
itemAsString: (item) => item.district.toString(),
// selectedItem: controller.selectArea.value,
),
],
),
and the api call show me :
{
"Status": true,
"message": "Coverage Area List",
"data": [
{
"id": 898,
"inside": 0,
"zone_name": "OSD Operation",
"district": "Barguna",
"area": "Barguna Sadar",
"district_id": 35,
"zone_id": 14,
"post_code": null,
"h_delivery": null,
"oneRe": null,
"oneUr": null,
"plusRe": null,
"plusUr": null,
"cod": null,
"insurance": null,
"status": 0,
"created_at": "2023-01-17 15:40:08",
"updated_at": "2023-01-17 15:40:08"
},
{
"id": 897,
"inside": 0,
"zone_name": "OSD Operation",
"district": "Barguna",
"area": "Taltoly",
"district_id": 35,
"zone_id": 14,
"post_code": null,
"h_delivery": null,
"oneRe": null,
"oneUr": null,
"plusRe": null,
"plusUr": null,
"cod": null,
"insurance": null,
"status": 0,
"created_at": "2023-01-17 15:39:49",
"updated_at": "2023-01-17 15:39:49"
},
{
"id": 896,
"inside": 0,
"zone_name": "OSD Operation",
"district": "Barguna",
"area": "Amtoly",
"district_id": 35,
"zone_id": 14,
"post_code": null,
"h_delivery": null,
"oneRe": null,
"oneUr": null,
"plusRe": null,
"plusUr": null,
"cod": null,
"insurance": null,
"status": 0,
"created_at": "2023-01-17 15:39:29",
"updated_at": "2023-01-17 15:39:29"
},
{
"id": 895,
"inside": 0,
"zone_name": "OSD Operation",
"district": "Barguna",
"area": "Betage",
"district_id": 35,
"zone_id": 14,
"post_code": null,
"h_delivery": null,
"oneRe": null,
"oneUr": null,
"plusRe": null,
"plusUr": null,
"cod": null,
"insurance": null,
"status": 0,
"created_at": "2023-01-17 15:39:05",
"updated_at": "2023-01-17 15:39:05"
},
{
"id": 891,
"inside": 0,
"zone_name": "OSD Operation",
"district": "Barishal",
"area": "Barisal Bandor Thana",
"district_id": 33,
"zone_id": 14,
"post_code": null,
"h_delivery": null,
"oneRe": null,
"oneUr": null,
"plusRe": null,
"plusUr": null,
"cod": null,
"insurance": null,
"status": 0,
"created_at": "2023-01-17 15:35:28",
"updated_at": "2023-01-17 15:35:28"
},
so on..............
I want to show Barguna district just once and area in dependable dropdownbutton in next. but how can i do it???
This is the output
how can i just show one name just once???

While there are multiple items contains single value, I will suggest you to use String dataType instead of CoverageArea. then you can create a set of string from data.
So the item will be like
final List<String> items = controller.coverageAreas.map((e)=> e.district.trim()).toSet().toList();
now use this items on dropdown. and the value will be return as String DropdownSearch<String>(

how to get API data inside map in flutter

how do I get the API data here based on the user's choice, for example if the user chooses number 3 then the data that is issued is the data that is at number 3 in the API
final List<String> list = <String>['Ganjil', 'Genap' ];
final data = {
'Ganjil': [
'1', //I want to call API data here
'3', //I want to call API data here
'5', //I want to call API data here
'7', //I want to call API data here
],
'Genap': [
'2', //I want to call API data here
'4', //I want to call API data here
'6', //I want to call API data here
'8',
],
};
i want to call data based on existing id in API. how do i do it. Thank
you so when the user selects number 1 it will display API data with ID number 1
Container(
padding: const EdgeInsets.only(left: 12, right: 8),
width: double.infinity,
height: 50,
decoration: BoxDecoration(
color: Colors.white,
),
child: DropdownButtonHideUnderline(
child: DropdownButton(
hint: const Text(
'Pilih Semester',
),
isExpanded: true,
value: mainValue,
items: list
.map(
(e) => DropdownMenuItem<String?>(
value: e,
child: Text(
e,
style: regular5,
),
),
)
.toList(),
onChanged: (value) {
subValue = null;
mainValue = value;
setState(() {});
},
),
),
),
const SizedBox(
height: 16,
),
Text(
'Semester',
style: bold5,
),
const SizedBox(
height: 8,
),
Container(
padding: const EdgeInsets.only(left: 12, right: 8),
width: double.infinity,
height: 50,
decoration: BoxDecoration(
color: Colors.white,
),
child: DropdownButtonHideUnderline(
child: DropdownButton(
hint: Text(
'Pilih Semester',
style: regular5,
),
isExpanded: true,
value: subValue,
items: data[mainValue]
?.map(
(e) => DropdownMenuItem<String?>(
value: e,
child: Text(
e,
style: regular5,
),
),
)
.toList() ??
[],
onChanged: (value) {
subValue = value.toString();
setState(() {});
},
),
),
),
and this respon json
{
"status": "success",
"code": "200",
"data": {
"1": {
"id": "f732bbb0-a34a-474d-8829-23aa66470e22",
"id_dosen": "d6aedfb6-cf88-4e89-8365-0f206822a6c4",
"id_mk": "cb0bced5-a02d-4f46-bd88-6ed61daece10",
"nidn": null,
"dosen": "Yudhy",
"id_kelas_kuliah": "52deb32d-292f-44b9-af69-a90dfc5fbc81",
"kelas_kuliah": "Pendidikan agama islam III - Sistem Informasi - A",
"prodi": "Sistem Informasi",
"kelas": "KARYAWAN",
"semester": "5",
"kelompok_kelas": "A",
"kode": null,
"sks": 2,
"jumlah_kelas": 0,
"matakuliah": "Pendidikan agama islam III ( Islamic Religious Education III ) - A",
"smt": "2022-2023 GANJIL",
"bobot_sks": 2,
"rencana_pertemuan": 14,
"jenis_evaluasi": "KOGNITIF/PENGETAHUAN",
"created_at": "2022-09-09 08:14:14",
"updated_at": "2022-09-09 08:14:14",
"created_by": "Fahmi Nugraha",
"updated_by": "Fahmi Nugraha"
},
"2": {
"id": "3573bcf8-bf00-445b-91bb-8362e98f3e70",
"id_dosen": "d61b7164-cd6c-4bd9-8be8-d2a576790b9c",
"id_mk": "40f02349-887d-47c2-b190-9c5d62adf738",
"nidn": null,
"dosen": "Shadam Hussaeni",
"id_kelas_kuliah": "fb969bb3-e0d9-47ac-9ede-365c78e38994",
"kelas_kuliah": "Bahasa inggris III (Conversation) - Sistem Informasi - A",
"prodi": "Sistem Informasi",
"kelas": "KARYAWAN",
"semester": "5",
"kelompok_kelas": "A",
"kode": null,
"sks": 2,
"jumlah_kelas": 0,
"matakuliah": "Bahasa inggris III (Conversation) ( English III (Conversation) ) - A",
"smt": "2022-2023 GANJIL",
"bobot_sks": 2,
"rencana_pertemuan": 14,
"jenis_evaluasi": "KOGNITIF/PENGETAHUAN",
"created_at": "2022-09-14 08:05:31",
"updated_at": "2022-09-14 08:05:31",
"created_by": "Risca Nurzantika",
"updated_by": "Risca Nurzantika"
}, ...

You can call the API in onChange with the new mainValue
onChanged: (value) {
subValue = value.toString();
callAPI(); // Call API here
setState(() {});
}

Vega custom tooltip data visualisation

Could anyone help be to develop a tooltip at line chart that looks like this?
Here is my spec at Vega Lite Editor.

Tooltips work on key:value pairs. If you amend your input data to an object of key value pairs and create a flatten transform, you can achieve your desired behaviour. I have changed all the tooltips below to be identical for speed but you should see the pattern.
{
"description": "Total Count line chart.",
"width": 1200,
"height": 450,
"padding": 5,
"signals": [{"name": "interpolate", "value": "linear"}],
"legends": [
{
"fill": "color",
"orient": "bottom",
"direction": "horizontal",
"symbolType": "square"
}
],
"data": [
{
"name": "table",
"values": [
{
"x": 0,
"y": 30,
"c": "Passenger Vessel",
"tooltip": [
{
"title": "My Title",
"Tall Ship": 0,
"Sailing Yacht": 10,
"Super Yacht": 20,
"Motor Yacht": 10,
"Rib": 0
}
]
},
{
"x": 1,
"y": 20,
"c": "Passenger Vessel",
"tooltip": [
{
"title": "My Title",
"Tall Ship": 0,
"Sailing Yacht": 10,
"Super Yacht": 20,
"Motor Yacht": 10,
"Rib": 0
}
]
},
{
"x": 2,
"y": 90,
"c": "Passenger Vessel",
"tooltip": [
{
"Tall Ship": 0,
"Sailing Yacht": 10,
"Super Yacht": 20,
"Motor Yacht": 10,
"Rib": 0
}
]
},
{
"x": 3,
"y": 60,
"c": "Passenger Vessel",
"tooltip": [
{
"title": "My Title",
"Tall Ship": 0,
"Sailing Yacht": 10,
"Super Yacht": 20,
"Motor Yacht": 10,
"Rib": 0
}
]
},
{
"x": 4,
"y": 50,
"c": "Passenger Vessel",
"tooltip": [
{
"title": "My Title",
"Tall Ship": 0,
"Sailing Yacht": 10,
"Super Yacht": 20,
"Motor Yacht": 10,
"Rib": 0
}
]
},
{
"x": 5,
"y": 40,
"c": "Passenger Vessel",
"tooltip": [
{
"title": "My Title",
"Tall Ship": 0,
"Sailing Yacht": 10,
"Super Yacht": 20,
"Motor Yacht": 10,
"Rib": 0
}
]
},
{
"x": 6,
"y": 10,
"c": "Passenger Vessel",
"tooltip": [
{
"title": "My Title",
"Tall Ship": 0,
"Sailing Yacht": 10,
"Super Yacht": 20,
"Motor Yacht": 10,
"Rib": 0
}
]
},
{
"x": 0,
"y": 50,
"c": "Pleasure Craft",
"tooltip": [
{
"title": "My Title",
"Tall Ship": 0,
"Sailing Yacht": 10,
"Super Yacht": 20,
"Motor Yacht": 10,
"Rib": 0
}
]
},
{
"x": 1,
"y": 10,
"c": "Pleasure Craft",
"tooltip": [
{
"title": "My Title",
"Tall Ship": 0,
"Sailing Yacht": 10,
"Super Yacht": 20,
"Motor Yacht": 10,
"Rib": 0
}
]
},
{
"x": 2,
"y": 50,
"c": "Pleasure Craft",
"tooltip": [
{
"Tall Ship": 0,
"Sailing Yacht": 10,
"Super Yacht": 20,
"Motor Yacht": 10,
"Rib": 0
}
]
},
{
"x": 3,
"y": 40,
"c": "Pleasure Craft",
"tooltip": [
{
"title": "My Title",
"Tall Ship": 0,
"Sailing Yacht": 10,
"Super Yacht": 20,
"Motor Yacht": 10,
"Rib": 0
}
]
},
{
"x": 4,
"y": 110,
"c": "Pleasure Craft",
"tooltip": [
{
"title": "My Title",
"Tall Ship": 0,
"Sailing Yacht": 10,
"Super Yacht": 20,
"Motor Yacht": 10,
"Rib": 0
}
]
},
{
"x": 5,
"y": 40,
"c": "Pleasure Craft",
"tooltip": [
{
"title": "My Title",
"Tall Ship": 0,
"Sailing Yacht": 10,
"Super Yacht": 20,
"Motor Yacht": 10,
"Rib": 0
}
]
},
{
"x": 6,
"y": 20,
"c": "Pleasure Craft",
"tooltip": [
{
"title": "My Title",
"Tall Ship": 0,
"Sailing Yacht": 10,
"Super Yacht": 20,
"Motor Yacht": 10,
"Rib": 0
}
]
},
{"x": 0, "y": 50, "c": "Unknown", "tooltip": [{}]},
{"x": 1, "y": 60, "c": "Unknown", "tooltip": [{}]},
{"x": 2, "y": 90, "c": "Unknown", "tooltip": [{}]},
{"x": 3, "y": 40, "c": "Unknown", "tooltip": [{}]},
{"x": 4, "y": 50, "c": "Unknown", "tooltip": [{}]},
{"x": 5, "y": 20, "c": "Unknown", "tooltip": [{}]},
{"x": 6, "y": 40, "c": "Unknown", "tooltip": [{}]}
],
"transform": [{"type": "flatten", "fields": ["tooltip"]}]
}
],
"scales": [
{
"name": "x",
"type": "point",
"range": "width",
"domain": {"data": "table", "field": "x"}
},
{
"name": "y",
"type": "linear",
"range": "height",
"nice": true,
"zero": true,
"domain": {"data": "table", "field": "y"}
},
{
"name": "color",
"type": "ordinal",
"range": ["#BA20CE", "#60cf85", "#cd2c4f"],
"domain": {"data": "table", "field": "c"}
}
],
"axes": [
{"orient": "bottom", "scale": "x"},
{"orient": "left", "scale": "y"}
],
"config": {
"style": {
"guide-label": {"fontSize": 14, "fill": "#cccccc", "fontWeight": 800}
},
"axis": {"grid": true, "gridColor": "#333333"}
},
"marks": [
{
"type": "group",
"from": {"facet": {"name": "series", "data": "table", "groupby": "c"}},
"marks": [
{
"type": "line",
"from": {"data": "series"},
"encode": {
"enter": {
"x": {"scale": "x", "field": "x"},
"y": {"scale": "y", "field": "y"},
"stroke": {"scale": "color", "field": "c"},
"strokeWidth": {"value": 2}
},
"update": {
"interpolate": {"signal": "interpolate"},
"strokeOpacity": {"value": 1}
},
"hover": {"strokeOpacity": {"value": 0.5}}
}
},
{
"type": "symbol",
"from": {"data": "series"},
"encode": {
"update": {
"x": {"scale": "x", "field": "x"},
"y": {"scale": "y", "field": "y"},
"fillOpacity": {"value": 0}
},
"hover": {
"fillOpacity": {"value": 1},
"fill": {"scale": "color", "field": "c"},
"cursor": {"value": "pointer"},
"tooltip": {"signal": "datum['tooltip'] "}
}
}
}
]
}
]
}

Button problem in Flutter, how can I solve it?

I have a problem with a button in Flutter, as pressing it does not generate any events, and I can't think of any way to fix it.
CODE:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:fbutton/fbutton.dart';
import 'package:quiz_cisco1_0/quizprincipal.dart';
void main() => runApp(MyAppState());
class MyAppState extends StatelessWidget{
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: "Cisco Quiz",
home: Scaffold(
extendBodyBehindAppBar: true,
body: SafeArea(
child: Column(
children: [
Center(
child: Image.asset("assets/cisco_logo.png", width: 200, height: 200,),
),
Center(
child: Image.asset("assets/quizz.png", width: 200, height: 200,),
),
Text("La App Perfecta para prepararte", style: TextStyle(fontSize: 19.0,fontWeight: FontWeight.bold)),
Text("en Cisco CCNA 1,2 y 3", style: TextStyle(fontSize: 19.0, fontWeight: FontWeight.bold),),
SizedBox(height: 85.0),
FButton(
width: 185,
height: 60,
alignment: Alignment.center,
text: "Empezar",
style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold,fontSize: 20.0),
color: Colors.blue,
onPressed: (){
Navigator.push(context,
MaterialPageRoute(builder:(context) => MyAppsds()));
},
clickEffect: true,
corner: FCorner(
leftBottomCorner: 40,
leftTopCorner: 6,
rightTopCorner: 40,
rightBottomCorner: 6
),
),
],
),
),
),
);
}
}
CODE:
import 'package:flutter/material.dart';
import './quiz.dart';
import './result.dart';
import 'main.dart';
class MyAppsds extends StatefulWidget{
_MyAppState createState() {
return _MyAppState();
}
}
class _MyAppState extends State<MyAppsds> {
final _questions = const [
{
'questionText': '1. Un router con un sistema operativo válido contiene un archivo de configuración almacenado en la NVRAM. El archivo de configuración tiene una contraseña secreta de habilitación pero no una contraseña de consola. Cuando el router se inicie, ¿qué modo se mostrará?',
'answers': [
{'text': 'Modo de configuración global', 'score': -2},
{'text': 'Modo de ejecución privilegiado', 'score': -2},
{'text': 'Modo EXEC usuario', 'score': 10},
{'text': 'Modo de configuración', 'score': -2},
],
},
{
'questionText': ' 2.¿Por qué un switch de Capa 2 necesitaría una dirección IP?',
'answers': [
{'text': 'Para permitir que el switch envíe tramas de broadcast a los PCs conectados', 'score': -2},
{'text': 'Para permitir que el switch funcione como una puerta de enlace por defecto', 'score': -2},
{'text': 'Para permitir que el switch reciba tramas de los PCs conectados', 'score': -2},
{
'text':
'Para permitir que el switch sea administrado a distancia',
'score': 10
},
],
},
{
'questionText': ' 3.¿Cuál es el SVI por defecto en un switch Cisco?',
'answers': [
{'text': 'VLAN999', 'score': -2},
{'text': 'VLAN1', 'score': 10},
{'text': 'VLAN99', 'score': -2},
{'text': 'VLAN100', 'score': -2},
],
},
{
'questionText': '4.En el comando ‘show running-config’, ¿qué parte de la sintaxis está representada por ‘running-config’?',
'answers': [
{'text': 'Una palabra clave', 'score': 10},
{'text': 'El comando', 'score': -2},
{'text': 'Una variable', 'score': -2},
{'text': 'Un aviso', 'score': -2},
],
},
{
'questionText': '5.¿Qué tipo de tráfico de red requiere QoS?',
'answers': [
{'text': 'Video conferencia', 'score': 10},
{'text': 'Compra en línea', 'score': -2},
{'text': 'Wiki', 'score': -2},
{'text': 'Correo electrónico', 'score': -2},
],
},
{
'questionText': '6.¿En qué capa del modelo OSI se añadiría una dirección lógica durante el encapsulamiento?',
'answers': [
{'text': 'Capa física', 'score': -2},
{'text': 'Capa de enlace de datos', 'score': -2},
{'text': 'Capa de red', 'score': 10},
{'text': 'Capa de transporte', 'score': -2},
],
},
];
var _questionIndex = 0;
var _totalScore = 0;
void _resetQuiz() {
setState(() {
_questionIndex = 0;
_totalScore = 0;
});
}
void _answerQuestion(int score) {
_totalScore += score;
setState(() {
_questionIndex = _questionIndex + 1;
});
print(_questionIndex);
if (_questionIndex < _questions.length) {
print('We have more questions!');
} else {
print('No more questions!');
}
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Quiz Cisco'),
flexibleSpace: Image(
image: AssetImage('assets/banner.jpg'),
fit: BoxFit.cover,
),
backgroundColor: Colors.transparent,
),
body: Padding(
padding: const EdgeInsets.all(30.0),
child: _questionIndex < _questions.length
? Quiz(
answerQuestion: _answerQuestion,
questionIndex: _questionIndex,
questions: _questions,
) //Quiz
: Result(_totalScore, _resetQuiz),
), //Padding
), //Scaffold
debugShowCheckedModeBanner: false,
); //MaterialApp
}
}
error:
Exception caught by gesture
The following assertion was thrown while handling a gesture:
Navigator operation requested with a context that does not include a Navigator.
The context used to push or pop routes from the Navigator must be that of a widget that is a descendant of a Navigator widget.
When the exception was thrown, this was the stack:
#0 Navigator.of. (package:flutter/src/widgets/navigator.dart:2711:9)
#1 Navigator.of (package:flutter/src/widgets/navigator.dart:2718:6)
#2 Navigator.push (package:flutter/src/widgets/navigator.dart:2116:22)
#3 MyAppState.build. (package:quiz_cisco1_0/main.dart:37:29)
#4 _FButton.onPressed (package:fbutton/fbutton.dart:561:23)
...
Handler: "onTap"
Recognizer: TapGestureRecognizer#665d0
debugOwner: GestureDetector
state: possible
won arena
finalPosition: Offset(184.2, 566.6)
finalLocalPosition: Offset(96.7, 6.1)
button: 1
sent tap down

In MyAppState, the context you're using cannot find the MaterialApp (which includes a default Navigator widget). To have a context with the MaterialApp, separate the Scaffold into a different StatelessWidget.
Sample:
FROM
...
home: Scaffold(
...
TO
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(...);
}
}
Also, in _MyAppState, you can remove the MaterialApp and just return a Scaffold. In MyAppsds, don't forget to put #override in createState().
I would also suggest to change the name of _MyAppState. Recommended name for State classes would be _<StatefulWidget name>State. (setting it to private is optional)
Sample: _MyAppsdsState

Display mapping list into column for flutter

Right now i have this mapping list
List<Map<String, String>> productMap = [];
And it contain [{numOfDay: 0, amount: 814.75}, {numOfDay: 1, amount: 0.00}, {numOfDay: 2, amount: 0.00}, {numOfDay: 3, amount: 0.00}, {numOfDay: 4, amount: 0.00}, {numOfDay: 5, amount: 0.00}, {numOfDay: 6, amount: 0.00}, {numOfDay: 7, amount: 0.00}, {numOfDay: 8, amount: 0.00}, {numOfDay: 9, amount: 0.00}, {numOfDay: 10, amount: 0.00}, {numOfDay: 11, amount: 0.00}, {numOfDay: 12, amount: 0.00}]
How do i display it into a column to become something like this

You can display 'producMap' List data like below.
But you should modify or add layout style.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: "landRegistration App",
theme: new ThemeData(primarySwatch: Colors.amber),
home: Test(),
);
}
}
class Test extends StatefulWidget {
#override
_TestState createState() => _TestState();
}
class _TestState extends State<Test> {
final List<Map<String, String>> productMap = [
{"numOfDay": '0', "amount": '814.75'},
{"numOfDay": '1', "amount": '0.00'},
{"numOfDay": '2', "amount": '0.00'},
{"numOfDay": '3', "amount": '0.00'},
{"numOfDay": '4', "amount": '0.00'},
{"numOfDay": '5', "amount": '0.00'},
{"numOfDay": '6', "amount": '0.00'},
{"numOfDay": '7', "amount": '0.00'},
{"numOfDay": '8', "amount": '0.00'},
{"numOfDay": '9', "amount": '0.00'},
{"numOfDay": '10', "amount": '0.00'},
{"numOfDay": '11', "amount": '0.00'},
{"numOfDay": '12', "amount": '0.00'}
];
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: "Title",
theme: new ThemeData(primarySwatch: Colors.amber),
home: Scaffold(
body: SafeArea(
child: Container(
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Text('No of Day'),
Text('Amount(RM)'),
],
),
Divider(height: 1),
ListView.separated(
shrinkWrap: true,
itemCount: productMap.length,
separatorBuilder: (BuildContext context, int index) {
return SizedBox(height: 10);
},
itemBuilder: (context, index) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text(productMap[index]['numOfDay']),
SizedBox(width: 20),
Text(productMap[index]['amount']),
],
);
},
)
],
),
),
),
),
);
}
}

In Flutter you can use two widget called Colum and Row that can emulate the behaviour of a table.
Note that your data source is not List<Map<String, String>> but List<dynamic>
You code should starting like this:
import 'package:flutter/material.dart';
class TableWidget extends StatelessWidget {
final List<dynamic> productMap = [
{"numOfDay": 0, "amount": 814.75},
{"numOfDay": 1, "amount": 0.00},
{"numOfDay": 2, "amount": 0.00},
{"numOfDay": 3, "amount": 0.00},
{"numOfDay": 4, "amount": 0.00},
{"numOfDay": 5, "amount": 0.00},
{"numOfDay": 6, "amount": 0.00},
{"numOfDay": 7, "amount": 0.00},
{"numOfDay": 8, "amount": 0.00},
{"numOfDay": 9, "amount": 0.00},
{"numOfDay": 10, "amount": 0.00},
{"numOfDay": 11, "amount": 0.00},
{"numOfDay": 12, "amount": 0.00}
];
#override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: EdgeInsets.all(50.0),
child: Column(children: [
Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
Text("No o Day"),
Text("Amount (RM)"),
]),
..._getBody(),
]),
),
);
}
_getBody() {
return productMap.map((e) => Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
Text(e["numOfDay"].toString()),
Text(e["amount"].toString()),
]));
}
}
Output:

We Keep Coding

iphone swift flutter scala powershell matlab mongodb postgresql perl eclipse

Leaflet shapes move on zoom - leaflet

Related

Is there any way to show the unique value in Dropdownbutton list?

how to get API data inside map in flutter

Vega custom tooltip data visualisation

Button problem in Flutter, how can I solve it?

Display mapping list into column for flutter

Categories

Resources