so Iam trying to build flutter maps with the nearest location and I gotten so far hear and the is an error 'inApplicationBloc()' especially in this segment segment
ApplicationBloc() {
setCurrentLocation();
}
and this is the erorr Non-nullable instance field 'currentLocation' must be initialized.
Try adding an initializer expression, or add a field initializer in this constructor, or mark it 'late'
once I add late initializer I get a red screen error I tryed adding ? to positon and null check in the latitude and longitude but it keeps giving me progress circle indicator and here is my code to get a better understanding
import 'package:flutter/material.dart';
import 'package:geolocator/geolocator.dart';
import '../scr/screens/services/geolocatator_services.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
class ApplicationBloc with ChangeNotifier {
final geolocatorService = GeolocatorService();
Position currentLocation; //must change late
ApplicationBloc() {
setCurrentLocation();
}
setCurrentLocation() async {
currentLocation = await geolocatorService.getCurrentLocation();
notifyListeners();
}
}
//second class
import 'package:geolocator/geolocator.dart';
class GeolocatorService {
Future<Position>setCurrentLocation() async {
return await Geolocator.getCurrentPosition(
desiredAccuracy: LocationAccuracy.high);
}
getCurrentLocation() {}
}
Third class
import 'package:firebase/googlemaps_screens/blocks/app_block.dart';
import 'package:firebase/googlemaps_screens/blocks/app_block.dart';
import 'package:firebase/googlemaps_screens/mainrun.dart';
import 'package:flutter/material.dart';
import 'package:geolocator/geolocator.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:provider/provider.dart';
import '../../blocks/app_block.dart';
class HomeScreen extends StatefulWidget {
HomeScreen({Key? key}) : super(key: key);
#override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
#override
void initState() {
Position currentLocation;
super.initState();
}
Widget build(BuildContext context) {
final applicationBloc = Provider.of<ApplicationBloc>(context);
return Scaffold(
body: (applicationBloc.currentLocation == null)
? Center(
child: CircularProgressIndicator(),
)
: ListView(
children: [
TextField(
decoration: InputDecoration(hintText: 'Search Location'),
),
Container(
height: 300.0,
child: GoogleMap(
mapType: MapType.normal,
myLocationEnabled: true,
initialCameraPosition: CameraPosition(
target: LatLng(
applicationBloc.currentLocation.latitude,
applicationBloc.currentLocation.longitude,
),
zoom: 14,
),
),
)
],
));
}
}
currentLocation still isn't initialized, in your initState() what you called was the instance of currentLocation which still wasn't initialized anywhere, except in your setCurrentLocation() method, then you have to call the setCurrentLocation() in initState, then you can mark currentLocation as late
Alright so in flutter when you don't want to make a value nullable, because flutter needs to make sure no value is unnecessarily left null, you either have to mark it as a nullable value, orrr mark it as late, if you make it late, then you promise flutter you're going to initialize it later, now if you mark currentLocation as late, it means you promise that you'll give it a value somewhere along the line, and it will never be null before the UI builds and from what I see, it can only get a value after your device gives access to the app to check user location, and then the app grabs it from the device GPS, if you have to do all that, meaning that through that process, the value of currentLocation will be NULL,until it gets location and the builder won't have anything to build the UI with, also, in your HomeScreen build method, you are checking if the currentLocation is null, meaning you expect it to be null at some point, this is why it's advisable to make the currentLocation nullable by adding a question mark, or mark it as late, which means it can't be null, but you promise that it'll get a value later, my advice would be to make it Position? currentLocation; meaning that at some point it will be null....
so either make it
Position? currentLocation;
OR
late Position currentLocation;
but with second option you have to make sure that the app gets the location before the builder builds the UI, meaning you'll eliminate the circularprogressbar,
just do this
Position? currentLocation;
Here so first main.dart pushes me to the loading_screen
i wrote this without Provider, just good ole state management
Geolocator Service
import 'package:geolocator/geolocator.dart';
class GeolocatorService {
Future<Position> setCurrentLocation() async {
await Geolocator.requestPermission();
return await Geolocator.getCurrentPosition(
desiredAccuracy: LocationAccuracy.high);
}
}
here it requests permission of user to access location, then it gets location if user accepts,
Loading Screen
import 'package:flutter/material.dart';
import 'geolocator_service.dart';
import 'package:geolocator/geolocator.dart';
import 'home_screen.dart';
class LoadingScreen extends StatefulWidget {
const LoadingScreen({Key? key}) : super(key: key);
#override
State<LoadingScreen> createState() => _LoadingScreenState();
}
class _LoadingScreenState extends State<LoadingScreen> {
void getLocation() async {
Position position = await GeolocatorService().setCurrentLocation();
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (_) => HomeScreen(
position: position,
),
),
);
}
#override
initState() {
super.initState();
getLocation();
}
#override
Widget build(BuildContext context) {
return const Scaffold(
body: Center(child: CircularProgressIndicator()),
);
}
}
in the loading screen I have a method getLocation which gets me the location by calling the setCurrentLocation() method in the geolocator service class,then awaits the response, after it gets the response, it saves it in a position variable, this is the same variable you had a problem initializing, now, here i put the whole thing in initState, so that position must get initialized once the app starts, then pushes me to the HomeScreen()
Home Screen
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:geolocator/geolocator.dart';
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key, required this.position}) : super(key: key);
final Position position;
#override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: [
const TextField(
decoration: InputDecoration(hintText: 'Search Location'),
),
Container(
height: 300.0,
child: GoogleMap(
mapType: MapType.normal,
myLocationEnabled: true,
initialCameraPosition: CameraPosition(
target: LatLng(
widget.position.latitude,
widget.position.longitude,
),
zoom: 14,
),
),
)
],
));
}
}
finally in HomeScreen, it takes the position that was pushed to this page after it was initialized in the loading screen, and then builds the UI with it
The problem you had was that you weren't calling any methods that initialized the position variable, all you did was create the method that gave it a value, so, the circular progress indicator kept rolling why? because the value was still null, you set the value in a method, but you didn't call the method, the method was just there, dormant, wasn't called anywhere, so until you call the method where you gave position a value, then position won't get a value, and it'll keep being null
IF YOU'RE STILL CONFUSED, ASK ME
Related
I'm trying to have a page in my app display a user's location on a google map, which works in debug mode, but when I run it in release mode it simply loads indefinitely. The strange thing is that if I click on a different page on my app and go back to the map page it will immediately show. Does anyone know what could be going on here?
I also get the following error: [ERROR:flutter/lib/ui/ui_dart_state.cc(209)] Unhandled Exception: MissingPluginException(No implementation found for method camera#animate on channel plugins.flutter.io/google_maps_0)
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:mapapp/provider/location_provider.dart';
import 'package:provider/provider.dart';
class Map extends StatefulWidget {
const Map({Key? key}) : super(key: key);
#override
_State createState() => _State();
}
class _State extends State<Map> {
#override
void initState() {
super.initState();
Provider.of<LocationProvider>(context, listen: false).initalization();
}
//Sets map style once app is resumed to reload the map
void didChangeAppLifecycleState(AppLifecycleState state) {
if (state == AppLifecycleState.resumed) {
dynamic controller;
controller.setMapStyle("[]");
}
}
#override
Widget build(BuildContext context) {
return Scaffold(body: googleMapUI());
}
Widget googleMapUI() {
return Consumer<LocationProvider>(builder: (
consumerContext,
model,
child,
) {
while (model.locationPosition != null) {
return Column(
children: [
Expanded(
child: GoogleMap(
mapType: MapType.normal,
padding: const EdgeInsets.only(top: 40.0),
initialCameraPosition:
CameraPosition(target: model.locationPosition!, zoom: 18),
myLocationEnabled: true,
myLocationButtonEnabled: true,
onMapCreated: (GoogleMapController controller) async {
Provider.of<LocationProvider>(context, listen: false);
},
),
)
],
);
}
return const Center(
child: CircularProgressIndicator(),
);
});
}
}
I'm working on an flutter application that should have a common codebase for web and mobile.
My app will have a google map and as far as I've seen there's not a single package to satisfy all platforms.
google_maps_flutter - seems to work only for mobile (IOS / Android)
google_maps_flutter_web - seems to work only for web
So most probably I have to create two separate MapWidgets, one for the web and one for mobile using these separate packages.
For mobile:
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
class MapSample extends StatefulWidget {
MapSample({Key? key}) : super(key: key);
#override
State<MapSample> createState() => MapSampleState();
}
class MapSampleState extends State<MapSample> {
final Completer<GoogleMapController> _controller = Completer();
static const CameraPosition _kGooglePlex = CameraPosition(
target: LatLng(37.42796133580664, -122.085749655962),
zoom: 14.4746,
);
#override
Widget build(BuildContext context) {
return GoogleMap(
mapType: MapType.hybrid,
initialCameraPosition: _kGooglePlex,
onMapCreated: (GoogleMapController controller) {
_controller.complete(controller);
},
);
}
}
For the web, it's a bit more complicated, it seems that google_maps_flutter_web isn't actually an usable version, from what I understand, (correct me if I'm wrong) and it actually uses another package that's not developed by the flutter team google_maps 6.0.0.
The objective of google_maps_flutter_web probably is to have the same api as google_maps_flutter (google_maps_flutter_platform_interface) and use it seamlessly, but I couldn't really find an example of how to use it...
How should I go about this? Any change I'm mistaken about google_maps_flutter_web and it actually works? Or I should just try to use google_maps which actually works for the web and just switch widgets based on kIsWeb?
Eventually I found a workaround using google_maps and this answer as inspiration:
Abstract MapWidget
import 'package:client_ojp4danube/map/map_widget_stub.dart'
if (dart.library.html) 'package:client_ojp4danube/map/map_web_widget.dart'
if (dart.library.io) 'package:client_ojp4danube/map/map_widget.dart';
import 'package:flutter/material.dart';
abstract class MapWidget extends StatefulWidget {
factory MapWidget() => getMapWidget();
}
WebMap widget that uses google_maps:
import 'dart:html';
import 'package:client_ojp4danube/map/abstract_map_widget.dart';
import 'package:flutter/cupertino.dart';
import 'package:google_maps/google_maps.dart';
import 'dart:ui' as ui;
Widget getMap() {
String htmlId = "7";
// ignore: undefined_prefixed_name
ui.platformViewRegistry.registerViewFactory(htmlId, (int viewId) {
final myLatlng = new LatLng(30.2669444, -97.7427778);
final mapOptions = new MapOptions()
..zoom = 8
..center = new LatLng(30.2669444, -97.7427778);
final elem = DivElement()
..id = htmlId
..style.width = "100%"
..style.height = "100%"
..style.border = 'none';
final map = GMap(elem, mapOptions);
Marker(MarkerOptions()
..position = myLatlng
..map = map
..title = 'Hello World!');
return elem;
});
return HtmlElementView(viewType: htmlId);
}
class WebMap extends StatefulWidget implements MapWidget {
WebMap({Key? key}) : super(key: key);
#override
State<WebMap> createState() => WebMapState();
}
class WebMapState extends State<WebMap> {
#override
Widget build(BuildContext context) {
return getMap();
}
}
MapWidget getMapWidget() {
print("Intra in get map web ");
return WebMap();
}
Mobile Map Widget
import 'dart:async';
import 'package:client_ojp4danube/map/abstract_map_widget.dart';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
class MobileMap extends StatefulWidget implements MapWidget {
MobileMap({Key? key}) : super(key: key);
#override
State<MobileMap> createState() => MobileMapState();
}
class MobileMapState extends State<MobileMap> {
final Completer<GoogleMapController> _controller = Completer();
static const CameraPosition _kGooglePlex = CameraPosition(
target: LatLng(37.42796133580664, -122.085749655962),
zoom: 14.4746,
);
#override
Widget build(BuildContext context) {
return GoogleMap(
mapType: MapType.hybrid,
initialCameraPosition: _kGooglePlex,
onMapCreated: (GoogleMapController controller) {
_controller.complete(controller);
},
);
}
}
MapWidget getMapWidget() {
return MobileMap();
}
getMapWidget - stub
import 'package:client_ojp4danube/map/abstract_map_widget.dart';
// Created because importing dart.html on a mobile app breaks the build
MapWidget getMapWidget() => throw UnsupportedError(
'Cannot create a map without dart:html or google_maps_flutter');
Actually using the abstract widget that will return the widget suited for the platform
import 'package:client_ojp4danube/map/abstract_map_widget.dart';
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(child: MapWidget()),
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
EDIT: A new official plugin has been released: https://pub.dev/packages/google_maps_flutter_web . It already works with the existing google_maps_flutter plugin, just add your api script in the web/index.html .
As the user exilonX suggested, the current way (Apr '22) to use Google Maps on both Flutter web and mobile, is to load the library dynamically based on the device. However, his answer lacks of some important details. It took me almost 1h to make his work working, therefore I'm sharing here a clearer and more organized solution, hopefully it'll save you some time (I couldn't edit his answer due to long edit queue).
Folder structure:
\widget
\map_widget.dart
\web_map_widget.dart
\mob_map_widget.dart
\map_widget_stub.dart
MapWidget:
In the file map_widget.dart you'll have the abstract MapWidget:
import 'package:flutter/material.dart';
import 'map_widget_stub.dart'
if (dart.library.html) 'web_map_widget.dart'
if (dart.library.io) 'mob_map_widget.dart';
abstract class MapWidget extends StatefulWidget {
factory MapWidget() => getMapWidget();
}
NOTE: the only semicolumn you need on the conditional import is at the end of the second if.
Web MapWidget:
This file will contain the google map shown on web:
import 'dart:html';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:google_maps/google_maps.dart';
import 'map_widget.dart';
MapWidget getMapWidget() => WebMap();
class WebMap extends StatefulWidget implements MapWidget {
WebMap({Key? key}) : super(key: key);
#override
State<WebMap> createState() => WebMapState();
}
class WebMapState extends State<WebMap> {
#override
Widget build(BuildContext context) {
final String htmlId = "map";
// ignore: undefined_prefixed_name
ui.platformViewRegistry.registerViewFactory(htmlId, (int viewId) {
final mapOptions = MapOptions()
..zoom = 15.0
..center = LatLng(35.7560423, 139.7803552);
final elem = DivElement()..id = htmlId;
final map = GMap(elem, mapOptions);
map.onCenterChanged.listen((event) {});
map.onDragstart.listen((event) {});
map.onDragend.listen((event) {});
Marker(MarkerOptions()
..position = map.center
..map = map);
return elem;
});
return HtmlElementView(viewType: htmlId);
}
}
Here you can find more details about the web implementation.
Mobile MapWidget:
This file contains the implementation for mobile (android/ios):
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'map_widget.dart';
MapWidget getMapWidget() => MobileMap();
class MobileMap extends StatefulWidget implements MapWidget {
MobileMap({Key? key}) : super(key: key);
#override
State<MobileMap> createState() => MobileMapState();
}
class MobileMapState extends State<MobileMap> {
final Completer<GoogleMapController> _controller = Completer();
static const CameraPosition _kFalentexHouse =
CameraPosition(target: LatLng(44.497858579692135, 11.336362079086408));
#override
Widget build(BuildContext context) {
return GoogleMap(
mapType: MapType.hybrid,
initialCameraPosition: _kFalentexHouse,
onMapCreated: (GoogleMapController controller) {
_controller.complete(controller);
},
);
}
}
Stub
Finally, you need a stub:
import 'map_widget.dart';
//the error is shown in case of wrong version loaded on wrong platform
MapWidget getMapWidget() => throw UnsupportedError(
'Cannot create a map without dart:html or google_maps_flutter');
Usage
Now you can use the widget MapWidget as a normal widget:
Scaffold(
body: Center(
child: SizedBox(
height: 300,
width: 300,
child: MapWidget(),
),
),
);
NOTE: in order to make the map work you need to set it up with the key. See the official library documentation for mobile and web.
I'm using the Mapbox map and when I run the app in an emulator, it works fine. However, in my widget test, the onMapCreated method is never called, which makes it impossible to test the behavior of the app.
My MapWidget (condensed):
class MapWidget extends StatefulWidget {
final LatLng initialCameraPositionCoordinates;
final double initialZoomLevel;
const MapWidget({
Key key,
#required this.initialCameraPositionCoordinates,
#required this.initialZoomLevel,
}) : super(key: key);
#override
State createState() => MapWidgetState();
}
class MapWidgetState extends State<MapWidget> {
#override
Widget build(BuildContext context) {
return BlocConsumer<Cubit, State>(
builder: (context, state) {
return MouseRegion(
cursor: MouseCursor.defer,
child: MapboxMap(
onMapCreated: _onMapCreated,
),
);
},
);
}
void _onMapCreated(MapboxMapController controller) async {
print("This is never called in the test");
}
And the corresponding widget test looks like this:
void main() {
testWidgets("Mapbox", (WidgetTester tester) async {
await tester.pumpWidget(
BlocProvider(
create: (_) => _cubit,
child: MaterialApp(
home: MapWidget(
initialCameraPositionCoordinates:
_initialCameraPositionCorrdinates,
initialZoomLevel: _initialZoomLevel,
),
),
),
);
await tester.pump(Duration(seconds: 10));
});
}
No exception is thrown, meaning it renders fine. However, the print statement in the onMapCreated is never printed.
Running the app in an emulator, the print statement is called.
Does anyone have an idea what's going on here?
I ran into the same issue, and worked around it by manually invoking the callbacks. Something like this in your widget test:
var mapboxMap = tester.firstWidget(find.byType(MapboxMap)) as MapboxMap;
mapboxMap.onMapCreated!(<mocked controller>);
mapboxMap.onStyleLoadedCallback!();
Where "<mocked controller" is an instance of your MapboxMapController mock.
I imagine the underlying issue has to do with the native map view not actually being loaded during widget tests, and therefore, no callbacks are invoked.
Like Google Drive, can I create custom menu in Flutter Web application?.
Below the instruction how to implement working context menu called via mouse right button in flutter web app:
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:universal_html/html.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
void initState() {
super.initState();
// Prevent default event handler
document.onContextMenu.listen((event) => event.preventDefault());
}
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
body: Center(
child: Listener(
child: Icon(
Icons.ac_unit,
size: 48.0,
),
onPointerDown: _onPointerDown,
),
),
);
}
/// Callback when mouse clicked on `Listener` wrapped widget.
Future<void> _onPointerDown(PointerDownEvent event) async {
// Check if right mouse button clicked
if (event.kind == PointerDeviceKind.mouse &&
event.buttons == kSecondaryMouseButton) {
final overlay =
Overlay.of(context).context.findRenderObject() as RenderBox;
final menuItem = await showMenu<int>(
context: context,
items: [
PopupMenuItem(child: Text('Copy'), value: 1),
PopupMenuItem(child: Text('Cut'), value: 2),
],
position: RelativeRect.fromSize(
event.position & Size(48.0, 48.0), overlay.size));
// Check if menu item clicked
switch (menuItem) {
case 1:
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text('Copy clicked'),
behavior: SnackBarBehavior.floating,
));
break;
case 2:
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text('Cut clicked'),
behavior: SnackBarBehavior.floating));
break;
default:
}
}
}
}
The only thing is to do is correct positioning of left top corner of context menu.
Until the open issue is resolved, you can do the following in your main():
import 'dart:html';
void main() {
window.document.onContextMenu.listen((evt) => evt.preventDefault());
// ...
}
Here is the open issue for it: https://github.com/flutter/flutter/issues/31955
You can disable it for a webpage like this:
How do I disable right click on my web page?
You can also listen for Pointer Signal events and render the popup in Flutter:
https://medium.com/#crizantlai/flutter-handling-mouse-events-241108731537
Basically on web for example you would disable the default context menu, and show an Overlay in flutter when you receive the right click pointer signal.
Prevent default contextmenu
Add an oncontextmenu attribute to <html> tag in web/index.html:
<!DOCTYPE html>
<html oncontextmenu="event.preventDefault();">
<head>
...
See also: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes#event_handler_attributes
This has the same effect as https://stackoverflow.com/a/64779321/16613821 (window.document is just the <html> tag), but without triggering "Avoid using web-only libraries outside Flutter web plugin packages." warning or using universal_html package.
NOTE: Hot reload won't work for this kind of change, but you can simply refresh(F5) browser.
Add your custom contextmenu
https://github.com/flutter/flutter/pull/74286 doesn't work well for your usecase
This should show up by default on desktop, but only when right clicking on EditableText-based widgets. Right clicking elsewhere does nothing, for now.
This is also purposely not customizable or reusable for now. It was a temporary solution that we plan to expand on.
In general, you can use GestureDetector.onSecondaryTap to detect user's right click.
Thanks for the inspiration BambinoUA. I decided to make my own cross platform class for this.
Works on iOS/Android/Web/Windows/Mac & Linux. Tested.
import 'package:bap/components/splash_effect.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:universal_html/html.dart' as html;
class CrossPlatformClick extends StatefulWidget {
final Widget child;
/**
* Normal touch, tap, right click for platforms.
*/
final Function()? onNormalTap;
/**
* A list of menu items for right click or long press.
*/
final List<PopupMenuEntry<String>>? menuItems;
final Function(String? itemValue)? onMenuItemTapped;
const CrossPlatformClick({Key? key, required this.child, this.menuItems, this.onNormalTap, this.onMenuItemTapped}) : super(key: key);
#override
State<CrossPlatformClick> createState() => _CrossPlatformClickState();
}
class _CrossPlatformClickState extends State<CrossPlatformClick> {
/**
* We record this so that we can use long-press and location.
*/
PointerDownEvent? _lastEvent;
#override
Widget build(BuildContext context) {
final listener = Listener(
child: widget.child,
onPointerDown: (event) => _onPointerDown(context, event),
);
return SplashEffect(
isDisabled: widget.onNormalTap == null,
borderRadius: BorderRadius.zero,
onTap: widget.onNormalTap!,
child: listener,
onLongPress: () {
if (_lastEvent != null) {
_openMenu(context, _lastEvent!);
return;
}
if (kDebugMode) {
print("Last event was null, cannot open menu");
}
},
);
}
#override
void initState() {
super.initState();
html.document.onContextMenu.listen((event) => event.preventDefault());
}
/// Callback when mouse clicked on `Listener` wrapped widget.
Future<void> _onPointerDown(BuildContext context, PointerDownEvent event) async {
_lastEvent = event;
if (widget.menuItems == null) {
return;
}
// Check if right mouse button clicked
if (event.kind == PointerDeviceKind.mouse && event.buttons == kSecondaryMouseButton) {
return await _openMenu(context, event);
}
}
_openMenu(BuildContext context, PointerDownEvent event) async {
final overlay = Overlay.of(context)!.context.findRenderObject() as RenderBox;
final menuItem = await showMenu<String>(
context: context,
items: widget.menuItems ?? [],
position: RelativeRect.fromSize(event.position & Size(48.0, 48.0), overlay.size),
);
widget.onMenuItemTapped!(menuItem);
}
}
The class for standard splash effect touches
import 'package:flutter/material.dart';
class SplashEffect extends StatelessWidget {
final Widget child;
final Function() onTap;
final Function()? onLongPress;
final BorderRadius? borderRadius;
final bool isDisabled;
const SplashEffect({
Key? key,
required this.child,
required this.onTap,
this.isDisabled = false,
this.onLongPress,
this.borderRadius = const BorderRadius.all(Radius.circular(6)),
}) : super(key: key);
#override
Widget build(BuildContext context) {
if (isDisabled) {
return child;
}
return Material(
type: MaterialType.transparency,
child: InkWell(
borderRadius: borderRadius,
child: child,
onTap: onTap,
onLongPress: onLongPress,
),
);
}
}
And how to use it:
return CrossPlatformClick(
onNormalTap: onTapped,
menuItems: [
PopupMenuItem(child: Text('Copy Name', style: TextStyle(fontSize: 16)), value: "copied"),
],
onMenuItemTapped: (item) {
print("item tapped: " + (item ?? "-no-item"));
},
child:
I am newbie in flutter, I am trying to set my location as the center point of the map that the app draw on the screen
I am using statefulwidget as the root of my app and add this code :
class MyMap extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return MyMapState();
}
}
class MyMapState extends State<MyMap> {
GoogleMapController googleMapController;
LocationData currentLocation;
LocationData distinationLocation;
Location location;
#override
void initState() {
location = Location();
setInitSourceAndDestination();
super.initState();
}
setInitSourceAndDestination() async {
currentLocation = await location.getLocation();
}
#override
Widget build(BuildContext context) {
CameraPosition initialCameraPosition = CameraPosition(
target: LatLng(currentLocation.latitude, currentLocation.longitude),);
return GoogleMap(
initialCameraPosition: initialCameraPosition,
onMapCreated: (GoogleMapController controller) => googleMapController = controller,
mapType: MapType.normal,
tiltGesturesEnabled: false,
compassEnabled: true,
myLocationEnabled: true,
);
}
}
But there are a problem I can not solve:
the map is drawn in the screen before currentLocation is set
I tried setState and the problem has not been solved.
How can I make the app draw the map after setInitSourceAndDestination method finish excuting?
What make me confused is that the code at this form the build method will be excuted before setInitSourceAndDestination method finished, but if I add setState and change the currentLocation value inside it to rebuild the screen I noticed that setState executed before build function but it still dont show my location
Add a condition to check the state. If the state is null, then draw a loading indicator. If not null, draw the maps
it can be look like this :
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:location/location.dart';
class MapScreen extends StatefulWidget {
#override
_MapScreenState createState() => _MapScreenState();
}
class _MapScreenState extends State<MapScreen> {
double lat;
double long;
LatLng _pickedLoc;
Future _getLocation() async {
LocationData location = await Location().getLocation();
setState(() {
lat = location.latitude;
long = location.longitude;
});
}
_selectLocation(LatLng location) {
_pickedLoc = location;
}
#override
void initState() {
super.initState();
_getLocation();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: lat == null || long == null
? Center(
child: CircularProgressIndicator(),
)
: GoogleMap(
initialCameraPosition: CameraPosition(
zoom: 16,
target: LatLng(lat, long),
),
onTap: _selectLocation,
onCameraMove: (object) => {debugPrint(object.target.toString())},
markers: {
Marker(
markerId: MarkerId("m1"),
position: _pickedLoc,
)
},
),
);
}
}