Flutter dart Gmaps Polygons "Integraty check" - google-maps

i am new to flutter and i am trying to let users define zones in gmap by using marks to draw polygons.
Example of a zone, with 3 markers/point
So, now what i want is to check if the user is not trying to do some like crossing the lines like this:
Check for this not to happen
the numbers shown in the markers are not relavant, so i could do some math between coordinates and just redraw the polygon, but i wanted to avoid that just cause im lazy =)
and i noticed that when you cross the lines the polygon is not filled anymore, so it has some kind of internal check, that i would like to access if possible.
I am using Gmap and drawing the polygons with following code:
...
Map<MarkerId, Marker> markers = <MarkerId, Marker>{};
int lastMarkerID = 0;
Set<Polygon> _polygons = HashSet<Polygon>();
...
#override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(title: Text('Add Zone')),
body: Stack(
children: <Widget>[
GoogleMap(
onMapCreated: _onMapCreated,
initialCameraPosition: _kGoogleInitialCamera,
onLongPress: (latlang) {
_addMarkerLongPressed(latlang);
},
markers: Set<Marker>.of(markers.values),
polygons: _polygons,
polylines: _polylines,
),
],
),
);
}
...
Future _addMarkerLongPressed(LatLng latlong, [_lastMarkerID]) async {
_lastMarkerID ?? lastMarkerID++;
_lastMarkerID = _lastMarkerID ?? lastMarkerID;
final MarkerId markerId = MarkerId(_lastMarkerID.toString());
Marker marker = Marker(
markerId: markerId,
draggable: true,
position: latlong,
onDragEnd: ((value) {
_addMarkerLongPressed(value, _lastMarkerID);
}),
infoWindow: InfoWindow(
title: markerId.value,
),
consumeTapEvents: true,
onTap: _showDialog(
context, <String>["Delete Marker"], _lastMarkerID, _deleteMarker),
icon: await createCustomMarkerBitmap(markerId.value),
);
markers[markerId] = marker;
_setPolygons();
setState(() {});
}
...
void _setPolygons() {
_polygons.clear();
List<LatLng> polygonLatLongs = List<LatLng>();
markers.forEach((key, value) {
Commons.log(value.position);
polygonLatLongs.add(value.position);
});
if (polygonLatLongs.length >= 3) {
_setPolylines(polygonLatLongs);
polygonLatLongs.add(polygonLatLongs.first);
}
_polygons.add(
Polygon(
polygonId: PolygonId("0"),
points: polygonLatLongs,
fillColor: Commons.colorPolygonAddZone,
strokeColor: Commons.colorPolygonStrokeAddZone,
strokeWidth: Commons.strokeWidthPolygonAddZone,
),
);
}
As i said i'm new to this so feel free to sugeste other ways to achive this.
I could only find posts about check if a point is inside the polygon sorry if it's repeated question.

Related

Issue with initializing. How can I convert something like this to a static member? if that's what I need to do

