feat: Nicer displaying of verification requests in the timeline

lib/widgets/event_content/message.dart

@@ -12,6 +12,7 @@ import '../avatar.dart';
 import '../matrix.dart';
 import 'message_reactions.dart';
 import 'state_message.dart';
+import 'verification_request_content.dart';
 
 class Message extends StatelessWidget {
   final Event event;
@@ -45,6 +46,11 @@ class Message extends StatelessWidget {
       return StateMessage(event, unfold: unfold);
     }
 
+    if (event.type == EventTypes.Message &&
+        event.messageType == EventTypes.KeyVerificationRequest) {
+      return VerificationRequestContent(event: event, timeline: timeline);
+    }
+
     final client = Matrix.of(context).client;
     final ownMessage = event.senderId == client.userID;
     final alignment = ownMessage ? Alignment.topRight : Alignment.topLeft;

lib/widgets/event_content/verification_request_content.dart

@@ -0,0 +1,61 @@
+import 'package:matrix/matrix.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_gen/gen_l10n/l10n.dart';
+
+import '../../config/app_config.dart';
+
+class VerificationRequestContent extends StatelessWidget {
+  final Event event;
+  final Timeline timeline;
+
+  const VerificationRequestContent({this.event, this.timeline});
+
+  @override
+  Widget build(BuildContext context) {
+    final events = event.aggregatedEvents(timeline, 'm.reference');
+    final done = events.where((e) => e.type == EventTypes.KeyVerificationDone);
+    final start =
+        events.where((e) => e.type == EventTypes.KeyVerificationStart);
+    final cancel =
+        events.where((e) => e.type == EventTypes.KeyVerificationCancel);
+    final fullyDone = done.length >= 2;
+    final started = start.isNotEmpty;
+    final canceled = cancel.isNotEmpty;
+    return Padding(
+      padding: EdgeInsets.symmetric(
+        horizontal: 8.0,
+        vertical: 4.0,
+      ),
+      child: Center(
+        child: Container(
+          padding: EdgeInsets.all(8),
+          decoration: BoxDecoration(
+            border: Border.all(
+              color: Theme.of(context).dividerColor,
+            ),
+            borderRadius: BorderRadius.circular(AppConfig.borderRadius),
+            color: Theme.of(context).backgroundColor,
+          ),
+          child: Row(
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.center,
+            children: <Widget>[
+              Icon(Icons.lock_outlined,
+                  color: canceled
+                      ? Colors.red
+                      : (fullyDone ? Colors.green : Colors.grey)),
+              SizedBox(width: 8),
+              Text(canceled
+                  ? 'Error ${cancel.first.content.tryGet<String>('code')}: ${cancel.first.content.tryGet<String>('reason')}'
+                  : (fullyDone
+                      ? L10n.of(context).verifySuccess
+                      : (started
+                          ? L10n.of(context).loadingPleaseWait
+                          : L10n.of(context).newVerificationRequest)))
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}