Fix badge entity_picture size

This commit is contained in:
Yegor Vialov 2020-05-09 20:47:28 +00:00
parent 9078ad81e8
commit 24d42c9597
4 changed files with 230 additions and 213 deletions

View File

@ -50,6 +50,147 @@ class Badges extends StatelessWidget {
}
return Container(height: 0.0, width: 0.0,);
}
}
class BadgeWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
final entityModel = EntityModel.of(context);
Widget badgeIcon;
String onBadgeTextValue;
Color iconColor = HAClientTheme().getBadgeColor(entityModel.entityWrapper.entity.domain);
switch (entityModel.entityWrapper.entity.domain) {
case "sun":
{
IconData iconData;
if (entityModel.entityWrapper.entity.state == "below_horizon") {
iconData = MaterialDesignIcons.getIconDataFromIconCode(0xf0dc);
} else {
iconData = MaterialDesignIcons.getIconDataFromIconCode(0xf5a8);
}
badgeIcon = Padding(
padding: EdgeInsets.all(10),
child: Icon(
iconData,
)
);
break;
}
case "camera":
case "media_player":
case "binary_sensor":
{
badgeIcon = EntityIcon(
imagePadding: EdgeInsets.all(0.0),
iconPadding: EdgeInsets.all(10),
color: Theme.of(context).textTheme.body2.color
);
break;
}
case "device_tracker":
case "person":
{
badgeIcon = EntityIcon(
imagePadding: EdgeInsets.all(0.0),
iconPadding: EdgeInsets.all(10),
color: Theme.of(context).textTheme.body2.color
);
onBadgeTextValue = entityModel.entityWrapper.entity.displayState;
break;
}
default:
{
onBadgeTextValue = entityModel.entityWrapper.unitOfMeasurement;
badgeIcon = Padding(
padding: EdgeInsets.all(4),
child: Text(
"${entityModel.entityWrapper.entity.displayState}",
overflow: TextOverflow.fade,
softWrap: false,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.body1
)
);
break;
}
}
Widget onBadgeText;
if (onBadgeTextValue == null || onBadgeTextValue.length == 0) {
onBadgeText = Container(width: 0.0, height: 0.0);
} else {
onBadgeText = Container(
constraints: BoxConstraints(maxWidth: 50),
padding: EdgeInsets.fromLTRB(6.0, 2.0, 6.0, 2.0),
child: Text("$onBadgeTextValue",
style: Theme.of(context).textTheme.overline.copyWith(
color: HAClientTheme().getOnBadgeTextColor()
),
textAlign: TextAlign.center,
softWrap: false,
overflow: TextOverflow.ellipsis
),
decoration: new BoxDecoration(
color: iconColor,
borderRadius: BorderRadius.circular(9.0),
)
);
}
return GestureDetector(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Stack(
overflow: Overflow.visible,
alignment: Alignment.center,
children: <Widget>[
Container(
width: 45,
height: 45,
decoration: new BoxDecoration(
// Circle shape
shape: BoxShape.circle,
color: Theme.of(context).cardColor,
// The border you want
border: Border.all(
width: 2.0,
color: iconColor,
),
),
),
SizedBox(
width: 41,
height: 41,
child: FittedBox(
fit: BoxFit.contain,
alignment: Alignment.center,
child: badgeIcon,
)
),
Positioned(
bottom: -6,
child: onBadgeText
)
],
),
Container(
constraints: BoxConstraints(maxWidth: 45),
padding: EdgeInsets.only(top: 10),
child: Text(
"${entityModel.entityWrapper.displayName}",
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.caption.copyWith(
fontSize: 10
),
softWrap: true,
maxLines: 3,
overflow: TextOverflow.ellipsis,
),
)
],
),
onTap: () => entityModel.entityWrapper.handleTap(),
onDoubleTap: () => entityModel.entityWrapper.handleDoubleTap(),
onLongPress: () => entityModel.entityWrapper.handleHold(),
);
}
}

View File