I'm trying to pass data from text inputs (lat, long, radius) to plot a circle:
Map<double, double> n1 = (platitude)
.map((key, value) => MapEntry(double.parse(key), double.parse(value)));
List longitudelist = platitude.values.toList();
Future<void> _makeCircles() async {
setState(() {
circles = Set.from([
Circle(
circleId: CircleId("none"),
center: LatLng(platitude, plongitude),
radius: radius,
fillColor: Color.fromRGBO(255, 255, 255, .5),
strokeColor: Color.fromRGBO(247, 16, 0, .4))
]);
});
}
I'm unsuccessful in converting to double as required by center: LatLng because the values are not static. Anybody know a workaround?
Edit:
As requested, I've added more code to make this more reproducible:
This is how I'm grabbing my latitude, longitude, and radius as strings from user input:
TextFormField(
style: TextStyle(
color: Colors.white,
),
initialValue: "33.2038241",
decoration: InputDecoration(
hintText: 'Enter latitude',
),
onChanged: (String value) {
platitude = value;
},
),
You can ignore the initial value, that was for testing only.
Now, I'm trying to pass that string into Geolocator's center: LatLng(platitude, plongitude). as shown above.
This requires values as a double. I tried converting to a double like so:
var platitude = double.parse(platitude);
This doesn't work. "Only Static Members can be accessed as initializers."
So, I did a bit of research and tried calling it in initstate like so:
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
#override
void initState() {
super.initState();
getLocation();
platitude = new TextFormField(
keyboardType: TextInputType.emailAddress,
controller: filterController);
plongitude = new TextFormField(
keyboardType: TextInputType.emailAddress,
controller: filterController);
radius = new TextFormField(
keyboardType: TextInputType.emailAddress,
controller: filterController);
}
double n1 = double.parse(platitude);
TabController _tabController;
final filterController = new TextEditingController(text: "Search");
TextFormField platitude;
TextFormField plongitude;
TextFormField radius;
This resulted in "The argument TextFormField cant be assigned String" and "Only static members can be accessed..."
Anybody know how I can make this work? :/
The error is telling that you can't do:
double n1 = double.parse(platitude);
in the class definition because platitude isn't static. Inline initializers (that aren't late) for non-static members in the class definition are executed when the object is constructed. It does not make sense to initialize non-static members from other non-static members because those other members aren't initialized yet. More specifically in your example, platitude won't be initialized until after initState is called.
In general, if you want to initialize a non-static member from another non-static member, instead just nee to move the initialization somewhere else. Since n1 depends on platitude, it'd make sense to initialize n1 right after you initialize platitude in initState.
That said, in your case, that also does not make sense. You probably don't want to initialize it right after you create an empty TextFormField. Furthermore, double.parse expects a String argument, not a TextFormField.
You probably want to do sometihng like:
#override
void initState() {
...
platitude = TextFormField(
...
onSaved: (String value) => n1 = double.parse(value),
);
(It's also odd to do that work in initState; usually you'd just construct widgets such as TextFormField in the build method instead.)
Update:-
Do this instead,
var latitude, longitude;
Future<void> _makeCircles() async {
setState(() {
circles = Set.from([
Circle(
circleId: CircleId("none"),
center: LatLng(double.parse(latitude), double.parse(longitude)),
radius: radius,
fillColor: Color.fromRGBO(255, 255, 255, .5),
strokeColor: Color.fromRGBO(247, 16, 0, .4))
]);
});
}
And, in your TextFormFields,
TextFormField(
style: TextStyle(
color: Colors.white,
),
initialValue: "33.2038241",
decoration: InputDecoration(
hintText: 'Enter latitude',
),
onChanged: (String value) {
latitude=value;
},
),
Now, you can call the method _makeCircles() whenever needed, but make sure you always call that after getting the latitude and longitude initialised, as, if you will call the method before that, it'll throw a noSuchMethod error.

Update custom marker's icons depending on a variable in Flutter

I'm a total noob with flutter and I'm trying to create an app that shows me some markers on a map pointing the location of some sensors. The icons for the markers will be different depending on the data collected for each sensor.
So far I have managed to:
show the map on users location
Place markers for all the sensors
Change marker icon to a custom icon
Add dialog box, containing
sensor's data, for each marker
What I need:
Use different icons for markers depending on sensor's data
This is how I display markers on the map:
#override
Widget build(BuildContext context) {
var userLocation = Provider.of<UserLocation>(context );
Set<Marker> markers = Set();
//this cycle creates markers with sensor's data
for(var i=0; i < sensors.length ; i++){
var tempF=(strSensors[i]["temp_f"]).toString();
double pm2_5= double.parse(strSensors[i]["PM2_5Value"]);
//It returns a tuple wit Aqi value(item1) and description(item2). Depending on item1 value the marker's icon should change.
var Aqi=AqiCalculation().AqiValue(pm2_5);
//my attempt to update the value of the asset's path depending on Aqi.item1 value
setState((){
marcador=updateCustomMapPin(Aqi.item1);
});
Marker resultMarker = Marker(
markerId: MarkerId(strSensors[i]["ID"].toString()),
position: LatLng(strSensors[i]["Lat"].toDouble(),strSensors[i]["Lon"].toDouble()),
icon: BitmapDescriptor.fromBytes(markerIcon),
onTap: (){
//shows an image in dialog box depending on Aqi value
if(Aqi.item1 > 80){
image="https://i.gifer.com/72fB.gif";
}
else{
image= "https://raw.githubusercontent.com/Shashank02051997/FancyGifDialog-Android/master/GIF's/gif14.gif";
}
String tempC;
tempC=((int.parse(tempF)-32)/1.8).toStringAsPrecision(4);
showDialog<void>(
context: context,
builder: (_) => NetworkGiffyDialog(
key: keys[1],
image: Image.network(
image,
fit: BoxFit.cover,
// alignment:Alignment.bottomLeft,
),
entryAnimation: EntryAnimation.TOP_LEFT,
title: Text('Sensor: ${strSensors[i]["Label"]}'
,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 22.0, fontWeight: FontWeight.bold),
),
description: Text(
'PM2.5: $pm2_5 Temp:${tempC}° Aqi:${Aqi.item1} Status:${Aqi.item2}',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 22.0, fontWeight: FontWeight.normal),
),
onlyOkButton: true,
onOkButtonPressed: (){
Navigator.pop(context);//closes dialogbox
},
)
);
}
);
// Add it to Set
markers.add(resultMarker);
}
To change the default marker icon I did this:
#override
void initState(){
super.initState();
setCustomMappin('android/assets/Cloudgray.png');
}
//Converts image to Unint8List
Future<Uint8List> getBytesFromAsset(String path, int width) async {
ByteData data = await rootBundle.load(path);
ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List(), targetWidth: width);
ui.FrameInfo fi = await codec.getNextFrame();
return (await fi.image.toByteData(format: ui.ImageByteFormat.png)).buffer.asUint8List();
}
void setCustomMappin(marker)async {
markerIcon = await getBytesFromAsset(marker, 150);
}
This changes all the icons to my default icon's asset. I tried to update the asset's path dynamically by passing this on the loop that creates all the markers:
setState((){
marcador=updateCustomMapPin(Aqi.item1);
});
which uses this function:
//returns icon path depending on the value
updateCustomMapPin(value) {
String marker='';
if(value<=50){
marker = 'android/assets/Cloudgreen.png';
}
else if(value>50 && value<=100){
marker='android/assets/Cloudyellow.png';
}
else if(value>100 && value<=150){
marker='android/assets/CloudOrange.png';
}
else if(value>150 && value<=200){
marker='android/assets/Cloudred.png';
}
else if(value>200 && value<=300){
marker='android/assets/Cloudpurple.png';
}
else{
marker='android/assets/Cloudtoxic.png';
}
return marker;
}
And this is where I'm stuck, the marker's icon doesn't change despite that, at the moment when every marker is created the proper icon is indicated.
Maybe is a problem of me understanding the life cycle of a Flutter app, I hope you can help me.
I'm sorry, I can't use comment.
What happen if you add log in setState ?
I solve this by setting all the custom pins in the initState method, the problem occurred beacause the convertion of the images to bytes is an async process and due to the way I set the dynamic election of the markers it didn't have enough time to make that convertion.
So what I did was set a method that converted every image to bytes in the initState, pass those values to global variables and then use them in a conditional for every case.

