I'm using syncfusion_flutter_maps to draw an arc on the map between two locations i want to get the center (latitude,longitude) of this arc.
SfMaps(
layers: [
MapShapeLayer(
source: dataSource,
sublayers: [
MapArcLayer(
arcs: List<MapArc>.generate(
data.length,
(int index) {
return MapArc(
from: data[index].from,
to: data[index].to,
width: 4,
);
},
).toSet(),
),
],
zoomPanBehavior: zoomPanBehavior,
)
The result will be something like this
or this
Related
I am facing an issue when update a copy RxList and modify some field then original data also change.
Please you help me, how to make change without effect to the original data?
This mean that, when I click on checkBox then copyList elemnt change to TRUE and not affect to drniks list but current it changes both.
#mock data
List<Drink> drinks = [
Drink(id: 0, name: "Coca Cola",isChecked: false),
Drink(id: 1, name: "Milk",isChecked: false),
Drink(id: 2, name: "Soda",isChecked: false),
];
I want to build a checkbox by listing these above mock data
var drinkIds = <int>[];
var copyList = drinks;
#override
Widget build(BuildContext context) {
return Obx(()=>ListView.builder(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
padding: EdgeInsets.zero,
itemCount: copyList.length;
itemBuilder:(_,index)=>ListTitle(
minLeadingWidth: 10,
visualDensity: VisualDensity(vertical: -4),
contentPadding: EdgeInsets.zero,
title: Text("${copyList[index].title}"),
leading: copyList[index].isChecked ? Icon(Icons.check_box_outlined, color: primaryColor) : Icon(Icons.check_box_outline_blank, color: Colors.grey),
onTap: () {
copyList[index].isChecked = !copyList[index].isChecked;
if (copyList[index].isChecked) {
drinkIds.add(copyList[index].id);
} else {
drinkIds.removeWhere((element) => element == copyList[index].id);
}
copyList.refresh();
},
)
));
}
You can copy list by spread operators
List newList = [...drinks];
Map newMap = {...myMap}; // this is same for maps
The newList is copy of drinks and now you can work with it without effects on original
read this article
read about dart feature
I am trying to set images coming from my database as icons for every point in the map. So far it kind of works , but it is to slow to load images and I believe this would not be scalable in the future. Futhermore, the app, at least in debug mode, crashes with out of memory issues.
Currently, I am using flutter_maps package to display my map:
return FlutterMap(
options:
MapOptions(
//center: tomtomCenter,
zoom: 1.0),
layers: [
TileLayerOptions(
minNativeZoom: 1.0,
backgroundColor: Colors.transparent,
urlTemplate:
"https://api.tomtom.com/map/1/tile/basic/main/"
"{z}/{x}/{y}.png?key={apiKey}",
attributionBuilder: (_) {
return const Text("© OpenStreetMap contributors");
},
additionalOptions: {"apiKey": TOMTOM_APIKEY},
),
MarkerLayerOptions(
markers: [
//_buildMarker( tomtomCenter, 'tomtomCenter'),
for (var mark in snapshot.data)
//{
_buildMarker(LatLng(mark['latitude'], mark['longitude']), 'Others', mark['DogImg'].url.toString())
//}
],
),
],
);
}
every point is defined in this function:
Marker _buildMarker(LatLng latLng, String currentLocation, String dogimg) {
return Marker(
point: latLng,
width: 10.0,
height: 10.0,
//anchorPos: AnchorPos.exactly(Anchor(2, 2)),
builder: (BuildContext context) =>
ClipRRect(child: Image.network(dogimg),)
);
}
I do not think that loading that amount of images through http request is the best idea, right?
I saw in other packages like google maps that load images (in that case from assets but there should be also for network requests) which look lighter
BitmapDescriptor markerbitmap = await BitmapDescriptor.fromAssetImage(
ImageConfiguration(),
"assets/images/bike.png",
);
I am developing a simple application that spins a fortune wheel based on Flutter_Fortune_Wheel. So far everything works as expected except I have kept the size of the wheel small to accomodate other screen assets and the TriangleIndicator size is too large. How do I specify a smaller sized TriangleIndicator?
Applicable code follows:
FortuneWheel(
animateFirst: false,
onAnimationEnd: () {
widget.callback(wheelContents[letterInt]);
if (wheelContents.length > 1) {
wheelContents.removeAt(letterInt);
} else {
print('***** Puzzle Solved!*****');
}
},
selected: selected.stream,
indicators: const <FortuneIndicator>[
FortuneIndicator(
alignment: Alignment
.topCenter, // <-- changing the position of the indicator
child: TriangleIndicator(
color:
Colors.amber, // <-- changing the color of the indicator
),
),
],
items: [
for (var ltr in wheelContents) FortuneItem(child: Text(ltr)),
],
),
TIA
I am trying to create polyline map using mapbox, which I am able to create properly.
User can come back and can see see polyline maps in his profile.
Doubt - Is there any way I can convert my list of lat long into some format and store in db and later on we fetch it from db and render map?
I checked geojson format also but if we use geoJson with mapbox it generates static maps.
I am using flutter_map to generate maps.
Updated -
var geoJson = {
"type": "polyline",
"coordinates": [
[
76.61219358444214,
27.555764420824236
],
[
76.6120433807373,
27.55395717009122
],
[
76.61094903945923,
27.55285378133631
],
[
76.61021947860718,
27.55138892051556
],
[
76.61000490188599,
27.550285505956428
],
[
76.6101336479187,
27.549372326903264
],
[
76.6107988357544,
27.548287916916344
],
[
76.61150693893433,
27.547831320034653
],
[
76.61109924316406,
27.54568148421033
],
[
76.61097049713135,
27.54391211873852
]
]
}
Currently I am using flutter_map package and using below code to render map.
var points = [LatLng(latitude:27.591585, longitude:76.61139), LatLng(latitude:27.591548, longitude:76.611397), LatLng(latitude:27.591473, longitude:76.611407), LatLng(latitude:27.591437, longitude:76.611413), LatLng(latitude:27.591362, longitude:76.611425), LatLng(latitude:27.591325, longitude:76.61143), LatLng(latitude:27.59125, longitude:76.611442), LatLng(latitude:27.591177, longitude:76.611452), LatLng(latitude:27.59114, longitude:76.611458), LatLng(latitude:27.591065, longitude:76.61147), LatLng(latitude:27.591028, longitude:76.611475), LatLng(latitude:27.591007, longitude:76.611587), LatLng(latitude:27.591013, longitude:76.611693), LatLng(latitude:27.590777, longitude:76.611805), LatLng(latitude:27.590657, longitude:76.611822), LatLng(latitude:27.590535, longitude:76.61184), LatLng(latitude:27.590413, longitude:76.611857), LatLng(latitude:27.590293, longitude:76.611875), LatLng(latitude:27.590172, longitude:76.611892)]
return new Scaffold(
appBar: new AppBar(title: new Text('Leaflet Maps')),
body: new FlutterMap(
options: new MapOptions(
center: new LatLng(27.563896, 76.600460), minZoom: 10.0),
layers: [
new TileLayerOptions(
urlTemplate:
"https://api.mapbox.com/styles/v1/jainaman8/ckd5v8bs00zm01ir3w3bjrrb3/tiles/256/{z}/{x}/{y}#2x?access_token=ACCESS_TOKEN",
additionalOptions: {
'accessToken': '',
'id': 'mapbox.mapbox-streets-v8'
}
),
new PolylineLayerOptions(
polylines: [
new Polyline(
points: points,
strokeWidth: 2.0,
color: Colors.red
)
]
)
I want to store geoJson object into firebase and then pull this data from there and render map using mapbox.
I read on google that firebase does not support arrays so another doubt is that how can I store this data on firebase ?
You can do the desired by making a collection of field of type geopoint and then get those fields in your flutter project.
Thank you for reading this question.
I'm very new to dart/flutter and I'm trying to write some code so that I can create a list of the actDescriptions where they have more than 1 traits associated to them, showing the associated traits.
Thank you again.
const ACTION_DATA = const [
ActionOutput(
id: 'a1',
actDescription: 'Avoid caffeine 4 hours before going to bed for high quality sleep.',
traits: [
'T_CAFFEINE_INTAKE_BAND',
],
),
ActionOutput(
id: 'a2',
actDescription: 'Avoid caffeine altogether if you struggle with falling asleep.',
traits: [
'T_CAFFEINE_INTAKE_BAND',
'T_SLEEP_BAND',
],
),
ActionOutput(
id: 'a3',
actDescription: 'Use caffeine to boost exercise performance.',
traits: [
'T_CAFFEINE_INTAKE_BAND',
],
),
ActionOutput(
id: 'a4',
actDescription: 'If you have caffeine pre-workout, have it around 30-15 minutes before you train.',
traits: [
'T_CAFFEINE_INTAKE_BAND',
],
),
ActionOutput(
id: 'a5',
actDescription: 'Don\'t use coffee as a \"pick me up\" during the day.',
traits: [
'T_CAFFEINE_INTAKE_BAND',
],
),
];
You can use the ListView.builder constructor to create a scrollable list of your ActionOutput items. The constructor expects an itemBuilder, which is just callback function that is expected to create and return a new item for the desired index in your list.
In the example below we use the ListView.builder and delegate the item widget creation to the _buildActionItem method.
Widget _buildTraitItem(trait) {
// this can be any widget to display a trait
return Text(trait);
}
Widget _buildActionItem(ActionOutput action) {
// create a new action item
// this can be any widget, here we use a simple container with a single column
// and a row for the traits
// build a list of trait items
final traits = action.traits.map(_buildTraitItem).toList();
return Container(
height: 50,
child: Column(
children: [
Text(action.actDescription),
Row(
// use the list of items in this row
children: traits
)
]
)
);
}
#override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: ACTION_DATA.length,
itemBuilder: (context, index) {
// create an item for the requested index based on the item data
return _buildActionItem(ACTION_DATA[index]);
},
);
}
For more examples on how to create a list see the ListView documentation.