I succed for get data from firestore with this code:
return new Scaffold(
body: Column(
children: <Widget>[
StreamBuilder(
stream: Firestore.instance.collection("location").snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData)
return Text("Loading Data.. Please Wait");
return
Container(
child: GoogleMap(
mapType: MapType.normal,
initialCameraPosition: CameraPosition(
target: LatLng("${snapshot.data.documents[0]['latitude']}", "${snapshot.data.documents[0]['longitude']}"),
zoom: 12.0
),
onMapCreated: (GoogleMapController controller) {
_controller.complete(controller);
},
),
);
},
),
],
),
);
but I not really uderstand how to put value in LatLng(error in here), that is error.
anybody have the idea for that problem, appreciate for your help.
From the google_maps documentation, I can see you have to pass 2 double values to LatLng constructor.
Try the code below:
return new Scaffold(
body: Column(
children: <Widget>[
StreamBuilder(
stream: Firestore.instance.collection("location").snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData)
return Text("Loading Data.. Please Wait");
return
Container(
child: GoogleMap(
mapType: MapType.normal,
initialCameraPosition: CameraPosition(
target: LatLng(double.parse("${snapshot.data.documents[0]['latitude']}"), double.parse("${snapshot.data.documents[0]['longitude']}")),
zoom: 12.0
),
onMapCreated: (GoogleMapController controller) {
_controller.complete(controller);
},
),
);
},
),
],
),
);
The difference is that I used double.parse() to convert your data to double and then I pass it to the LatLng constructor.
Related
I want to show circularprogressindicator() until Googlemap build is finished.
I used FutureBuilder, but it didn't work.
my code
Container(
height:100,
child: FutureBuilder(
future: googlemap()
builder: (context, snapshot){
if(snapshot.hasdata){
return snapshot.data;
}
else{
return CircularProgressIndicator();
}
}
)
)
Futurbuilder
Futur<Widget> googlemap() async{
Completer<GoogleMapController> _controller = Completer();
return await Googlemap(
mapType: MapType.normal,
initialCameraPosition: CameraPosition(
target: LatLng(XX.XXXXXX, XXX.XXXXXX),
zoom: 17.0
)
onMapCreated: (GoogleMapController controller){
_controller.complete(controller);
},
myLocationEnabled: false,
myLocationButtonEnabled: false,
compassEnabled: false,
zoomGesturesEnabled: false,
rotateGesturesEnabled: false,
scrollGesturesEnabled: false,
tiltGesturesEnabled: false,
markers: Set<Marker>.of(_markers)
)
}
result
can i get some tips in here?
I haven't solved it yet, but I found an alternative.
my solution
bool splash = false;
#override
void initState() {
// TODO: implement initState
super.initState();
Future.delayed(Duration(seconds: 2), (){
setState(() {
splash = true;
});
});
}
Widget
#override
Widget build(BuildContext context) {
return splash ? SafeArea(
child: ListView(
children: [
//googlemap1(),
//googlemap2(),
//googlemap3(),
//googlemap4(),
],
),
) : Container(
child: Center(
child: CircularProgressIndicator()
),
);
}
please let me know if there is a better way than this.
I would like to limit the size of the map to a part of the drawer and to show the current location marked on the map. This way it stays on the whole drawer and only shows the location when I press the location symbol...
Widget _buildDrawer(BuildContext context) {
return Drawer(
child: Flex(
direction: Axis.horizontal,
children: [
Expanded(
child:GoogleMap(
mapType: MapType.normal,
myLocationEnabled: true,
initialCameraPosition: _currentPosition,
onMapCreated: (GoogleMapController controller) {
_controller.complete(controller);
},
))]));
}
...
currentPosition = CameraPosition(
bearing: 192.8334901395799,
target: LatLng(latitude, longitude),
tilt: 59.440717697143555,
zoom: 19.151926040649414);
Tried too: but is in full again
Drawer(
child: Container(
height: MediaQuery.of(context).size.height * 0.10,
width: MediaQuery.of(context).size.width * 0.10,
child: Row(
children: <Widget>[
Expanded(
flex: 70,
child: GoogleMap(
mapType: MapType.hybrid,
mapToolbarEnabled: false,
zoomControlsEnabled: false,
myLocationEnabled: true,
initialCameraPosition: _currentPosition,
onMapCreated: (GoogleMapController controller) async {
_controller.complete(controller);
},
),
)])))
child: Column(children: [GoogleMap()])
this way you can store multiple widgets within the draw without having the map take up the entire widget.
You have to options as far as styling the GoogleMap() widget
You can change the style within the google map widget
2)You can style the parent widget which holds the GooggleMap()
for column this would be => Column(mainaxisalignmen: mainaxisalignment.center etc.
column is not the only widget you have to use, any widget that takes children is a good choice for being the child of the drawer
Hy Guys I'm trying try to close drawer inside material app but it is not working. My code:
#override
Widget build(BuildContext context) {
return MaterialApp(
home: currentLocation == null ? Container(
alignment: Alignment.center,
child: Center(
child: CircularProgressIndicator(),
),
):
Scaffold(
drawer: Drawer(
child: ListView(
children: <Widget>[
ListTile(
leading: CircleAvatar(),
title: Text("test app"),
subtitle: Text("nn"),
),
ListTile(leading: Icon(Icons.multiline_chart), title: Text("check gps.."),
onTap: () {
_checkgps();
Navigator.pop(context);
}
),
appBar: AppBar(
title: Text('test app'),
),
body: GoogleMap(
initialCameraPosition:
CameraPosition(target: LatLng(currentLocation.latitude,
currentLocation.longitude), zoom: 17),
onMapCreated: _onMapCreated,
mapType: _currentMapType,
compassEnabled: true,
myLocationEnabled: true,
polylines: Set<Polyline>.of(_mapPolylines.values),
markers: Set<Marker>.of(markers.values),
)
);
}
But when i press list item 1 ( checkgps ) Navigator.pop(context); going to black screen and not see google maps. Any idea?
I am assuming that you are calling this widget directly from you run app and because of that it is causing error.
Your appbar was also at wrong place.
checkout below code.
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(body: DeleteWidget()),
);
}
}
class DeleteWidget extends StatefulWidget {
const DeleteWidget({Key key}) : super(key: key);
#override
_DeleteWidgetState createState() => _DeleteWidgetState();
}
class _DeleteWidgetState extends State<DeleteWidget> {
#override
Widget build(BuildContext context) {
return currentLocation == null
? Container(
alignment: Alignment.center,
child: Center(
child: CircularProgressIndicator(),
),
)
: Scaffold(
drawer: Drawer(
child: ListView(children: <Widget>[
ListTile(
leading: CircleAvatar(),
title: Text("test app"),
subtitle: Text("nn"),
),
ListTile(
leading: Icon(Icons.multiline_chart),
title: Text("check gps.."),
onTap: () {
_checkgps();
Navigator.pop(context);
}),
]),
),
appBar: AppBar(
title: Text('test app'),
),
body: GoogleMap(
initialCameraPosition: CameraPosition(
target: LatLng(
currentLocation.latitude, currentLocation.longitude),
zoom: 17),
onMapCreated: _onMapCreated,
mapType: _currentMapType,
compassEnabled: true,
myLocationEnabled: true,
polylines: Set<Polyline>.of(_mapPolylines.values),
markers: Set<Marker>.of(markers.values),
),
);
}
}
The problem is that you are not popping the Drawer's context, you are popping the MaterialApp's context.
Also it is a good idea to split your app into small piece of widgets, so your drawer content must be placed in another widget. I've made these changes, try out this code:
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(body: DeleteWidget()),
);
}
}
class DeleteWidget extends StatefulWidget {
const DeleteWidget({Key key}) : super(key: key);
#override
_DeleteWidgetState createState() => _DeleteWidgetState();
}
class _DeleteWidgetState extends State<DeleteWidget> {
#override
Widget build(BuildContext context) {
return currentLocation == null
? Container(
alignment: Alignment.center,
child: Center(
child: CircularProgressIndicator(),
),
)
: Scaffold(
drawer: _DrawerContent(),
appBar: AppBar(
title: Text('test app'),
),
body: GoogleMap(
initialCameraPosition: CameraPosition(
target: LatLng(
currentLocation.latitude, currentLocation.longitude),
zoom: 17),
onMapCreated: _onMapCreated,
mapType: _currentMapType,
compassEnabled: true,
myLocationEnabled: true,
polylines: Set<Polyline>.of(_mapPolylines.values),
markers: Set<Marker>.of(markers.values),
),
);
}
}
class _DrawerContent extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Drawer(
child: ListView(children: <Widget>[
ListTile(
leading: CircleAvatar(),
title: Text("test app"),
subtitle: Text("nn"),
),
ListTile(
leading: Icon(Icons.multiline_chart),
title: Text("check gps.."),
onTap: () {
_checkgps();
Navigator.pop(context);
}),
]),
);
}
}
With the Drawer content in another widget when you call Navigator.pop(context); it will pop the drawer context not the Page context where the Drawer is.
Instead of calling navigator.pop you can use
Navigator.of(context).maybePop();
There is a button in the bottom right of the google maps API google maps widget. I never added this button myself. How do I remove it?
edit:
here is my code
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("TravelBuddy"),
),
body: Stack(
children: <Widget>[
GoogleMap(
onMapCreated: _onMapCreated,
initialCameraPosition:
CameraPosition(
target: _center,
zoom: 11.0,
),
mapType: _currentMapType,
markers: _markers,
onCameraMove: _onCameraMove,
),
Padding(
padding: EdgeInsets.all(16.0),
child: Align(
alignment: Alignment.topRight,
child: Column(
children: <Widget>[
button(_onMapTypeButtonPressed, Icons.map),
SizedBox(height: 16.0),
button(_onAddMarkerButtonPressed, Icons.add_location),
SizedBox(height: 16.0),
button(_goToPosition1, Icons.location_searching),
],),),),],),);}
Thanks for the code.
Try putting an option "my LocationButtonEnabled" in GoogleMap() widget
GoogleMap(
onMapCreated: _onMapCreated,
initialCameraPosition:
CameraPosition(
target: _center,
zoom: 11.0,
),
mapType: _currentMapType,
markers: _markers,
onCameraMove: _onCameraMove,
myLocationButtonEnabled: false,
options: GoogleMapOptions(
myLocationEnabled:true
//there is a lot more options you can add here
)
),
I had a similar problem. Adding 'zoomControlsEnabled: false,' in the GoogleMap() widget worked for me.
I have a SliverAppBar that I want to be hidden when the user scrolls down on the page. The problem is that I have a Google Map widget that is causing the app bar to move as well, when I only want it to move only when my touch is off the Google Map. Is there a way to prevent this?
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
backgroundColor: Colors.transparent,
elevation: 5.0,
pinned: false,
snap: false,
floating: false,
expandedHeight: 200,
flexibleSpace: FlexibleSpaceBar(
background: Image.asset(
'assets/events/city.jpeg',
fit: BoxFit.cover,
),
),
),
SliverFillRemaining(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(16.0),
child: Container(
height: 200,
width: double.infinity,
child: GoogleMap(
initialCameraPosition:
CameraPosition(target: LatLng(50.0, 50.0)),
onMapCreated: (controller) {
setState(() {
_googleMapController = controller;
});
},
),
),
)
],
),
),
)
],
),
));
}
I found that adding a gestureRecognizer property to GoogleMap and passing in a Factory of type VerticalDragRecognizer allowed it to prevent the SliverAppBar from scrolling. It also works on any kind of scrolling you want for your app. See this for more info about it around the 50 minute mark.
SliverFillRemaining(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(16.0),
child: Container(
height: 200,
width: double.infinity,
child: GoogleMap(
gestureRecognizers: Set()..add(Factory<VerticalDragGestureRecognizer>(
() => VerticalDragGestureRecognizer()
)),
scrollGesturesEngabled: true,
initialCameraPosition:
CameraPosition(target: LatLng(50.0, 50.0)),
onMapCreated: (controller) {
setState(() {
_googleMapController = controller;
});
},
),
),
)
],
),
),
)