how to draw some markers and make it different each other (flutter google map)

i have tried this to customize marker on flutter_google_maps and this to change widget into bytes, since we could change marker using bytes, not widget.
i actually solve the problem if i use only one type of marker like this:
but things are different where the requirement design just like this:
so how do i solve the problem?
here some code i use, but the result output is first image above, not as expected.
-> method to change widget into image
import 'dart:ui' as ui;
GlobalKey<ScaffoldState> keyScaffold = new GlobalKey<ScaffoldState>();
Future<Uint8List> _capturePng() async {
try {
RenderRepaintBoundary boundary =
keyScaffold.currentContext.findRenderObject();
ui.Image image = await boundary.toImage(pixelRatio: 3.0);
ByteData byteData =
await image.toByteData(format: ui.ImageByteFormat.png);
Uint8List pngBytes = byteData.buffer.asUint8List();
return pngBytes;
} catch (e) {
print(e);
}
}
bool rendering = true;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Peta'),
),
body: rendering
? renderWidgetToImage()
: renderGoogleMap()
);
-> method to render widget before converted
String title;
Widget renderWidgetToImage() {
return RepaintBoundary(
key: keyScaffold,
child: Container(
margin: EdgeInsets.only(top: 30, left: 10, right: 10, bottom: 20),
decoration: BoxDecoration(
border: Border.all(color: Colors.black),
color: Colors.green,
),
child: Text(
title,
style: TextStyle(
fontSize: 10
),
)),
);
}
-> method to programmatically add marker using widget
final Set<Marker> _markers = {};
#override
void initState() {
super.initState();
var arrMarker = <MarkerMap>[
MarkerMap("Text Widget 3","123",3.59196,98.672226),
MarkerMap("Text Widget 2","456",3.49196,97.572226),
MarkerMap("Text Widget 1","789",3.39196,97.772226),
];
for(int i =0; i< arrMarker.length; i++) {
setState(() {
this.title = arrMarker[i].title;
});
BitmapDescriptor.fromAssetImage(
ImageConfiguration(size: Size(48, 48)), DefaultImageLocation.iconAnalog)
.then((onValue) async {
var png = await _capturePng(keyScaffold);
setState(() {
this.myIcon = BitmapDescriptor.fromBytes(png);
this.rendering = false;
});
setState(() {
_markers.add(
Marker(
markerId: MarkerId(arrMarker[i].id),
position: LatLng(arrMarker[i].pos1, arrMarker[i].pos2),
icon: BitmapDescriptor.fromBytes(png),
),
);
});
});
setState(() {
this.rendering = true;
});
}
any help would be appreciated, thank you
Currently, this is now possible using the steps provided in this blog.
As mentioned in the intro:
We need to paint a Widget and then convert it to bitmap. But its
tricky because you cant simply do that. we have to place into widget
tree and fetch its painted bitmap.
For a rough summary, the steps mentioned were:
First
We need to get our bitmaps right after they are drawn. There
are multiple ways to do this, I use tiny AfterLayoutMixin available
here.
Second
Lets create our custom widget, yay!
My widget accepts name as an parameter. I used ClipPath for the
triangular Pointer arrow.
Third
Lets create a location object and list of locations and a
method to generate widgets from the location list.

How to zoom between two Google map markers in flutter

I'm using the google_maps_flutter package and I'm trying to figure a way to zoom the camera between two placed markers with known positions. Any pointers or sample code would be appreciated.
To zoom between two Lat Lng bounds in google map, you can do as below:
First of all import below library in pubspec.yaml otherwise with the older version, you might not be able to see "getVisibleRegion()" method with google
map controller.
google_maps_flutter: ^0.5.12
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
Completer<GoogleMapController> _controller = Completer();
GoogleMapController mapController;
LatLng _lastMapPosition = _center;
static const LatLng _center = const LatLng(45.521563, -122.677433);
final Set<Marker> _markers = {};
void _onMapCreated(GoogleMapController controller) {
mapController = controller;
_controller.complete(controller);
LatLng latLng_1 = LatLng(40.416775, -3.70379);
LatLng latLng_2 = LatLng(41.385064, 2.173403);
LatLngBounds bound = LatLngBounds(southwest: latLng_1, northeast: latLng_2);
setState(() {
_markers.clear();
addMarker(latLng_1, "Madrid", "5 Star Rating");
addMarker(latLng_2, "Barcelona", "7 Star Rating");
});
CameraUpdate u2 = CameraUpdate.newLatLngBounds(bound, 50);
this.mapController.animateCamera(u2).then((void v){
check(u2,this.mapController);
});
}
void addMarker(LatLng mLatLng, String mTitle, String mDescription){
_markers.add(Marker(
// This marker id can be anything that uniquely identifies each marker.
markerId: MarkerId((mTitle + "_" + _markers.length.toString()).toString()),
position: mLatLng,
infoWindow: InfoWindow(
title: mTitle,
snippet: mDescription,
),
icon: BitmapDescriptor.defaultMarker,
));
}
void check(CameraUpdate u, GoogleMapController c) async {
c.animateCamera(u);
mapController.animateCamera(u);
LatLngBounds l1=await c.getVisibleRegion();
LatLngBounds l2=await c.getVisibleRegion();
print(l1.toString());
print(l2.toString());
if(l1.southwest.latitude==-90 ||l2.southwest.latitude==-90)
check(u, c);
}
void _onCameraMove(CameraPosition position) {
_lastMapPosition = position.target;
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Maps Sample App'),
backgroundColor: Colors.green[700],
),
body: GoogleMap(
markers: _markers,
onMapCreated: _onMapCreated,
initialCameraPosition: CameraPosition(
target: _center,
zoom: 11.0,
),
onCameraMove: _onCameraMove,
),
),
);
}
}
The proposed solution above is good, but LatLngBounds has one important limitation:
LatLngBounds({#required this.southwest, #required this.northeast})
: assert(southwest != null),
assert(northeast != null),
assert(southwest.latitude <= northeast.latitude); // <--
This means that the first coordinate must be lower and to the left of the second coordinate.
I had to modify the method for different coordinates.
void _onMapCreated(GoogleMapController controller) {
mapController = controller;
_controller.complete(controller);
//offerLatLng and currentLatLng are custom
final LatLng offerLatLng = LatLng(
double.parse(widget.coordinates.first.latLongList.first.latitude),
double.parse(widget.coordinates.first.latLongList.first.longitude));
LatLngBounds bound;
if (offerLatLng.latitude > currentLatLng.latitude &&
offerLatLng.longitude > currentLatLng.longitude) {
bound = LatLngBounds(southwest: currentLatLng, northeast: offerLatLng);
} else if (offerLatLng.longitude > currentLatLng.longitude) {
bound = LatLngBounds(
southwest: LatLng(offerLatLng.latitude, currentLatLng.longitude),
northeast: LatLng(currentLatLng.latitude, offerLatLng.longitude));
} else if (offerLatLng.latitude > currentLatLng.latitude) {
bound = LatLngBounds(
southwest: LatLng(currentLatLng.latitude, offerLatLng.longitude),
northeast: LatLng(offerLatLng.latitude, currentLatLng.longitude));
} else {
bound = LatLngBounds(southwest: offerLatLng, northeast: currentLatLng);
}
CameraUpdate u2 = CameraUpdate.newLatLngBounds(bound, 50);
this.mapController.animateCamera(u2).then((void v){
check(u2,this.mapController);
});
}
Above suggestions are very good.
If you are working with dynamic source/destination this code might work for you:
Future<void> updateCameraLocation(
LatLng source,
LatLng destination,
GoogleMapController mapController,
) async {
if (mapController == null) return;
LatLngBounds bounds;
if (source.latitude > destination.latitude &&
source.longitude > destination.longitude) {
bounds = LatLngBounds(southwest: destination, northeast: source);
} else if (source.longitude > destination.longitude) {
bounds = LatLngBounds(
southwest: LatLng(source.latitude, destination.longitude),
northeast: LatLng(destination.latitude, source.longitude));
} else if (source.latitude > destination.latitude) {
bounds = LatLngBounds(
southwest: LatLng(destination.latitude, source.longitude),
northeast: LatLng(source.latitude, destination.longitude));
} else {
bounds = LatLngBounds(southwest: source, northeast: destination);
}
CameraUpdate cameraUpdate = CameraUpdate.newLatLngBounds(bounds, 70);
return checkCameraLocation(cameraUpdate, mapController);
}
Future<void> checkCameraLocation(
CameraUpdate cameraUpdate, GoogleMapController mapController) async {
mapController.animateCamera(cameraUpdate);
LatLngBounds l1 = await mapController.getVisibleRegion();
LatLngBounds l2 = await mapController.getVisibleRegion();
if (l1.southwest.latitude == -90 || l2.southwest.latitude == -90) {
return checkCameraLocation(cameraUpdate, mapController);
}
}
Usage:
await updateCameraLocation(source, destination, controller);

How do I display images from a JSON file in a carousel(slider) in Flutter

I have a local json file assets/properties.json in which key "image" has [5 different images] stored with other keys as well like name, place, etc. I want this images be displayed in a carouselSlider.
I have searched but cant find something specific to what i am trying to do.
import 'package:flutter/material.dart';
import 'package:carousel_pro/carousel_pro.dart';
import 'package:flutter_test_app/test_page.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/services.dart' show rootBundle;
import 'dart:convert';
import 'dart:async';
import 'package:flutter_test_app/propery_details_widget.dart';
class PropertyDetails extends StatefulWidget {
#override
_PropertyDetailsState createState() => _PropertyDetailsState();
}
class _PropertyDetailsState extends State<PropertyDetails> {
List properties;
Future<String> loadJsonData() async {
var jsonText = await rootBundle.loadString("assets/properties.json");
setState(() {
properties = json.decode(jsonText);
});
return 'success';
}
int index = 1;
List<String> listaTela = new List();
CarouselSlider instance;
#override
void initState() {
super.initState();
this.loadJsonData();
listaTela.add("assets/images/houses/house.jpg");
listaTela.add('assets/images/houses/house1.jpg');
listaTela.add('assets/images/houses/house2.jpg');
listaTela.add('assets/images/houses/house3.jpg');
listaTela.add('assets/images/houses/house4.jpg');
}
#override
Widget build(BuildContext context) {
instance = new CarouselSlider(
autoPlay: true,
autoPlayDuration: new Duration(seconds: 2),
items: listaTela.map((it) {
return new Container(
width: MediaQuery.of(context).size.width,
// margin: new EdgeInsets.symmetric(horizontal: 5.0),
decoration: new BoxDecoration(
// color: Colors.amber,
),
child: new Image.asset(it),
);
}).toList(),
height: 200,
);
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text("Test App"),
),
body: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Column(
children: <Widget>[
instance,
Flexible(
fit: FlexFit.tight,
child: Container(
child: Details(),
),
)
],
),
),
);
}
}
Instead of calling images from assests listaTela.add("assets/images/houses/house.jpg"); like this i want to call them from my "image" key in JSON file. outside my Carousel i can call my images by properties[index]["image"][0],
Try this. (There's a chance that the map won't work because it will have the wrong type. I don't think you included the whole json, as you are indexing it by index, yet you don't show a [] surrounding the json indicating a json array.)
class _PropertyDetailsState extends State<PropertyDetails> {
List properties;
int index = 1;
Future<void> loadJsonData() async {
var jsonText = await rootBundle.loadString("assets/properties.json");
setState(() {
properties = json.decode(jsonText);
});
}
#override
void initState() {
super.initState();
loadJsonData();
}
#override
Widget build(BuildContext context) {
Widget carousel = properties == null
? CircularProgressIndicator()
: CarouselSlider(
items: properties[index]["image"].map((it) {
return new Container(
width: MediaQuery.of(context).size.width,
decoration: new BoxDecoration(),
child: new Image.asset(it),
);
}).toList(),
autoPlay: true,
autoPlayDuration: new Duration(seconds: 2),
height: 200,
);
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text("Test App"),
),
body: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Column(
children: <Widget>[
carousel,
Flexible(
fit: FlexFit.tight,
child: Container(
child: Details(),
),
)
],
),
),
);
}
}
As far as I can understand you problem, there are a couple of challenges.
you probably want to map the JSON to Dart objects
you want to display a set of images in the Slider starting from index
mechanics to update you widget tree when you want to update the slider
JSON and Dart
Takes some getting used to built package:built_value is a nice way to go. It will allow you to have Dart object or list of objects mapped from a JSON file. Or, if you want to go simpler, you could do what's described here: https://flutter.dev/docs/development/data-and-backend/json#serializing-json-manually-using-dartconvert
Images from index & update
Basically, what you want to do in your initState is:
load image data from json -> set start index -> somehow get Flutter to map N image paths to Image widgets and update tree
A pseudo-code like initState could look like so:
void initState() {
super.initState();
// step 1: load json and map it to Dart objects
this.loadFromJson().then(() {
// loadFromJson returns with a Future, `then` allows you to do computation after it returns
setState(() {
// setting property in setState tells Flutter: hey buddy, stuff happened, rebuild!
this.startIndex = 0;
});
});
}
inside your build:
// [...]
CarouselSlider(
items: listaTela.skip(this.startIndex).take(5).map((imgObj) => Image.asset(imgObj.assetPath))
);
Hope I understood your problem and gave you relevant answer.