@ -1,134 +0,0 @@
part of '../main.dart';
class BadgeWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
final entityModel = EntityModel.of(context);
Widget badgeIcon;
String onBadgeTextValue;
Color iconColor = HAClientTheme().getBadgeColor(entityModel.entityWrapper.entity.domain);
switch (entityModel.entityWrapper.entity.domain) {
case "sun":
{
badgeIcon = entityModel.entityWrapper.entity.state == "below_horizon"
? Icon(
MaterialDesignIcons.getIconDataFromIconCode(0xf0dc),
)
: Icon(
MaterialDesignIcons.getIconDataFromIconCode(0xf5a8),
);
break;
}
case "camera":
case "media_player":
case "binary_sensor":
{
badgeIcon = EntityIcon(
padding: EdgeInsets.all(0.0),
color: Theme.of(context).textTheme.body1.color
);
break;
}
case "device_tracker":
case "person":
{
badgeIcon = EntityIcon(
padding: EdgeInsets.all(0.0),
color: Theme.of(context).textTheme.body1.color
);
onBadgeTextValue = entityModel.entityWrapper.entity.displayState;
break;
}
default:
{
onBadgeTextValue = entityModel.entityWrapper.unitOfMeasurement;
badgeIcon = Text(
"${entityModel.entityWrapper.entity.displayState}",
overflow: TextOverflow.fade,
softWrap: false,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.body1
);
break;
}
}
Widget onBadgeText;
if (onBadgeTextValue == null || onBadgeTextValue.length == 0) {
onBadgeText = Container(width: 0.0, height: 0.0);
} else {
onBadgeText = Container(
constraints: BoxConstraints(maxWidth: 50),
padding: EdgeInsets.fromLTRB(6.0, 2.0, 6.0, 2.0),
child: Text("$onBadgeTextValue",
style: Theme.of(context).textTheme.overline.copyWith(
color: HAClientTheme().getOnBadgeTextColor()
),
textAlign: TextAlign.center,
softWrap: false,
overflow: TextOverflow.ellipsis
),
decoration: new BoxDecoration(
color: iconColor,
borderRadius: BorderRadius.circular(9.0),
)
);
}
return GestureDetector(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Stack(
overflow: Overflow.visible,
alignment: Alignment.center,
children: <Widget>[
Container(
width: 45,
height: 45,
decoration: new BoxDecoration(
// Circle shape
shape: BoxShape.circle,
color: Theme.of(context).cardColor,
// The border you want
border: Border.all(
width: 2.0,
color: iconColor,
),
),
),
SizedBox(
width: 38,
height: 26,
child: FittedBox(
fit: BoxFit.contain,
alignment: Alignment.center,
child: badgeIcon,
)
),
Positioned(
bottom: -6,
child: onBadgeText
)
],
),
Container(
constraints: BoxConstraints(maxWidth: 45),
padding: EdgeInsets.only(top: 10),
child: Text(
"${entityModel.entityWrapper.displayName}",
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.caption.copyWith(
fontSize: 10
),
softWrap: true,
maxLines: 3,
overflow: TextOverflow.ellipsis,
),
)
],
),
onTap: () => entityModel.entityWrapper.handleTap(),
onDoubleTap: () => entityModel.entityWrapper.handleDoubleTap(),
onLongPress: () => entityModel.entityWrapper.handleHold(),
);
}
}

View File

