feat(profile): Material default avatar + square photo crop

Drop the DiceBear generated avatar (and dicebear_core/dicebear_styles/
flutter_svg): the default is again a Material coloured-initial disc from
the pubkey. Picking a photo now goes through a square crop step
(crop_your_image — pure Flutter, all platforms incl. desktop, Apache-2.0,
only pulls the image package we already had) before the 24 KB thumbnail.
This commit is contained in:
vjrj 2026-07-12 23:39:56 +02:00
parent 17612b8147
commit f6967e8cbb
8 changed files with 200 additions and 175 deletions

View file

@ -2,14 +2,16 @@ import 'package:flutter/material.dart';
import '../i18n/strings.g.dart'; import '../i18n/strings.g.dart';
import '../services/offer_thumbnail.dart' show offerThumbnailDataUri; import '../services/offer_thumbnail.dart' show offerThumbnailDataUri;
import 'photo_crop.dart';
import 'photo_pick.dart'; import 'photo_pick.dart';
import 'theme.dart'; import 'theme.dart';
/// Lets the user choose a profile avatar: take/pick a photo (shrunk to a tiny /// Lets the user choose a profile avatar: take/pick a photo, square-crop it, and
/// inline thumbnail) or remove it. With no photo, a generated avatar is used. /// keep it as a tiny inline thumbnail or remove it. With no photo, the
/// coloured-initial disc is used.
/// ///
/// Returns the new avatar value (a `data:` photo thumbnail), an empty string to /// Returns the new avatar value (a `data:` photo thumbnail), an empty string to
/// clear it (falls back to the generated avatar), or null when cancelled. /// clear it (falls back to the coloured-initial disc), or null when cancelled.
Future<String?> showAvatarPicker( Future<String?> showAvatarPicker(
BuildContext context, { BuildContext context, {
required String current, required String current,
@ -37,11 +39,11 @@ Future<String?> showAvatarPicker(
title: Text(t.avatar.fromPhoto), title: Text(t.avatar.fromPhoto),
onTap: () async { onTap: () async {
final bytes = await pickPhoto(sheetContext); final bytes = await pickPhoto(sheetContext);
if (bytes == null) return; if (bytes == null || !sheetContext.mounted) return;
final uri = offerThumbnailDataUri(bytes, maxBytes: 24000); final cropped = await cropToSquare(sheetContext, bytes);
if (sheetContext.mounted) { if (cropped == null || !sheetContext.mounted) return;
final uri = offerThumbnailDataUri(cropped, maxBytes: 24000);
Navigator.of(sheetContext).pop(uri ?? ''); Navigator.of(sheetContext).pop(uri ?? '');
}
}, },
), ),
if (current.isNotEmpty) ...[ if (current.isNotEmpty) ...[

View file

@ -1,7 +1,4 @@
import 'package:dicebear_core/dicebear_core.dart' show Avatar, Style;
import 'package:dicebear_styles/thumbs.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import '../services/offer_thumbnail.dart' show decodeDataUri; import '../services/offer_thumbnail.dart' show decodeDataUri;
import '../services/profile_cache.dart'; import '../services/profile_cache.dart';
@ -9,10 +6,11 @@ import 'avatar.dart';
import 'seed_glyph.dart'; import 'seed_glyph.dart';
/// A small round avatar for a person. When they've set an avatar ([picture] — a /// A small round avatar for a person. When they've set an avatar ([picture] — a
/// `data:` photo thumbnail or a `tane:seed:<glyph>` illustration) it's shown; /// `data:` photo thumbnail, or a legacy `tane:seed:<glyph>` illustration) it's
/// otherwise it falls back to a [GeneratedAvatar] drawn deterministically from /// shown; otherwise it falls back to a standard disc coloured deterministically
/// their [pubkey]. Same pubkey same picture on every device, so a person /// from their [pubkey], carrying the first letter of their [name] (a person icon
/// stays visually recognizable without sharing anything. /// when unknown). Same pubkey same colour on every device, so a person stays
/// visually recognizable without sharing anything.
class PeerAvatar extends StatelessWidget { class PeerAvatar extends StatelessWidget {
const PeerAvatar({ const PeerAvatar({
required this.pubkey, required this.pubkey,
@ -25,7 +23,7 @@ class PeerAvatar extends StatelessWidget {
final String pubkey; final String pubkey;
final String? name; final String? name;
/// The person's chosen avatar value; null/empty → the [GeneratedAvatar]. /// The person's chosen avatar value; null/empty → the coloured-initial disc.
final String? picture; final String? picture;
final double radius; final double radius;
@ -49,61 +47,35 @@ class PeerAvatar extends StatelessWidget {
} }
} }
return GeneratedAvatar(pubkey: pubkey, name: name, radius: radius); final letter = _initial(name);
} return CircleAvatar(
} radius: radius,
backgroundColor: peerAvatarColor(pubkey),
/// The `thumbs` DiceBear style, parsed once [Style.parse] validates the style child: letter == null
/// definition against its schema, which is not free to repeat per build. ? Icon(Icons.person_outline, size: radius, color: Colors.white)
final _thumbsStyle = Style.parse(thumbs); : Text(
letter,
/// Rendered-SVG memo keyed by pubkey, so a person's avatar is generated once and style: TextStyle(
/// reused across every rebuild and list row rather than re-rendered each time. color: Colors.white,
final _svgCache = <String, String>{}; fontSize: radius,
fontWeight: FontWeight.w600,
/// Strips the `<metadata>` block (the style's CC0 licence notice) that
/// flutter_svg cannot parse and logs a warning for; CC0 requires no attribution
/// in the rendered image, and the licence still ships with the package source.
final _metadataElement = RegExp(r'<metadata\b[^>]*>.*?</metadata>', dotAll: true);
String _renderThumbs(String pubkey) =>
Avatar(_thumbsStyle, {'seed': pubkey}).svg.replaceAll(_metadataElement, '');
/// The deterministic default avatar for a person with no chosen [picture]: a
/// friendly DiceBear "thumbs" face (CC0) seeded from their [pubkey], so the same
/// key yields the same face on every device with nothing shared. Rendered as an
/// SVG (no network, no assets). Exposes [pubkey] so call sites/tests can find it.
class GeneratedAvatar extends StatelessWidget {
const GeneratedAvatar({
required this.pubkey,
this.name,
this.radius = 14,
super.key,
});
final String pubkey;
final String? name;
final double radius;
@override
Widget build(BuildContext context) {
final svg = _svgCache[pubkey] ??= _renderThumbs(pubkey);
return Semantics(
label: name,
image: true,
child: ClipOval(
child: SizedBox.square(
dimension: radius * 2,
child: SvgPicture.string(svg, fit: BoxFit.cover),
), ),
), ),
); );
} }
static String? _initial(String? name) {
if (name == null) return null;
final trimmed = name.trim();
if (trimmed.isEmpty) return null;
// characters.first handles emoji/combining marks safely.
return trimmed.characters.first.toUpperCase();
}
} }
/// A [PeerAvatar] that looks the person's published avatar up from the /// A [PeerAvatar] that looks the person's published avatar up from the
/// [ProfileCache] (their kind:0 `picture`), falling back to the generated /// [ProfileCache] (their kind:0 `picture`), falling back to the coloured-initial
/// pattern while it loads or when none is cached / no cache is available. Use at /// disc while it loads or when none is cached / no cache is available. Use at
/// list/row sites (one avatar each); for many avatars of the same few people /// list/row sites (one avatar each); for many avatars of the same few people
/// (chat bubbles) resolve the picture once into state instead. /// (chat bubbles) resolve the picture once into state instead.
class CachedAvatar extends StatelessWidget { class CachedAvatar extends StatelessWidget {

View file

@ -0,0 +1,87 @@
import 'dart:typed_data';
import 'package:crop_your_image/crop_your_image.dart';
import 'package:flutter/material.dart';
import 'theme.dart';
/// Lets the user square-crop the picked [bytes] before it's saved as an avatar.
/// Returns the cropped image bytes, or null if cancelled. Pure Flutter (works on
/// every platform, desktop included) no native cropper, no plaintext on disk.
Future<Uint8List?> cropToSquare(BuildContext context, Uint8List bytes) {
return Navigator.of(context).push<Uint8List>(
MaterialPageRoute(
fullscreenDialog: true,
builder: (context) => _CropPage(bytes: bytes),
),
);
}
class _CropPage extends StatefulWidget {
const _CropPage({required this.bytes});
final Uint8List bytes;
@override
State<_CropPage> createState() => _CropPageState();
}
class _CropPageState extends State<_CropPage> {
final _controller = CropController();
var _cropping = false;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
backgroundColor: Colors.black,
foregroundColor: Colors.white,
leading: IconButton(
key: const Key('crop.cancel'),
icon: const Icon(Icons.close),
onPressed: () => Navigator.of(context).pop(),
),
actions: [
if (_cropping)
const Padding(
padding: EdgeInsets.all(14),
child: SizedBox(
width: 20,
height: 20,
child: CircularProgressIndicator(strokeWidth: 2),
),
)
else
IconButton(
key: const Key('crop.confirm'),
icon: const Icon(Icons.check),
onPressed: () {
setState(() => _cropping = true);
_controller.crop();
},
),
],
),
body: Crop(
image: widget.bytes,
controller: _controller,
aspectRatio: 1,
withCircleUi: true,
baseColor: Colors.black,
maskColor: Colors.black.withValues(alpha: 0.6),
cornerDotBuilder: (size, edgeAlignment) =>
const DotControl(color: seedGreen),
onCropped: (result) {
if (!mounted) return;
switch (result) {
case CropSuccess(:final croppedImage):
Navigator.of(context).pop(croppedImage);
case CropFailure():
setState(() => _cropping = false);
}
},
),
);
}
}

View file

@ -78,9 +78,7 @@ dependencies:
# while the app is foregrounded. Mobile/Linux/macOS only; a no-op on web and # while the app is foregrounded. Mobile/Linux/macOS only; a no-op on web and
# Windows. Foreground-only by design — background/push is a later concern. # Windows. Foreground-only by design — background/push is a later concern.
flutter_local_notifications: ^18.0.1 flutter_local_notifications: ^18.0.1
dicebear_core: ^10.3.0 crop_your_image: ^2.0.0
dicebear_styles: ^10.2.0
flutter_svg: ^2.3.0
dev_dependencies: dev_dependencies:
flutter_test: flutter_test:

View file

@ -124,14 +124,14 @@ void main() {
await tester.pumpWidget(host(cubit)); await tester.pumpWidget(host(cubit));
await tester.pump(); await tester.pump();
// Both sides carry an avatar, each generated from its own pubkey // Both sides carry an avatar, and the two people are different colours
// so you can tell who said what at a glance. // so you can tell who said what at a glance.
expect(find.byType(PeerAvatar), findsNWidgets(2)); expect(find.byType(PeerAvatar), findsNWidgets(2));
final generated = tester final discs = tester
.widgetList<GeneratedAvatar>(find.byType(GeneratedAvatar)) .widgetList<CircleAvatar>(find.byType(CircleAvatar))
.toList(); .toList();
expect(generated, hasLength(2)); expect(discs, hasLength(2));
expect(generated.first.pubkey, isNot(generated.last.pubkey)); expect(discs.first.backgroundColor, isNot(discs.last.backgroundColor));
}); });
testWidgets('a new message lands in view at the bottom, not below the fold', ( testWidgets('a new message lands in view at the bottom, not below the fold', (

View file

@ -36,19 +36,17 @@ void main() {
home: Scaffold(body: Center(child: child)), home: Scaffold(body: Center(child: child)),
); );
testWidgets('falls back to a generated avatar keyed by pubkey', ( testWidgets('shows the name initial when known', (tester) async {
tester,
) async {
await tester.pumpWidget(host(PeerAvatar(pubkey: 'aa', name: 'rosa'))); await tester.pumpWidget(host(PeerAvatar(pubkey: 'aa', name: 'rosa')));
final generated = expect(find.text('R'), findsOneWidget); // uppercased first letter
tester.widget<GeneratedAvatar>(find.byType(GeneratedAvatar));
expect(generated.pubkey, 'aa'); // pubkey, not name stable across renames
expect(find.byType(Text), findsNothing);
}); });
testWidgets('generates it even when the name is unknown', (tester) async { testWidgets('falls back to a person icon when the name is unknown', (
tester,
) async {
await tester.pumpWidget(host(const PeerAvatar(pubkey: 'aa'))); await tester.pumpWidget(host(const PeerAvatar(pubkey: 'aa')));
expect(find.byType(GeneratedAvatar), findsOneWidget); expect(find.byIcon(Icons.person_outline), findsOneWidget);
expect(find.byType(Text), findsNothing);
}); });
testWidgets('renders a seed illustration when the avatar is a token', ( testWidgets('renders a seed illustration when the avatar is a token', (
@ -75,19 +73,19 @@ void main() {
expect(find.byType(SeedGlyph), findsOneWidget); expect(find.byType(SeedGlyph), findsOneWidget);
}); });
testWidgets('falls back to the generated avatar when nothing is cached', ( testWidgets('falls back to the initial when nothing is cached', (
tester, tester,
) async { ) async {
final cache = ProfileCache(InMemorySecretStore()); final cache = ProfileCache(InMemorySecretStore());
await tester.pumpWidget(host( await tester.pumpWidget(host(
CachedAvatar(pubkey: 'peer2', name: 'Bea', cache: cache))); CachedAvatar(pubkey: 'peer2', name: 'Bea', cache: cache)));
await tester.pumpAndSettle(); await tester.pumpAndSettle();
expect(find.byType(GeneratedAvatar), findsOneWidget); expect(find.text('B'), findsOneWidget);
}); });
testWidgets('no cache → the generated avatar', (tester) async { testWidgets('no cache → the coloured-initial disc', (tester) async {
await tester.pumpWidget(host(const CachedAvatar(pubkey: 'x', name: 'Bea'))); await tester.pumpWidget(host(const CachedAvatar(pubkey: 'x', name: 'Bea')));
expect(find.byType(GeneratedAvatar), findsOneWidget); expect(find.text('B'), findsOneWidget);
}); });
}); });
} }

