Files
buzz/mobile/lib/shared/widgets/concentric_sheet_surface.dart
b30f1f6129 Polish mobile profiles, DMs, and sheets (#5401)
## Summary
- add poster-first, tap-to-toggle animated avatars on profile surfaces
while preserving transparent/static behavior elsewhere
- align mobile DM headers, membership actions, and invisible agent
recipient addressing with established desktop semantics
- polish titled sheets and status editing, preserve native iOS sheet
corners, and batch relay reads to improve review-build responsiveness

## Snapshots

<table>
  <tr>
    <th>Profile avatar</th>
    <th>Agent DM header and composer</th>
  </tr>
  <tr>
<td><img
src="https://raw.githubusercontent.com/block/buzz/e8de7495451dbe1a393ab43c5e204ca7425f2ba5/pr-5401--profile-avatar.png"
width="360" alt="Mobile profile settings with animated avatar
surface"></td>
<td><img
src="https://raw.githubusercontent.com/block/buzz/e8de7495451dbe1a393ab43c5e204ca7425f2ba5/pr-5401--agent-dm.png"
width="360" alt="Agent direct message with masked presence and normal
composer"></td>
  </tr>
  <tr>
    <th>Members sheet</th>
    <th>Status editor</th>
  </tr>
  <tr>
<td><img
src="https://raw.githubusercontent.com/block/buzz/e8de7495451dbe1a393ab43c5e204ca7425f2ba5/pr-5401--members-sheet.png"
width="360" alt="Members bottom sheet with centered title and padded
content"></td>
<td><img
src="https://raw.githubusercontent.com/block/buzz/e8de7495451dbe1a393ab43c5e204ca7425f2ba5/pr-5401--status-sheet.png"
width="360" alt="Status editor bottom sheet with duration and quick
statuses"></td>
  </tr>
  <tr>
    <th colspan="2">Switch Community</th>
  </tr>
  <tr>
<td colspan="2" align="center"><img
src="https://raw.githubusercontent.com/block/buzz/e8de7495451dbe1a393ab43c5e204ca7425f2ba5/pr-5401--switch-community.png"
width="720" alt="Switch Community bottom sheet with centered title and
aligned Edit action"></td>
  </tr>
</table>

## Validation
- `just mobile-check`
- `just mobile-test` (1,283 tests)
- installed and reviewed isolated debug builds on iPhone and Pixel

---------

Signed-off-by: kenny lopez <klopez4212@gmail.com>
Signed-off-by: Princess Donut <b238ea756dee4d98afa5883fc7f1de61eeabe65bf700e3a5a5a80db5e42e2c2b@buzz.block.builderlab.xyz>
Signed-off-by: Kenny Lopez <klopez4212@gmail.com>
Signed-off-by: Wes <wesbillman@users.noreply.github.com>
Co-authored-by: Princess Donut <b238ea756dee4d98afa5883fc7f1de61eeabe65bf700e3a5a5a80db5e42e2c2b@buzz.block.builderlab.xyz>
Co-authored-by: Wes <wesbillman@users.noreply.github.com>
Co-authored-by: Carl <c7ebe626f000404285d3686e1dc74cc07cc60a9754a150041ba132e14bd3e2ec@buzz.block.builderlab.xyz>
2026-08-13 20:16:04 -07:00

127 lines
4.1 KiB
Dart

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import '../theme/theme.dart';
/// An iOS-native sheet surface that adopts the system's concentric corners on
/// iOS 26 and newer. Other platforms keep the normal Flutter shape.
class ConcentricSheetSurface extends HookWidget {
const ConcentricSheetSurface({
required this.child,
required this.enabled,
this.color,
super.key,
});
final Widget child;
final bool enabled;
final Color? color;
static bool providesSurfaceOf(BuildContext context) =>
context
.dependOnInheritedWidgetOfExactType<_ConcentricSheetSurfaceScope>()
?.providesSurface ??
false;
static const _surfaceChannel = MethodChannel('buzz/concentric_sheet_surface');
static const _nativeContentClipRadius = Radii.dialog * 2;
Future<bool> _checkNativeSurfaceSupport() async {
try {
final supported = await _surfaceChannel.invokeMethod<bool>('isSupported');
return supported == true;
} on MissingPluginException {
// The registrar is unavailable, so retain the Flutter surface.
return false;
} on PlatformException {
// The native surface is optional; retain the Flutter surface on failure.
return false;
}
}
@override
Widget build(BuildContext context) {
final shouldCheckNativeSurface =
enabled && defaultTargetPlatform == TargetPlatform.iOS;
final supportFuture = useMemoized(
() => shouldCheckNativeSurface
? _checkNativeSurfaceSupport()
: Future<bool>.value(false),
[shouldCheckNativeSurface],
);
final nativeSurfaceSupported = useFuture(supportFuture).data ?? false;
if (!shouldCheckNativeSurface) {
return _ConcentricSheetSurfaceScope(providesSurface: false, child: child);
}
final surfaceColor = color ?? context.colors.surface;
return Padding(
padding: const EdgeInsets.only(
left: Grid.xxs,
right: Grid.xxs,
bottom: Grid.xxs,
),
child: Stack(
children: [
if (nativeSurfaceSupported)
Positioned.fill(
child: ExcludeSemantics(
child: UiKitView(
viewType: 'buzz/concentric_sheet_surface',
hitTestBehavior: PlatformViewHitTestBehavior.transparent,
creationParams: <String, Object>{
'color': surfaceColor.toARGB32(),
'minimumRadius': Radii.dialog,
},
creationParamsCodec: const StandardMessageCodec(),
),
),
)
else
Positioned.fill(
child: Material(
color: surfaceColor,
borderRadius: BorderRadius.circular(Radii.dialog),
clipBehavior: Clip.antiAlias,
),
),
ClipRSuperellipse(
key: const ValueKey('concentric-sheet-content-clip'),
// UIKit's container-concentric corner resolves substantially
// larger than its minimum radius on an edge-inset iOS sheet. Keep
// the Flutter content inside that continuous outline; a 24pt
// circular clip still lets scrolling rows show through the native
// corner cutouts.
borderRadius: BorderRadius.circular(
nativeSurfaceSupported ? _nativeContentClipRadius : Radii.dialog,
),
clipBehavior: Clip.antiAlias,
child: _ConcentricSheetSurfaceScope(
providesSurface: true,
child: child,
),
),
],
),
);
}
}
class _ConcentricSheetSurfaceScope extends InheritedWidget {
const _ConcentricSheetSurfaceScope({
required this.providesSurface,
required super.child,
});
final bool providesSurface;
@override
bool updateShouldNotify(_ConcentricSheetSurfaceScope oldWidget) =>
oldWidget.providesSurface != providesSurface;
}