2020-01-01 18:10:13 +00:00
|
|
|
import 'package:flutter/material.dart';
|
2021-10-26 16:50:34 +00:00
|
|
|
|
|
|
|
import 'package:matrix/matrix.dart';
|
2020-01-01 18:10:13 +00:00
|
|
|
|
2021-10-26 16:50:34 +00:00
|
|
|
import 'package:fluffychat/utils/string_color.dart';
|
2022-07-29 16:24:59 +00:00
|
|
|
import 'package:fluffychat/widgets/mxc_image.dart';
|
2023-11-11 16:56:23 +00:00
|
|
|
import 'package:fluffychat/widgets/presence_builder.dart';
|
2020-01-01 18:10:13 +00:00
|
|
|
|
|
|
|
class Avatar extends StatelessWidget {
|
2021-11-19 19:38:16 +00:00
|
|
|
final Uri? mxContent;
|
|
|
|
final String? name;
|
2020-01-01 18:10:13 +00:00
|
|
|
final double size;
|
2021-11-19 19:38:16 +00:00
|
|
|
final void Function()? onTap;
|
2020-03-13 20:42:05 +00:00
|
|
|
static const double defaultSize = 44;
|
2021-11-19 19:38:16 +00:00
|
|
|
final Client? client;
|
2021-11-13 17:56:34 +00:00
|
|
|
final double fontSize;
|
2023-11-11 16:56:23 +00:00
|
|
|
final String? presenceUserId;
|
|
|
|
final Color? presenceBackgroundColor;
|
2020-01-01 18:10:13 +00:00
|
|
|
|
2021-11-20 09:42:23 +00:00
|
|
|
const Avatar({
|
2020-03-13 20:42:05 +00:00
|
|
|
this.mxContent,
|
2021-11-20 09:42:23 +00:00
|
|
|
this.name,
|
2020-03-13 20:42:05 +00:00
|
|
|
this.size = defaultSize,
|
|
|
|
this.onTap,
|
2021-01-20 19:27:09 +00:00
|
|
|
this.client,
|
2021-11-13 17:56:34 +00:00
|
|
|
this.fontSize = 18,
|
2023-11-11 16:56:23 +00:00
|
|
|
this.presenceUserId,
|
|
|
|
this.presenceBackgroundColor,
|
2023-10-28 11:03:16 +00:00
|
|
|
super.key,
|
|
|
|
});
|
2020-01-01 18:10:13 +00:00
|
|
|
|
|
|
|
@override
|
|
|
|
Widget build(BuildContext context) {
|
2020-05-13 13:58:59 +00:00
|
|
|
var fallbackLetters = '@';
|
2021-11-19 19:38:16 +00:00
|
|
|
final name = this.name;
|
|
|
|
if (name != null) {
|
|
|
|
if (name.runes.length >= 2) {
|
|
|
|
fallbackLetters = String.fromCharCodes(name.runes, 0, 2);
|
|
|
|
} else if (name.runes.length == 1) {
|
|
|
|
fallbackLetters = name;
|
|
|
|
}
|
2020-01-18 12:22:22 +00:00
|
|
|
}
|
2021-07-31 20:17:18 +00:00
|
|
|
final noPic = mxContent == null ||
|
|
|
|
mxContent.toString().isEmpty ||
|
|
|
|
mxContent.toString() == 'null';
|
2020-10-17 07:29:27 +00:00
|
|
|
final textWidget = Center(
|
|
|
|
child: Text(
|
|
|
|
fallbackLetters,
|
|
|
|
style: TextStyle(
|
2022-07-12 17:39:18 +00:00
|
|
|
color: noPic ? Colors.white : null,
|
2021-11-13 17:56:34 +00:00
|
|
|
fontSize: fontSize,
|
2020-10-17 07:29:27 +00:00
|
|
|
),
|
|
|
|
),
|
|
|
|
);
|
2020-10-28 06:35:38 +00:00
|
|
|
final borderRadius = BorderRadius.circular(size / 2);
|
2023-11-11 16:56:23 +00:00
|
|
|
final presenceUserId = this.presenceUserId;
|
|
|
|
final color =
|
|
|
|
noPic ? name?.lightColorAvatar : Theme.of(context).secondaryHeaderColor;
|
|
|
|
final container = Stack(
|
|
|
|
children: [
|
|
|
|
ClipRRect(
|
|
|
|
borderRadius: borderRadius,
|
|
|
|
child: Container(
|
|
|
|
width: size,
|
|
|
|
height: size,
|
|
|
|
color: color,
|
|
|
|
child: noPic
|
|
|
|
? textWidget
|
|
|
|
: MxcImage(
|
|
|
|
key: Key(mxContent.toString()),
|
|
|
|
uri: mxContent,
|
|
|
|
fit: BoxFit.cover,
|
|
|
|
width: size,
|
|
|
|
height: size,
|
|
|
|
placeholder: (_) => textWidget,
|
|
|
|
cacheKey: mxContent.toString(),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
PresenceBuilder(
|
2023-11-19 08:44:58 +00:00
|
|
|
client: client,
|
2023-11-11 16:56:23 +00:00
|
|
|
userId: presenceUserId,
|
|
|
|
builder: (context, presence) {
|
2023-11-15 12:53:40 +00:00
|
|
|
if (presence == null ||
|
|
|
|
(presence.presence == PresenceType.offline &&
|
|
|
|
presence.lastActiveTimestamp == null)) {
|
|
|
|
return const SizedBox.shrink();
|
|
|
|
}
|
2023-11-11 16:56:23 +00:00
|
|
|
final dotColor = presence.presence.isOnline
|
|
|
|
? Colors.green
|
|
|
|
: presence.presence.isUnavailable
|
2023-12-22 19:18:51 +00:00
|
|
|
? Colors.orange
|
2023-11-11 18:54:31 +00:00
|
|
|
: Colors.grey;
|
2023-11-11 16:56:23 +00:00
|
|
|
return Positioned(
|
|
|
|
bottom: -4,
|
|
|
|
right: -4,
|
|
|
|
child: Container(
|
|
|
|
width: 16,
|
|
|
|
height: 16,
|
|
|
|
decoration: BoxDecoration(
|
|
|
|
color: presenceBackgroundColor ??
|
|
|
|
Theme.of(context).colorScheme.background,
|
|
|
|
borderRadius: BorderRadius.circular(32),
|
|
|
|
),
|
|
|
|
alignment: Alignment.center,
|
|
|
|
child: Container(
|
|
|
|
width: 8,
|
|
|
|
height: 8,
|
|
|
|
decoration: BoxDecoration(
|
|
|
|
color: dotColor,
|
|
|
|
borderRadius: BorderRadius.circular(16),
|
|
|
|
),
|
|
|
|
),
|
2023-02-02 08:47:35 +00:00
|
|
|
),
|
2023-11-11 16:56:23 +00:00
|
|
|
);
|
|
|
|
},
|
|
|
|
),
|
|
|
|
],
|
2020-01-01 18:10:13 +00:00
|
|
|
);
|
2022-07-08 08:41:36 +00:00
|
|
|
if (onTap == null) return container;
|
|
|
|
return InkWell(
|
|
|
|
onTap: onTap,
|
|
|
|
borderRadius: borderRadius,
|
|
|
|
child: container,
|
|
|
|
);
|
2020-01-01 18:10:13 +00:00
|
|
|
}
|
|
|
|
}
|