I'm attempting to add opacity to the GoogleMap widget but not seeing any changes.
I've previously tried wrapping the entire widget with a Container then adding Opacity and GoogleMap as direct children but this did not work either.
The code below builds correctly, but adds no opacity:
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Stack(
children: <Widget>[
Opacity(
opacity: 0.5,
child: GoogleMap(
onMapCreated: _onMapCreated,
myLocationButtonEnabled: false,
initialCameraPosition: CameraPosition(
target: _center,
zoom: 15.0,
),
indoorViewEnabled: false,
mapType: MapType.normal,
markers: _markers
)
),
...
]
)
)
);
}
I would expect the map to be opaque. Is this possible with GoogleMaps plugin or do they prevent styling like this?
The google_maps_flutter plugin renders a native GMSMapView on iOS and a native MapView on Android, so the alpha setting need to be implemented by the plugin itself to be able to access it.
Unfortunately you can't use Flutter's Opacity widget in the way you have attempted when rendering native components, since that widget only works on elements that are drawn on the canvas by Flutter itself.
So if you really want to achieve this, you'll have to implement this in Android and iOS yourself. In that case you can use the google_maps_flutter plugin as a reference.
Related
I am trying to implement a google_maps in flutter where I can zoom-in and zoom-out by pinching like official google maps. I cannot find any method for implementing the same.
My code snippet is -
GoogleMap(
onMapCreated: _onMapCreated,
initialCameraPosition: CameraPosition(
target: _center,
zoom: -3.0
),
scrollGesturesEnabled: true,
zoomGesturesEnabled: true,
myLocationButtonEnabled: false,
gestureRecognizers: Set()
..add( Factory<PanGestureRecognizer>(() => PanGestureRecognizer())),
markers: markers
);
Thanks in advance.
The problem is that the zoom level is negative however the min zoom level is 0.
The above answer is also correct but if your map is wrapped in the SingleChildScrollView() widget then the zoom feature will not work fine.
I Just upgrade the flutter SDK,
And now its working.
I see a lot of tutorials for implementing bottom sheet in my flutter application, but i am facing problem in implementing that, all of them showing bottom sheet after onPressed/onTap and i do not want that. I had implemented google map in my application but now i want to show persistent bottom sheet after i got response from API on map screen and color of that bottom sheet must be transparent so that map can be visible through bottom sheet.
Can you share some code that how can i show bottomsheet without onpressed on google map screen in flutter mobile application?
you can use a stack widget and visibility widgets to show that.
here is some minimalist code
bool _isVisible=false;
//after you get a response fro your api you set state of `_isVisible` to `true/!_isVisible.`
Stack....
Positioned(bottom:10,left:0
child: Visibility(visible:!_isVisible,
child Container(color:Colors.Transparent,
child:Center(child:Text("your data here")))),
...
after getting your data :
return showModalBottomSheet(
isDismissible: false,
isScrollControlled: true,
context: context,
builder: (BuildContext context) => SingleChildScrollView(
child: Container(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom),
child: ?,
),
),
);
In Android I was able to call Google Places screen to let user pick a location to save it, I want to do this with flutter.
I searched and found almost nothing implement that, and I understood that now this is the the most official library (still not implement what I want to do) https://pub.dartlang.org/packages/google_maps_flutter
and it's still not finished yet (Developers Preview)
GoogleMap(
onTap: _mapTapped,
compassEnabled: true,
onMapCreated: makeController,
initialCameraPosition: CameraPosition(
target: LatLng(40.712776,-74.005974),
zoom: 12.0,
),
)
_mapTapped(LatLng location) {
print(location);
// The result will be the location you've been selected
// something like this LatLng(12.12323,34.12312)
// you can do whatever you do with it
}
I am using this in my pubspec
map_view:
git:
url: git://github.com/Eimji/flutter_google_map_view
Then you can capture onclick events on the map
mapView.onMapTapped.listen((location) {
currentLatitude = location.latitude;
currentLongitude = location.longitude;
//Show only one marker
mapView.clearAnnotations();
mapView.setMarkers(
[Marker("1", "Location", currentLatitude, currentLongitude)]);
//Do whatever you want with the chosen location
mapView.setCameraPosition(
CameraPosition(Location(currentLatitude, currentLongitude), 18));
.............
});
HI i want to ask about how to set layout for streambuilder and a container.
I have a streambuilder named streamdb,
and bellow the streambuilder i want to add, a button name buttonscan.
Container container = new Container(margin: const EdgeInsets.all(10.0),
child: new Row(margin: const EdgeInsets.all(10.0),
children: [streamdb,buttonscan]));
have tried :
children : <Widget>[streamdb],buttonname]
children : <Widget>[streamdb,buttonname]
children : [new Expanded(streamdb),buttonname]
When I compiled above code produce an error, how to build a streambuilder and a button ?
last but not least why is it so hard to create a post asking a problem in stackoverflow ?
just solve my own problem.
Hopefully it can help other people with same problems.
its better to add New Expanded() to the list builder , so it tell the apps to expand as much as necessary
sometimes the class could not resolve "this" method , so since dart-flutter can ignore space,its better for me to just do this :
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: new Text('MY App TITLE'),
),
body: new Center(
child: new Column(
children: <Widget>[
new Expanded(child:
new StreamBuilder()),mybutton,]))
PS : Kindly post more comment for better codes. Thanks!!
How can I disable the default splash/ripple/ink effect on a Widget? Sometimes the effect is unwanted, such as in the following TextField case:
Per #hunter's suggestion above, I found that by setting both highlightColor and splashColor in my theme to Colors.transparent removed the ripple.
I do hold some concerns that setting highlightColor might have some knock-on effects, but I haven't noticed any yet.
Edit: While my original answer has loads of up-votes, the more I learn, the more I've realised that it really isn't the right way to do it. As several people have pointed out below, a better solution is to use the splashFactory. For example, the code below shows it being set directly via the style, or you can set it in your theme too:
ElevatedButton(
onPressed: onPressed,
style: ElevatedButton.styleFrom(
splashFactory: NoSplash.splashFactory,
),
child: child,
);
You can wrap the component into Theme and set the properties splashColor and highlightColor to transparent on ThemeData
Theme(
data: ThemeData(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
),
child: YourWidget(),
);
You can replace the Theme's splashFactory with one that doesn't paint anything:
class NoSplashFactory extends InteractiveInkFeatureFactory {
const NoSplashFactory();
#override
InteractiveInkFeature create({
MaterialInkController controller,
RenderBox referenceBox,
Offset position,
Color color,
TextDirection textDirection,
bool containedInkWell = false,
Rect Function() rectCallback,
BorderRadius borderRadius,
ShapeBorder customBorder,
double radius,
VoidCallback onRemoved,
}) {
return NoSplash(
controller: controller,
referenceBox: referenceBox,
);
}
}
class NoSplash extends InteractiveInkFeature {
NoSplash({
#required MaterialInkController controller,
#required RenderBox referenceBox,
}) : assert(controller != null),
assert(referenceBox != null),
super(
controller: controller,
referenceBox: referenceBox,
);
#override
void paintFeature(Canvas canvas, Matrix4 transform) {}
}
And wrap your widget with it:
child: new Theme(
data: new ThemeData(splashFactory: const NoSplashFactory()),
child: new TextField(...),
),
Originally answered by HansMuller on a GitHub PR.
Use NoSplash.splashFactory
Set to a theme
final yourTheme = ThemeData.light();
...
Theme(
data: yourTheme.copyWith(
splashFactory: NoSplash.splashFactory,
),
...
)
Set to a material widget
ElevatedButton(
style: ElevatedButton.styleFrom(
splashFactory: NoSplash.splashFactory,
),
onPressed: () { },
child: Text('No Splash'),
)
I'll modify Camilo's approach just to be sure we don't override other properties of the parent theme.
var color = Colors.transparent;
Theme(
data: Theme.of(context).copyWith(
highlightColor: color,
splashColor: color,
hoverColor: color,
),
child: YourWidget(),
)
I have tried the above answer without success(splashColor: Colors.transparent, highlightColor: Colors.transparent,).
My solution was to only set hoverColor:Colors.transparent
As I was looking for a way to remove the slash from list overscroll, none of the ThemeData related solutions worked for me. I thought that this question was the same as the one I had, so for any users facing the same misunderstanding, the following solution proved to work, and is pretty neat when put into a stateless widget as you can see below:
class NoSplash extends StatelessWidget {
NoSplash({this.child});
final Widget child;
#override
Widget build(BuildContext context) {
return NotificationListener<OverscrollIndicatorNotification>(
onNotification: (OverscrollIndicatorNotification overscroll) {
overscroll.disallowGlow();
return true;
},
child: child);
}
}
The way to use this is to simply wrap your widget with NoSplash(child: )
Hope someone finds this useful!
I found this question while looking for a solution to disable splash on ElevatedButton. all solutions presented here did not work for my problem, even though Theme(data: ThemeData(... NoSplash..)) was working but for some reason did not work. I set overlayColor:.. in ButtonStyle() to transparent like this: overlayColor: MaterialStateProperty.all(Colors.transparent), and worked. hope this will help someone