feat: image fullscreen viewer, public room browser
- Chat: tap any image to open fullscreen InteractiveViewer (pinch/zoom) - Rooms: public room browser (Find rooms FAB + empty state button) searches Matrix room directory via queryPublicRooms, join from results - Rooms: empty state now shows 'Find rooms' button to onboard new users Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
// Version: 1.2.0 | Created: 2026-04-01 | Updated: 2026-04-10
|
// Version: 1.3.0 | Created: 2026-04-01 | Updated: 2026-04-27
|
||||||
// Message bubble widget. Handles text, images, files, redacted, replies.
|
// Message bubble widget. Handles text, images, files, redacted, replies.
|
||||||
|
|
||||||
import 'package:cached_network_image/cached_network_image.dart';
|
import 'package:cached_network_image/cached_network_image.dart';
|
||||||
@@ -172,11 +172,15 @@ class _ImageContent extends StatelessWidget {
|
|||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
if (message.mediaUrl != null) {
|
final url = message.mediaUrl;
|
||||||
return ClipRRect(
|
if (url == null) return const Icon(Icons.image_not_supported);
|
||||||
|
|
||||||
|
return GestureDetector(
|
||||||
|
onTap: () => _openFullscreen(context, url, message.body),
|
||||||
|
child: ClipRRect(
|
||||||
borderRadius: BorderRadius.circular(8),
|
borderRadius: BorderRadius.circular(8),
|
||||||
child: CachedNetworkImage(
|
child: CachedNetworkImage(
|
||||||
imageUrl: message.mediaUrl!,
|
imageUrl: url,
|
||||||
width: 240,
|
width: 240,
|
||||||
fit: BoxFit.cover,
|
fit: BoxFit.cover,
|
||||||
placeholder: (_, __) => const SizedBox(
|
placeholder: (_, __) => const SizedBox(
|
||||||
@@ -188,9 +192,60 @@ class _ImageContent extends StatelessWidget {
|
|||||||
child: Center(child: Icon(Icons.broken_image)),
|
child: Center(child: Icon(Icons.broken_image)),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
);
|
),
|
||||||
}
|
);
|
||||||
return const Icon(Icons.image_not_supported);
|
}
|
||||||
|
|
||||||
|
void _openFullscreen(BuildContext context, String url, String? caption) {
|
||||||
|
Navigator.of(context).push(
|
||||||
|
MaterialPageRoute<void>(
|
||||||
|
fullscreenDialog: true,
|
||||||
|
builder: (_) => _ImageViewer(url: url, caption: caption),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class _ImageViewer extends StatelessWidget {
|
||||||
|
const _ImageViewer({required this.url, this.caption});
|
||||||
|
|
||||||
|
final String url;
|
||||||
|
final String? caption;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Scaffold(
|
||||||
|
backgroundColor: Colors.black,
|
||||||
|
appBar: AppBar(
|
||||||
|
backgroundColor: Colors.black,
|
||||||
|
foregroundColor: Colors.white,
|
||||||
|
title: caption != null
|
||||||
|
? Text(
|
||||||
|
caption!,
|
||||||
|
style: const TextStyle(fontSize: 14),
|
||||||
|
overflow: TextOverflow.ellipsis,
|
||||||
|
)
|
||||||
|
: null,
|
||||||
|
),
|
||||||
|
body: Center(
|
||||||
|
child: InteractiveViewer(
|
||||||
|
minScale: 0.5,
|
||||||
|
maxScale: 4,
|
||||||
|
child: CachedNetworkImage(
|
||||||
|
imageUrl: url,
|
||||||
|
fit: BoxFit.contain,
|
||||||
|
placeholder: (_, __) => const CircularProgressIndicator(
|
||||||
|
color: Colors.white,
|
||||||
|
),
|
||||||
|
errorWidget: (_, __, ___) => const Icon(
|
||||||
|
Icons.broken_image,
|
||||||
|
color: Colors.white,
|
||||||
|
size: 64,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
225
lib/features/rooms/presentation/public_rooms_dialog.dart
Normal file
225
lib/features/rooms/presentation/public_rooms_dialog.dart
Normal file
@@ -0,0 +1,225 @@
|
|||||||
|
// Version: 1.0.0 | Created: 2026-04-27
|
||||||
|
// Public room browser — search Matrix room directory and join rooms.
|
||||||
|
|
||||||
|
import 'dart:async';
|
||||||
|
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||||
|
import 'package:go_router/go_router.dart';
|
||||||
|
import 'package:matrix/matrix_api_lite.dart'
|
||||||
|
show PublicRoomQueryFilter, PublicRoomsChunk;
|
||||||
|
import 'package:riverpod_annotation/riverpod_annotation.dart';
|
||||||
|
|
||||||
|
import '../../../core/network/matrix_client.dart';
|
||||||
|
import '../../../shared/widgets/matrix_avatar.dart';
|
||||||
|
|
||||||
|
part 'public_rooms_dialog.g.dart';
|
||||||
|
|
||||||
|
@riverpod
|
||||||
|
Future<List<PublicRoomsChunk>> publicRooms(
|
||||||
|
Ref ref, String searchTerm) async {
|
||||||
|
final client = ref.watch(matrixClientProvider);
|
||||||
|
final filter = searchTerm.trim().isEmpty
|
||||||
|
? null
|
||||||
|
: PublicRoomQueryFilter(genericSearchTerm: searchTerm.trim());
|
||||||
|
|
||||||
|
final response = await client.queryPublicRooms(
|
||||||
|
filter: filter,
|
||||||
|
limit: 30,
|
||||||
|
);
|
||||||
|
return response.chunk;
|
||||||
|
}
|
||||||
|
|
||||||
|
Future<void> showPublicRoomsDialog(BuildContext context) {
|
||||||
|
return showDialog<void>(
|
||||||
|
context: context,
|
||||||
|
builder: (_) => const _PublicRoomsDialog(),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
class _PublicRoomsDialog extends ConsumerStatefulWidget {
|
||||||
|
const _PublicRoomsDialog();
|
||||||
|
|
||||||
|
@override
|
||||||
|
ConsumerState<_PublicRoomsDialog> createState() =>
|
||||||
|
_PublicRoomsDialogState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _PublicRoomsDialogState extends ConsumerState<_PublicRoomsDialog> {
|
||||||
|
final _controller = TextEditingController();
|
||||||
|
String _searchTerm = '';
|
||||||
|
Timer? _debounce;
|
||||||
|
String? _joiningRoomId;
|
||||||
|
|
||||||
|
@override
|
||||||
|
void dispose() {
|
||||||
|
_debounce?.cancel();
|
||||||
|
_controller.dispose();
|
||||||
|
super.dispose();
|
||||||
|
}
|
||||||
|
|
||||||
|
void _onSearchChanged(String val) {
|
||||||
|
_debounce?.cancel();
|
||||||
|
_debounce = Timer(const Duration(milliseconds: 450), () {
|
||||||
|
if (mounted) setState(() => _searchTerm = val);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
Future<void> _join(PublicRoomsChunk room) async {
|
||||||
|
if (_joiningRoomId != null) return;
|
||||||
|
setState(() => _joiningRoomId = room.roomId);
|
||||||
|
|
||||||
|
try {
|
||||||
|
final client = ref.read(matrixClientProvider);
|
||||||
|
await client.joinRoom(room.canonicalAlias ?? room.roomId);
|
||||||
|
if (!mounted) return;
|
||||||
|
Navigator.of(context).pop();
|
||||||
|
context.push('/rooms/${Uri.encodeComponent(room.roomId)}');
|
||||||
|
} on Exception catch (e) {
|
||||||
|
if (!mounted) return;
|
||||||
|
setState(() => _joiningRoomId = null);
|
||||||
|
ScaffoldMessenger.of(context).showSnackBar(
|
||||||
|
SnackBar(content: Text('Could not join room: $e')),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
final theme = Theme.of(context);
|
||||||
|
final roomsAsync = ref.watch(publicRoomsProvider(_searchTerm));
|
||||||
|
|
||||||
|
return Dialog(
|
||||||
|
insetPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 32),
|
||||||
|
child: ConstrainedBox(
|
||||||
|
constraints: const BoxConstraints(maxWidth: 520, maxHeight: 600),
|
||||||
|
child: Column(
|
||||||
|
children: [
|
||||||
|
// Header
|
||||||
|
Padding(
|
||||||
|
padding: const EdgeInsets.fromLTRB(16, 16, 4, 0),
|
||||||
|
child: Row(
|
||||||
|
children: [
|
||||||
|
Text(
|
||||||
|
'Find rooms',
|
||||||
|
style: theme.textTheme.titleMedium?.copyWith(
|
||||||
|
fontWeight: FontWeight.w600,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const Spacer(),
|
||||||
|
IconButton(
|
||||||
|
icon: const Icon(Icons.close),
|
||||||
|
onPressed: () => Navigator.of(context).pop(),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
|
||||||
|
// Search
|
||||||
|
Padding(
|
||||||
|
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
||||||
|
child: TextField(
|
||||||
|
controller: _controller,
|
||||||
|
autofocus: true,
|
||||||
|
decoration: const InputDecoration(
|
||||||
|
hintText: 'Search public rooms...',
|
||||||
|
prefixIcon: Icon(Icons.search),
|
||||||
|
),
|
||||||
|
onChanged: _onSearchChanged,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
|
||||||
|
// Results
|
||||||
|
Flexible(
|
||||||
|
child: roomsAsync.when(
|
||||||
|
loading: () =>
|
||||||
|
const Center(child: CircularProgressIndicator()),
|
||||||
|
error: (err, _) => Padding(
|
||||||
|
padding: const EdgeInsets.all(16),
|
||||||
|
child: Text('Search failed: $err'),
|
||||||
|
),
|
||||||
|
data: (rooms) {
|
||||||
|
if (rooms.isEmpty) {
|
||||||
|
return Padding(
|
||||||
|
padding: const EdgeInsets.all(24),
|
||||||
|
child: Text(
|
||||||
|
_searchTerm.isEmpty
|
||||||
|
? 'No public rooms found.'
|
||||||
|
: 'No rooms match "$_searchTerm".',
|
||||||
|
textAlign: TextAlign.center,
|
||||||
|
style: theme.textTheme.bodySmall?.copyWith(
|
||||||
|
color: theme.colorScheme.onSurface.withAlpha(102),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return ListView.separated(
|
||||||
|
shrinkWrap: true,
|
||||||
|
itemCount: rooms.length,
|
||||||
|
separatorBuilder: (_, __) =>
|
||||||
|
const Divider(height: 1, indent: 72),
|
||||||
|
itemBuilder: (context, index) {
|
||||||
|
final room = rooms[index];
|
||||||
|
final name = room.name ??
|
||||||
|
room.canonicalAlias ??
|
||||||
|
room.roomId;
|
||||||
|
final isJoining = _joiningRoomId == room.roomId;
|
||||||
|
|
||||||
|
return ListTile(
|
||||||
|
leading: MatrixAvatar(
|
||||||
|
name: name,
|
||||||
|
avatarUrl: room.avatarUrl?.toString(),
|
||||||
|
radius: 20,
|
||||||
|
),
|
||||||
|
title: Text(
|
||||||
|
name,
|
||||||
|
overflow: TextOverflow.ellipsis,
|
||||||
|
),
|
||||||
|
subtitle: Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
|
children: [
|
||||||
|
if (room.topic != null)
|
||||||
|
Text(
|
||||||
|
room.topic!,
|
||||||
|
maxLines: 1,
|
||||||
|
overflow: TextOverflow.ellipsis,
|
||||||
|
style: theme.textTheme.bodySmall,
|
||||||
|
),
|
||||||
|
Text(
|
||||||
|
'${room.numJoinedMembers} member'
|
||||||
|
'${room.numJoinedMembers == 1 ? '' : 's'}',
|
||||||
|
style: theme.textTheme.bodySmall?.copyWith(
|
||||||
|
color: theme.colorScheme.onSurface
|
||||||
|
.withAlpha(120),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
isThreeLine: room.topic != null,
|
||||||
|
trailing: isJoining
|
||||||
|
? const SizedBox(
|
||||||
|
width: 20,
|
||||||
|
height: 20,
|
||||||
|
child: CircularProgressIndicator(
|
||||||
|
strokeWidth: 2),
|
||||||
|
)
|
||||||
|
: OutlinedButton(
|
||||||
|
onPressed: _joiningRoomId != null
|
||||||
|
? null
|
||||||
|
: () => _join(room),
|
||||||
|
child: const Text('Join'),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
},
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
// Version: 1.4.0 | Created: 2026-04-01 | Updated: 2026-04-27
|
// Version: 1.5.0 | Created: 2026-04-01 | Updated: 2026-04-27
|
||||||
// Main rooms list screen with bottom navigation.
|
// Main rooms list screen with bottom navigation.
|
||||||
|
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
@@ -9,6 +9,7 @@ import '../../help/presentation/help_tab.dart';
|
|||||||
import '../../jitsi/presentation/conference_tab.dart';
|
import '../../jitsi/presentation/conference_tab.dart';
|
||||||
import '../../profile/presentation/profile_screen.dart';
|
import '../../profile/presentation/profile_screen.dart';
|
||||||
import '../../spaces/presentation/spaces_screen.dart';
|
import '../../spaces/presentation/spaces_screen.dart';
|
||||||
|
import 'public_rooms_dialog.dart';
|
||||||
import 'room_tile.dart';
|
import 'room_tile.dart';
|
||||||
import 'rooms_controller.dart';
|
import 'rooms_controller.dart';
|
||||||
import 'user_search_dialog.dart';
|
import 'user_search_dialog.dart';
|
||||||
@@ -113,6 +114,13 @@ class _RoomsScreenState extends ConsumerState<RoomsScreen> {
|
|||||||
)
|
)
|
||||||
: null,
|
: null,
|
||||||
body: _buildBody(),
|
body: _buildBody(),
|
||||||
|
floatingActionButton: _selectedIndex == 0 && !_searchActive
|
||||||
|
? FloatingActionButton(
|
||||||
|
onPressed: () => showPublicRoomsDialog(context),
|
||||||
|
tooltip: 'Find rooms',
|
||||||
|
child: const Icon(Icons.explore_outlined),
|
||||||
|
)
|
||||||
|
: null,
|
||||||
bottomNavigationBar: NavigationBar(
|
bottomNavigationBar: NavigationBar(
|
||||||
selectedIndex: _selectedIndex,
|
selectedIndex: _selectedIndex,
|
||||||
onDestinationSelected: (index) =>
|
onDestinationSelected: (index) =>
|
||||||
@@ -233,11 +241,19 @@ class _EmptyRoomsState extends StatelessWidget {
|
|||||||
),
|
),
|
||||||
const SizedBox(height: 8),
|
const SizedBox(height: 8),
|
||||||
Text(
|
Text(
|
||||||
'Rooms you join will appear here.',
|
'Use the pencil icon above to message someone, or find '
|
||||||
|
'a public room to join.',
|
||||||
|
textAlign: TextAlign.center,
|
||||||
style: theme.textTheme.bodySmall?.copyWith(
|
style: theme.textTheme.bodySmall?.copyWith(
|
||||||
color: theme.colorScheme.onSurface.withAlpha(102),
|
color: theme.colorScheme.onSurface.withAlpha(102),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
const SizedBox(height: 20),
|
||||||
|
OutlinedButton.icon(
|
||||||
|
onPressed: () => showPublicRoomsDialog(context),
|
||||||
|
icon: const Icon(Icons.explore_outlined),
|
||||||
|
label: const Text('Find rooms'),
|
||||||
|
),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
name: m8chat_app
|
name: m8chat_app
|
||||||
description: "M8Chat — Matrix chat client for Android, iOS, and Web."
|
description: "M8Chat — Matrix chat client for Android, iOS, and Web."
|
||||||
publish_to: 'none'
|
publish_to: 'none'
|
||||||
version: 1.3.1+5
|
version: 1.4.0+6
|
||||||
|
|
||||||
environment:
|
environment:
|
||||||
sdk: '>=3.11.0 <4.0.0'
|
sdk: '>=3.11.0 <4.0.0'
|
||||||
|
|||||||
Reference in New Issue
Block a user