@ -3,10 +3,12 @@ part of '../main.dart';
class EntityIcon extends StatelessWidget {
final EdgeInsetsGeometry padding;
final EdgeInsetsGeometry iconPadding;
final EdgeInsetsGeometry imagePadding;
final double size;
final Color color;
const EntityIcon({Key key, this.color, this.size: Sizes.iconSize, this.padding: const EdgeInsets.all(0.0)}) : super(key: key);
const EntityIcon({Key key, this.color, this.size: Sizes.iconSize, this.padding: const EdgeInsets.all(0.0), this.iconPadding, this.imagePadding}) : super(key: key);
int getDefaultIconByEntityId(String entityId, String deviceClass, String state) {
if (entityId == null) {
@ -26,76 +28,6 @@ class EntityIcon extends StatelessWidget {
}
}
Widget buildIcon(BuildContext context, EntityWrapper data, Color color) {
Widget result;
if (data == null) {
return null;
}
if (data.entityPicture != null) {
result = Container(
height: size+12,
width: size+12,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
fit:BoxFit.cover,
image: CachedNetworkImageProvider(
"${data.entityPicture}"
),
)
),
);
} else {
String iconName = data.icon;
int iconCode = 0;
if (iconName.length > 0) {
iconCode = MaterialDesignIcons.getIconCodeByIconName(iconName);
} else {
iconCode = getDefaultIconByEntityId(data.entity.entityId,
data.entity.deviceClass, data.entity.state); //
}
result = Icon(
IconData(iconCode, fontFamily: 'Material Design Icons'),
size: size,
color: color,
);
if (data.entity is LightEntity &&
(data.entity as LightEntity).supportColor &&
(data.entity as LightEntity).color != null
) {
Color lightColor = (data.entity as LightEntity).color.toColor();
if (lightColor == Colors.white) {
return result;
}
result = Stack(
children: <Widget>[
result,
Positioned(
bottom: 0,
right: 0,
child: Container(
width: size / 3,
height: size / 3,
decoration: BoxDecoration(
color: lightColor,
shape: BoxShape.circle,
boxShadow: <BoxShadow>[
BoxShadow(
spreadRadius: 0,
blurRadius: 0,
offset: Offset(0.3, 0.3)
)
]
),
),
)
],
);
}
}
return result;
}
@override
Widget build(BuildContext context) {
final EntityWrapper entityWrapper = EntityModel.of(context).entityWrapper;
@ -107,13 +39,92 @@ class EntityIcon extends StatelessWidget {
} else {
iconColor = HAClientTheme().getOffStateColor(context);
}
Widget iconWidget;
bool isPicture = false;
if (entityWrapper == null) {
iconWidget = Container(
width: size,
height: size,
);
} else {
if (entityWrapper.entityPicture != null) {
iconWidget = Container(
height: size+12,
width: size+12,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
fit:BoxFit.cover,
image: CachedNetworkImageProvider(
"${entityWrapper.entityPicture}"
),
)
),
);
isPicture = true;
} else {
String iconName = entityWrapper.icon;
int iconCode = 0;
if (iconName.length > 0) {
iconCode = MaterialDesignIcons.getIconCodeByIconName(iconName);
} else {
iconCode = getDefaultIconByEntityId(entityWrapper.entity.entityId,
entityWrapper.entity.deviceClass, entityWrapper.entity.state); //
}
if (entityWrapper.entity is LightEntity &&
(entityWrapper.entity as LightEntity).supportColor &&
(entityWrapper.entity as LightEntity).color != null &&
(entityWrapper.entity as LightEntity).color.toColor() != Colors.white
) {
Color lightColor = (entityWrapper.entity as LightEntity).color.toColor();
iconWidget = Stack(
children: <Widget>[
Icon(
IconData(iconCode, fontFamily: 'Material Design Icons'),
size: size,
color: iconColor,
),
Positioned(
bottom: 0,
right: 0,
child: Container(
width: size / 3,
height: size / 3,
decoration: BoxDecoration(
color: lightColor,
shape: BoxShape.circle,
boxShadow: <BoxShadow>[
BoxShadow(
spreadRadius: 0,
blurRadius: 0,
offset: Offset(0.3, 0.3)
)
]
),
),
)
],
);
} else {
iconWidget = Icon(
IconData(iconCode, fontFamily: 'Material Design Icons'),
size: size,
color: iconColor,
);
}
}
}
EdgeInsetsGeometry computedPadding;
if (isPicture && imagePadding != null) {
computedPadding = imagePadding;
} else if (!isPicture && iconPadding != null) {
computedPadding = iconPadding;
} else {
computedPadding = padding;
}
return Padding(
padding: padding,
child: buildIcon(
context,
entityWrapper,
iconColor
),
padding: computedPadding,
child: iconWidget,
);
}
}

View File

@ -58,7 +58,6 @@ part 'entities/fan/fan_entity.class.dart';
part 'entities/automation/automation_entity.class.dart';
part 'entities/camera/camera_entity.class.dart';
part 'entities/alarm_control_panel/alarm_control_panel_entity.class.dart';
part 'entities/badge.widget.dart';
part 'entities/entity_model.widget.dart';
part 'entities/default_entity_container.widget.dart';
part 'entities/missed_entity.widget.dart';