View file

@ -0,0 +1,48 @@
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:image/image.dart' as img;
import 'package:tane/ui/photo_crop.dart';
void main() {
// A small but real PNG the cropper can decode.
final bytes = Uint8List.fromList(
img.encodePng(img.Image(width: 32, height: 32)),
);
testWidgets('cropToSquare shows a cancel/confirm UI and cancel returns null', (
tester,
) async {
Uint8List? result;
var returned = false;
await tester.pumpWidget(MaterialApp(
home: Builder(
builder: (context) => Scaffold(
body: Center(
child: ElevatedButton(
onPressed: () async {
result = await cropToSquare(context, bytes);
returned = true;
},
child: const Text('open'),
),
),
),
),
));
await tester.tap(find.text('open'));
await tester.pump(); // push the crop route
await tester.pump(const Duration(milliseconds: 100));
expect(find.byKey(const Key('crop.confirm')), findsOneWidget);
expect(find.byKey(const Key('crop.cancel')), findsOneWidget);
await tester.tap(find.byKey(const Key('crop.cancel')));
await tester.pump(); // pop the crop route
expect(returned, isTrue);
expect(result, isNull); // cancelling yields no image
});
}

View file

@ -241,6 +241,14 @@ packages:
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "1.15.1" version: "1.15.1"
crop_your_image:
dependency: transitive
description:
name: crop_your_image
sha256: "14c8977b11a009dc5e73e0f6522970f93363e38183f1b2ffefe1676dc9c3f49d"
url: "https://pub.dev"
source: hosted
version: "2.0.0"
cross_file: cross_file:
dependency: transitive dependency: transitive
description: description:
@ -297,30 +305,6 @@ packages:
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "0.7.14" version: "0.7.14"
dicebear_core:
dependency: transitive
description:
name: dicebear_core
sha256: "7a38725ed8895feeeb6d34a6a0946322a03649077fa49f9a711530e035fb53f2"
url: "https://pub.dev"
source: hosted
version: "10.3.0"
dicebear_schema:
dependency: transitive
description:
name: dicebear_schema
sha256: dfbaa477e4e7ed1500ae8f0263ecf7db3081c492489b817a401a52e21e0ace9c
url: "https://pub.dev"
source: hosted
version: "1.3.0"
dicebear_styles:
dependency: transitive
description:
name: dicebear_styles
sha256: "4761fc26da7eb12b5b499be4efbd7cadc9186e301095199bbf424a3150bcd866"
url: "https://pub.dev"
source: hosted
version: "10.2.0"
drift: drift:
dependency: transitive dependency: transitive
description: description:
@ -552,14 +536,6 @@ packages:
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "3.1.2" version: "3.1.2"
flutter_svg:
dependency: transitive
description:
name: flutter_svg
sha256: "35882981abcbfb8c15b286f0cd690ff25bac12d95eff3e25ee207f37d4c42e7f"
url: "https://pub.dev"
source: hosted
version: "2.3.0"
flutter_tesseract_ocr: flutter_tesseract_ocr:
dependency: transitive dependency: transitive
description: description:
@ -836,14 +812,6 @@ packages:
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "4.12.0" version: "4.12.0"
json_schema:
dependency: transitive
description:
name: json_schema
sha256: f37d9c3fdfe8c9aae55fdfd5af815d24ce63c3a0f6a2c1f0982c30f43643fa1a
url: "https://pub.dev"
source: hosted
version: "5.2.2"
leak_tracker: leak_tracker:
dependency: transitive dependency: transitive
description: description:
@ -1156,14 +1124,6 @@ packages:
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "3.0.2" version: "3.0.2"
quiver:
dependency: transitive
description:
name: quiver
sha256: ea0b925899e64ecdfbf9c7becb60d5b50e706ade44a85b2363be2a22d88117d2
url: "https://pub.dev"
source: hosted
version: "3.2.2"
recase: recase:
dependency: transitive dependency: transitive
description: description:
@ -1180,14 +1140,6 @@ packages:
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "0.6.0" version: "0.6.0"
rfc_6901:
dependency: transitive
description:
name: rfc_6901
sha256: "6a43b1858dca2febaf93e15639aa6b0c49ccdfd7647775f15a499f872b018154"
url: "https://pub.dev"
source: hosted
version: "0.2.1"
serial_csv: serial_csv:
dependency: transitive dependency: transitive
description: description:
@ -1409,14 +1361,6 @@ packages:
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "2.3.1" version: "2.3.1"
uri:
dependency: transitive
description:
name: uri
sha256: "889eea21e953187c6099802b7b4cf5219ba8f3518f604a1033064d45b1b8268a"
url: "https://pub.dev"
source: hosted
version: "1.0.0"
url_launcher: url_launcher:
dependency: transitive dependency: transitive
description: description:
@ -1489,30 +1433,6 @@ packages:
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "4.5.3" version: "4.5.3"
vector_graphics:
dependency: transitive
description:
name: vector_graphics
sha256: "2306c03da2ba81724afeb589c351ebbc0aa7d86005925be8f8735856dbe5e42d"
url: "https://pub.dev"
source: hosted
version: "1.2.2"
vector_graphics_codec:
dependency: transitive
description:
name: vector_graphics_codec
sha256: "99fd9fbd34d9f9a32efd7b6a6aae14125d8237b10403b422a6a6dfeac2806146"
url: "https://pub.dev"
source: hosted
version: "1.1.13"
vector_graphics_compiler:
dependency: transitive
description:
name: vector_graphics_compiler
sha256: "142a9146f447d15b10bdc00e21d5f4d83e5b32bb5f8f8f5a04c75311344923a3"
url: "https://pub.dev"
source: hosted
version: "1.2.6"
vector_math: vector_math:
dependency: transitive dependency: transitive
description: description: