Comments (22)
jesussmile
commented on August 22, 2024
1
Well leant it the hard way! Never debug packages. My vs code setting was on debug+packages+sdk had to change it to flutter (profile mode) Finally the issue is gone. Thank you for being so helpful!
from osm_flutter.
liodali
commented on August 22, 2024
1
look to main example
https://github.com/liodali/osm_flutter/blob/master/example/lib/main.dart
I already open another page that for search example and i used key and without dispose map page
from osm_flutter.
liodali
commented on August 22, 2024
1
I found the problem
from osm_flutter.
liodali
commented on August 22, 2024
1
you should avoid to use setState in your mainscreen
void updateInformation(String information) {
setState(() => _searchLoc = information);
}replace _searchLoc by ValueNotifier<String> _notifier = ValueNotifier("Choose Location");
and method updateInformation become like this
void updateInformation(String information) {
_notifier.value = information
}and replace this
Text(
_searchLoc,
style: TextStyle(fontSize: 12.0),
maxLines: 1,
),
by this
ValueListenableBuilder<int>(
builder: (BuildContext context, String value,_) {
return Text(
value,
style: TextStyle(fontSize: 12.0),
maxLines: 1,
);
},
valueListenable: _notifier,
)
from osm_flutter.
liodali
commented on August 22, 2024
1
osmdroid use different approch to show map not like google use opengl and vector tile and osmdroid in the library they use sqlite for to show raster tile (because vector tile server are not free and communiy doesn't support it not like
raster tiles supported by osm community )
google map will not work in offline mode but osmdroid support offline and optimize download of tiles with sqlite
like i told you can overcome the problem of reload by use resizeToAvoidBottomInset: false in mainscreen and avoid setState for now , use ValueNotifier also it better than rebuild always all widgets
until I found solution for that
from osm_flutter.
liodali
commented on August 22, 2024
when this error happen !
from osm_flutter.
jesussmile
commented on August 22, 2024
Steps to reproduce the error
- Download v0.7.9+2
- Run it on Vs code studio
- Debug Console outputs this error, Map loaded is empty.
- However when I run it on my device without the IDE the map loads fine,
It could very well be an issue with my IDE, I will reset all the settings and recheck,
from osm_flutter.
liodali
commented on August 22, 2024
try to make flutter clean & flutter pub get
from osm_flutter.
liodali
commented on August 22, 2024
what about #112 ?
from osm_flutter.
jesussmile
commented on August 22, 2024
I am still working on it. Dart is a comparatively new language to me especially Global keys and null safety. Hopefully I will get it done in a couple of days. I am looking into examples.
from osm_flutter.
jesussmile
commented on August 22, 2024
Thank you so much! I am so grateful to you and all that you have done. Finally can move on to next steps..
from osm_flutter.
jesussmile
commented on August 22, 2024
I want to ask one more question regarding this. Unlike in your example I am not using a map on the search page. When I search for a location and come back the map reloads. Keys work fine in all other instances except on the searchpage. Any tip on how can I save the state ?
from osm_flutter.
liodali
commented on August 22, 2024
when you open search page did you close the map page (pushAndPop(sarchPage)) ?
from osm_flutter.
jesussmile
commented on August 22, 2024
No, the issue is the same even with your example, after searching the map will reload, here is my implementation to go to search page
if I go to seachscreen and come back then the map doesn't reload but if I search for something then it will reload. I hope my question is clear? Perhaps some issues with my code execution could you please check if you have time ?
The MainScreen from where I navigate to searchScreen
class MainScreen extends StatefulWidget {
MainScreen({Key key}) : super(key: key);
static const String idScreen = "mainScreen";
@override
_MainScreenState createState() => _MainScreenState();
}
class _MainScreenState extends State<MainScreen> {
// @override
String _searchLoc = 'Choose Location';
GlobalKey<ScaffoldState> scaffoldKey;
void updateInformation(String information) {
setState(() => _searchLoc = information);
}
void moveToSearchScreen() async {
//to get data back from second screen
final dropOff = await Navigator.push(
context,
MaterialPageRoute(
fullscreenDialog: true, builder: (context) => SearchScreen()),
);
updateInformation(dropOff);
}
MapController osmController;
@override
void initState() {
super.initState();
osmController = MapController(
initMapWithUserPosition: false,
initPosition: GeoPoint(latitude: 28.3949, longitude: 84.1240),
);
scaffoldKey = GlobalKey<ScaffoldState>();
Future.delayed(Duration(seconds: 10), () async {
await osmController.zoom(8);
await osmController.rotateMapCamera(45.0);
await osmController.currentLocation();
await osmController.rotateMapCamera(120);
locatePosition();
});
}
void locatePosition() async {
Position position = await Geolocator.getCurrentPosition(
desiredAccuracy: LocationAccuracy.high);
String address =
await AssistantMethods.searchCoordinateAddress(position, context);
print("This is your Address:: " + address);
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text(address),
));
}
@override
void dispose() {
osmController.dispose();
super.dispose();
}
// bool get wantKeepAlive => true;
@override
Widget build(BuildContext context) {
return Scaffold(
key: scaffoldKey,
appBar: AppBar(
title: Text("Open steet map"),
),
body: Stack(
children: [
Scaffold(
body: Container(
margin: EdgeInsets.fromLTRB(0, 0, 0, 300),
child: (OSMFlutter(
controller: osmController,
//currentLocation: false,
road: Road(
startIcon: MarkerIcon(
icon: Icon(
Icons.person,
size: 64,
color: Colors.brown,
),
),
roadColor: Colors.yellowAccent,
),
markerIcon: MarkerIcon(
icon: Icon(
Icons.person_pin_circle,
color: Colors.blue,
size: 56,
),
),
)),
)),
Positioned(
left: 0.0,
right: 0.0,
bottom: 0.0,
child: Container(
height: 300.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(18.0),
topRight: Radius.circular(18.0)),
boxShadow: [
BoxShadow(
color: Colors.black,
blurRadius: 16.0,
spreadRadius: 0.5,
offset: Offset(0.7, 0.7),
),
],
),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 24.0, vertical: 18.0),
child: Column(
children: [
SizedBox(height: 6.0),
GestureDetector(
onTap: () {
moveToSearchScreen();
},
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5.0),
boxShadow: [
BoxShadow(
color: Colors.black54,
blurRadius: 6.0,
spreadRadius: 0.5,
offset: Offset(0.7, 0.7),
),
],
),
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Row(
children: [
Icon(
Icons.search,
color: Colors.blueAccent,
),
SizedBox(
width: 10.0,
),
Text(
_searchLoc,
style: TextStyle(fontSize: 12.0),
maxLines: 1,
),
],
),
),
),
),
],
),
),
),
),
],
),
floatingActionButton: FloatingActionButton(
onPressed: () async {
try {
await osmController.removeLastRoad();
///selection geoPoint
GeoPoint point = await osmController.selectPosition(
icon: MarkerIcon(
icon: Icon(
Icons.location_history,
color: Colors.amber,
size: 48,
),
));
GeoPoint point2 = await osmController.selectPosition();
RoadInfo roadInformation = await osmController.drawRoad(
point, point2,
//interestPoints: [pointM1, pointM2],
roadOption: RoadOption(
roadWidth: 10.0,
roadColor: Colors.blue,
showMarkerOfPOI: false));
String duration =
"duration: ${Duration(seconds: roadInformation.duration.toInt()).inMinutes} minutes ";
String distance =
"distance: ${roadInformation.distance.toStringAsFixed(2)} Km";
print(duration);
print(distance);
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
duration: Duration(seconds: 10),
content: Text(duration + distance),
));
} on RoadException catch (e) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(
"${e.errorMessage()}",
),
),
);
}
},
child: const Icon(Icons.navigation),
backgroundColor: Colors.green,
),
);
}
}
This is a simple search page
class SearchScreen extends StatefulWidget {
@override
_SearchScreenState createState() => _SearchScreenState();
}
class _SearchScreenState extends State<SearchScreen> {
TextEditingController searchTextEditingController = TextEditingController();
@override
void initState() {
super.initState();
}
@override
@mustCallSuper
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
body: Stack(
children: [
Container(
height: 250.0,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black,
blurRadius: 6.0,
spreadRadius: 0.5,
offset: Offset(0.7, 0.7),
)
],
),
child: Padding(
padding: EdgeInsets.only(
left: 25.0, top: 30.0, right: 25.0, bottom: 20.0),
child: Column(
children: [
SizedBox(height: 5.0),
Stack(
children: [
GestureDetector(
onTap: () {
Navigator.pop(
//send back data
context,
searchTextEditingController.text);
},
child: Icon(Icons.arrow_back)),
],
),
SizedBox(height: 10.0),
Row(
children: [
SizedBox(width: 18.0),
Expanded(
child: Container(
decoration: BoxDecoration(
color: Colors.grey[400],
borderRadius: BorderRadius.circular(5.0),
),
child: Padding(
padding: EdgeInsets.all(3.0),
child: TypeAheadField(
textFieldConfiguration: TextFieldConfiguration(
autofocus: false,
maxLines: 1,
controller: searchTextEditingController,
decoration: InputDecoration(
contentPadding: EdgeInsets.all(3),
hintText: "Search",
labelStyle: TextStyle(color: Colors.black),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 1.3, color: Colors.black),
),
border: OutlineInputBorder(
borderSide: BorderSide(width: 0.8),
),
),
),
suggestionsCallback: (pattern) async {
if (pattern.isNotEmpty)
return await addressSuggestion(pattern);
return Future.value();
},
suggestionsBoxController:
SuggestionsBoxController(),
itemBuilder: (context, suggestion) {
return ListTile(
leading: Icon(Icons.location_on),
title: Text((suggestion as SearchInfo)
.address
.name),
subtitle:
Text((suggestion).address.country),
);
},
onSuggestionSelected: (suggestion) {
print(suggestion);
searchTextEditingController.text =
(suggestion as SearchInfo).address.name;
}),
),
),
),
],
),
],
),
),
),
],
),
);
}
}
from osm_flutter.
liodali
commented on August 22, 2024
the problem related i think to keyboard
also add resizeToAvoidBottomInset: false in your main screen
i think that will solve the problem
from osm_flutter.
jesussmile
commented on August 22, 2024
Yes, I tried that, Nevermind I will debug everything and try to solve it. Thank you. Will ask for a suggestion when I find the issue.
from osm_flutter.
jesussmile
commented on August 22, 2024
Damn! So fast. What is it ?
from osm_flutter.
jesussmile
commented on August 22, 2024
Ok so I spent several hours trying to get it to work with provider and notifier etc but the map will always reload . In the end I completely removed the logic to send location from one screen to another still no progress. The issue is only when I return back from search page. I tested this in your project and still the same thing. I uploaded a video can you confirm this behavior is normal? Please copy paste the video link in the browser. https://youtube.com/shorts/a21NWEvgY5k?feature=share
from osm_flutter.
liodali
commented on August 22, 2024
when keyboard shows and we keep scaffold with default behaviour will change size that lead to rebuild all widget
so for native view inside flutter will restart for my case when that is happen we lose db reference and i don't know why
i already searching for solution to prevent that but until now it's little bit complicated
so that's why i told you avoid to use setState to rebuild wigdet that contain map
from osm_flutter.
jesussmile
commented on August 22, 2024
Hey Hi! I tried the same thing with google maps following some examples, This time my code works fine, and the state is saved, even after coming back from search screen. I can't debug my code because I have not migrated into null safety and I get error because the osmMap gets initiated at null etc. Else I could provide you with some better feedback. I have not used initState or dispose . I don't know if it can be of any help but thought I would share. I am sure you know about this still..
class MainScreen extends StatefulWidget {
// const MainScreen({Key key}) : super(key: key);
static const String idScreen = "mainScreen";
@override
_MainScreenState createState() => _MainScreenState();
}
class _MainScreenState extends State<MainScreen> {
Completer<GoogleMapController> _controllerGoogleMap = Completer();
GoogleMapController newGoogleMapController;
GlobalKey<ScaffoldState> scaffoldKey = new GlobalKey<ScaffoldState>();
Position currentPosition;
var geoLocator = Geolocator();
double bottomPaddingOfMap = 0;
void locatePosition() async {
Position position = await Geolocator.getCurrentPosition(
desiredAccuracy: LocationAccuracy.high);
currentPosition = position;
LatLng latLngPosition = LatLng(position.latitude, position.longitude);
CameraPosition cameraPosition =
new CameraPosition(target: latLngPosition, zoom: 14);
newGoogleMapController
.animateCamera(CameraUpdate.newCameraPosition(cameraPosition));
}
static final CameraPosition _kGooglePlex = CameraPosition(
target: LatLng(37.42796133580664, -122.085749655962),
zoom: 14.4746,
);
@override
Widget build(BuildContext context) {
return Scaffold(
key: scaffoldKey,
appBar: AppBar(
title: Text("Google Map Example"),
),
.....................
body: Stack(
children: [
GoogleMap(
padding: EdgeInsets.only(bottom: bottomPaddingOfMap),
mapType: MapType.normal,
myLocationButtonEnabled: true,
initialCameraPosition: _kGooglePlex,
myLocationEnabled: true,
zoomGesturesEnabled: true,
zoomControlsEnabled: true,
onMapCreated: (GoogleMapController controller) {
_controllerGoogleMap.complete(controller);
newGoogleMapController = controller;
setState(() {
bottomPaddingOfMap = 300.0;
});
locatePosition();
},
),
Please copy and paste the link in the browser.
https://www.youtube.com/watch?v=0AphEzd-6GM
from osm_flutter.
jesussmile
commented on August 22, 2024
Ok i got you. I will do as you say and wait for the solution. No problem. I will restructure my code to work with what we have now. Thank you.
from osm_flutter.
jesussmile
commented on August 22, 2024
osmdroid use different approch to show map not like google use opengl and vector tile and osmdroid in the library they use sqlite for to show raster tile (because vector tile server are not free and communiy doesn't support it not like
raster tiles supported by osm community )
google map will not work in offline mode but osmdroid support offline and optimize download of tiles with sqlite
like i told you can overcome the problem of reload by useresizeToAvoidBottomInset: falsein mainscreen and avoid setState for now , use ValueNotifier also it better than rebuild always all widgets
until I found solution for that
from osm_flutter.
Related Issues (20)
- Fatal error on iOS drawing circle HOT 3
- iOS error - Multiple widgets used the same GlobalKey HOT 4
- background/foreground user position update HOT 1
- Linux platform support
- Map location always starts in USA- Washington then it moves to the location that I initialize with HOT 5
- OSMFlutter can't be used inside other widgets than fullscreen? HOT 5
- flutter_osm_web >=1.0.0-rc.3 depends on web ^0.5.1 HOT 3
- Tile provider with reversed coordinates HOT 6
- Disable OSMFLUTTER tap/drag HOT 10
- I can't move on my maps HOT 5
- How can show modal when I click on marker ? HOT 2
- Markers | when adding markers with different icon types at the same time, markers take only one icon type HOT 11
- Bug in map zoom more than 17 step IOS HOT 4
- Does FlutterOSM supports vector base tiles ? HOT 1
- Flutter launching in iOS emulator : No such module 'OSMFlutterFramework' HOT 24
- iOS: Doesn't load draw and markers HOT 4
- Is there a way to make drawn single or multi road dotted line? HOT 2
- Remove references to deprecated v1 Android embedding
- Get map scale HOT 1
- iOS: osm_flutter version 1.2.0 throws an error: Value of type 'OSMView' has no member 'disableTouch' HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from osm_flutter.