A Google map is displayed on the screen and the map style is updated with a dark theme when the map is created (onMapCreated)
The issue is a white blink when the style is changed and it is very visible due to the black theme transition. (Cf. video)
return GoogleMap(
myLocationButtonEnabled: false,
zoomGesturesEnabled: false,
scrollGesturesEnabled: true,
mapType: MapType.normal,
circles: circles,
markers: markers,
initialCameraPosition: cameraPosition,
onMapCreated: (GoogleMapController controller) {
_mapController = controller;
final currentMapStyle = (_themeType == ThemeType.dark)
? _darkMapStyle
: _normalMapStyle;
_mapController.setMapStyle(currentMapStyle);
},
);
}),
As a workaround, I placed the map in a stack.
This stack is filled with the map and a container.
The container is set to transparent after a small period (100ms).
Related
I want to change text (and Icon) colors based on the background image for visibility.
I've tried:
Using palette_generator package, to check the Dominant Color of the background Image and useWhiteForgroundForColor function (returns a bool) from flutter_statusbarcolor package to select black or white color for the my text (and Icon) colors.
The Problem: Sometimes dominant color turns out null. In my tests, this happens with black and white colors and I don't know of any ways to find out which one.
Future<bool> useWhiteTextColor(String imageUrl) async {
PaletteGenerator paletteGenerator =
await PaletteGenerator.fromImageProvider(
NetworkImage(imageUrl),
// Images are square
size: Size(300, 300),
// I want the dominant color of the top left section of the image
region: Offset.zero & Size(40, 40),
);
Color dominantColor = paletteGenerator.dominantColor?.color;
// Here's the problem
// Sometimes dominantColor returns null
// With black and white background colors in my tests
if (dominantColor == null) print('Dominant Color null');
return useWhiteForeground(dominantColor);
}
I found other methods for other languages, but I don't know a way to implement the same method in dart.
Additional note:
My actual code includes some additional complications. I am using a SliverAppBar and here I want to determine the title and icons colors for when the flexibleSpace is expanded. I change their colors when collapsed with the help of the community based on this.
the color class already has a method to calculate luminance, called computeLuminance()
Color textColor = color.computeLuminance() > 0.5 ? Colors.black : Colors.white;
i use the below method to find out which one to be used (either black or white).
Color getTextColor(Color color) {
int d = 0;
// Counting the perceptive luminance - human eye favors green color...
double luminance =
(0.299 * color.red + 0.587 * color.green + 0.114 * color.blue) / 255;
if (luminance > 0.5)
d = 0; // bright colors - black font
else
d = 255; // dark colors - white font
return Color.fromARGB(color.alpha, d, d, d); }
There are Two ways of getting Text Color based upon the BG Color of Card or Button or Tags.
First One is :
Color txColor = color.computeLuminance() < 0.5 ? Colors.white : Colors.black;
The Second is using Theme , Where user may have dark theme or light theme of device.
import 'dart:math';
import 'package:flutter/material.dart';
class ColorEstimationPage extends StatelessWidget {
Color _randomBackgroundColor() {
List<Color> colors = [Colors.red, Colors.green, Colors.amber, Colors.black];
return colors[Random().nextInt(colors.length)];
}
/// With this you can get the Color either black or white
Color _textColorForBackground(Color backgroundColor) {
if (ThemeData.estimateBrightnessForColor(backgroundColor) ==
Brightness.dark) {
return Colors.white;
}
return Colors.black;
}
#override
Widget build(BuildContext context) {
Color bgColor = _randomBackgroundColor();
return Scaffold(
backgroundColor: bgColor,
body: Center(
child: Text(
"I'm the correct text color!",
style: TextStyle(color: _textColorForBackground(bgColor)),
),
),
);
}
}
You should create the palette generator like this
PaletteGenerator paletteGenerator =
await PaletteGenerator.fromImageProvider(
NetworkImage(imageUrl),
filters: [],
// Images are square
size: Size(300, 300),
// I want the dominant color of the top left section of the image
region: Offset.zero & Size(40, 40),
);
notice the empty list in the filters parameter
Colorful colors
If you have font/background colors that aren't only black and white, you should use some thing else:
final colorDifference = newBackgroundColor.computeLuminance() -
textColor.computeLuminance();
if (colorDifference.abs() < 0.2) {
textColor = textColor.computeLuminance() > 0.5
? Colors.black
: Colors.white;
}
With this, you will only change the font color if necessary (the luminance difference is so less that the colors don't really stand out).
For buttons you can use. this will auto change button color based on background
buttonTheme: ButtonThemeData(
buttonColor: Colors.teal[500],
textTheme: ButtonTextTheme.primary
)
I've changed the question from center the Tab to customize the position of the Tab.
Because I noticed that the Tab is actually Centered and according to the document, it just adding paddings.
But if you want a TabBar whenever it avoid safe area or not the elements in tabs are aligned centered (automatically), I can't find a way now.
look at the screenshot above, the icons/titles successfully avoid the black bar area (by extend the height of Tabbar), but not vertically center aligned. I tried put a Center element to wrap the tabar to tab widget, It extend the height to the whole screen.
I also tried wrap the tab in a Container widget and get the height property set, but it seems all the height are avoid the safe area (by add the a const).
And I tried wrap the whole Scaffold with a SafeArea widget, but the safe area become black and we actually wish the tab bat become higher and then layout element in this higher container, but not just move the container.
So the question might be How can I custom the position of the Tab widget. because the Tabbar is actually centered, but it layout child elements by avoid the safe area, so it's not visually vertical-aligned.
my code is:
#override
Widget build(BuildContext context) {
final icons = [Icons.library_books, Icons.photo, Icons.toc];
return Scaffold(
bottomNavigationBar: Material(
color: Theme.of(context).primaryColor,
child: SafeArea(child: TabBar(
controller: _tabController,
tabs: _titles.map((t) {
final i = _titles.indexOf(t);
return Tab(
text: t,
icon: Icon(icons[i]),
);
}).toList(),
),),
),
body: TabBarView(
controller: _tabController,
children: <Widget>[
PostListPage(
userid: widget.userid,
username: widget.username,
),
AlbumListPage(
userid: widget.userid,
username: widget.username,
),
TodoListPage(
userid: widget.userid,
username: widget.username,
),
],
)
);
}
}
Ok, I think I understand what you want now and I'm afraid it's not achievable.
If you don't use the SafeArea widget, the bar has the normal height at the full bottom and everything is centered. It has the disadvantage that it is over the black area in iPhone X.
But if you want to avoid the black bar area, you have to use the SafeArea (as you do) which adds some padding and pushes everything up a little, thus avoiding the bottom "unsafe" area.
So, it is the padding added by SafeArea which prevents you from pushing down (centering) the titles and icons.
A possible option is to wrap the SafeArea with a Container with a black color so the unsafe area is black.
child: Container(
color: Colors.black,
child: SafeArea(child: TabBar(
controller: _tabController,
...
When you drag a marker, the GMSMapView slightly slides down.
How to disable this animation?
Looks like in javascript it can be disabled:
Removing the Google Maps V3 Marker drag animation?
You can define if the marker can be dragged when you create the marker in your js file. For example:
myMarker = new google.maps.Marker({
position : new google.maps.LatLng(myLat, myLng),
map : map,
draggable : false
});
Same thing for the animation:
myMarker = new google.maps.Marker({
position : new google.maps.LatLng(myLat, myLng),
map : map,
draggable : false,
animation : none
});
I am using OpenLayers 3.5.0 to embed a map in my website, and place a marker overlay at specific coordinates. I've also added a fullscreen control. Both work individually, but in full-screen mode the marker is no longer at the specified coordinates. It also moves around when panning instead of staying fixed to one map position.
Here's the code that sets up the map:
function map(lon, lat) {
var coords = ol.proj.fromLonLat([lon, lat], 'EPSG:3857');
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var map = new ol.Map({
controls: ol.control.defaults().extend([
new ol.control.FullScreen()
]),
layers: [ layer ],
target: 'map',
view: new ol.View({
maxZoom: 19,
zoom: 15,
center: coords
}),
interactions: ol.interaction.defaults({mouseWheelZoom:false})
});
map.addOverlay(new ol.Overlay({
position: coords,
positioning: 'bottom-center',
element: $('<img>')
.addClass('location-popover')
.attr('src', 'pin.jpg')
}));
}
Is there a way I can make the overlay play nicely in full-screen mode?
I had a similar issue with the popovers/markers being in the wrong position. Not sure if it's the same thing you're experiencing but in my case I was appending data to the page along with the markers, and this was adding a scrollbar to the window. This affected the positioning, so what I had to do was call
map.updateSize();
after I was done adding everything. After that everything lined up correctly.
Is it possible to animate a background color change with toggleClass?
Here is the page working currently. - this has been updated since first post
Is it possible to animate this? I have to use toggleClass instead of the JQuery UI extended animate because there are background-images in the original CSS and animate will change the background-color, but not remove the background-image. Plus, I want to toggle it, not change the background-color permanently.
Here is the current javascript:
function ToggleClass() {
$("#Section2").toggleClass("errorpanel");
$("#Secion2HeaderText").toggleClass("errortext");
}
Secondly, as you see, I have to change the CSS files twice. I can't understand why this class for the
.errorpanel{ color: #ffffff !important; background: red !important;}
does not endtend down to the tag. It will change the accordion header to white when it is not selected, but when it is selected, it leaves the background as red, but changes the color to the original shade of blue. I can override that and get it to stay white all the time by adding this class:
.errortext{color: #ffffff !important;}
Anyway, I would like to animate those both forward and back.
Edit:
I am thinking something like this:
function ToggleClass() {
var color = $("#Section2").css("background-color");
if (color == 'rgb(255, 0, 0)') {
$("#Section2").animate({ backgroundColor: "#507CD1" }, 2500);
$("#Section2").toggleClass("testerrorpanel");
}
else {
$("#Section2").toggleClass("testerrorpanel");
$("#Section2").animate({ backgroundColor: "red" }, 2500);
}
$("#Secion2HeaderText").toggleClass("errortext");
}
That looks to see if the background is red. If it is, it changes the background color back to the original value, with the background image (and the panel still changes to a lighter color when selected, so all original functionality is returned), it just doesn't animate back to blue. The only thing the toggle does now is remove the background image because that can't be animated. This page shows the current functionality.
You could try using delay
$("#Section2").animate({ backgroundColor: "red" }, 2500).delay(800).animate({ backgroundColor: "#507CD1" }, 2500);
Not 100% sure but I think this may work.