help4bis/m8chat-app2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: image fullscreen viewer, public room browser

Browse Source 
- 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:
help4bis
2026-04-27 06:23:27 +10:00
parent c1b5b31d48
commit 542a5e5221
4 changed files with 306 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
lib/features/chat/presentation/message_bubble.dart
View File

@@ -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.
import 'package:cached_network_image/cached_network_image.dart';
@@ -172,11 +172,15 @@ class _ImageContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
if (message.mediaUrl != null) {
return ClipRRect(
final url = message.mediaUrl;
if (url == null) return const Icon(Icons.image_not_supported);
return GestureDetector(
onTap: () => _openFullscreen(context, url, message.body),
child: ClipRRect(
borderRadius: BorderRadius.circular(8),
child: CachedNetworkImage(
imageUrl: message.mediaUrl!,
imageUrl: url,
width: 240,
fit: BoxFit.cover,
placeholder: (_, __) => const SizedBox(
@@ -188,9 +192,60 @@ class _ImageContent extends StatelessWidget {
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
View 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'),
),
);
},
);
},
),
),
],
),
),
);
}
}

20
lib/features/rooms/presentation/rooms_screen.dart
View File

@@ -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.
import 'package:flutter/material.dart';
@@ -9,6 +9,7 @@ import '../../help/presentation/help_tab.dart';
import '../../jitsi/presentation/conference_tab.dart';
import '../../profile/presentation/profile_screen.dart';
import '../../spaces/presentation/spaces_screen.dart';
import 'public_rooms_dialog.dart';
import 'room_tile.dart';
import 'rooms_controller.dart';
import 'user_search_dialog.dart';
@@ -113,6 +114,13 @@ class _RoomsScreenState extends ConsumerState<RoomsScreen> {
)
: null,
body: _buildBody(),
floatingActionButton: _selectedIndex == 0 && !_searchActive
? FloatingActionButton(
onPressed: () => showPublicRoomsDialog(context),
tooltip: 'Find rooms',
child: const Icon(Icons.explore_outlined),
)
: null,
bottomNavigationBar: NavigationBar(
selectedIndex: _selectedIndex,
onDestinationSelected: (index) =>
@@ -233,11 +241,19 @@ class _EmptyRoomsState extends StatelessWidget {
),
const SizedBox(height: 8),
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(
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'),
),
],
),
),

2
pubspec.yaml
View File

@@ -1,7 +1,7 @@
name: m8chat_app
description: "M8Chat — Matrix chat client for Android, iOS, and Web."
publish_to: 'none'
version: 1.3.1+5
version: 1.4.0+6
environment:
sdk: '>=3.11.0 <4.0.0'