Initial commit

lib/components/adaptive_page_layout.dart

@@ -0,0 +1,50 @@
+import 'package:flutter/material.dart';
+
+enum FocusPage { FIRST, SECOND }
+
+class AdaptivePageLayout extends StatelessWidget {
+  final Widget firstScaffold;
+  final Widget secondScaffold;
+  final FocusPage primaryPage;
+  final double minWidth;
+
+  static const double defaultMinWidth = 400;
+  static bool columnMode(BuildContext context) =>
+      MediaQuery.of(context).size.width > 2 * defaultMinWidth;
+
+  AdaptivePageLayout(
+      {this.firstScaffold,
+      this.secondScaffold,
+      this.primaryPage = FocusPage.FIRST,
+      this.minWidth = defaultMinWidth,
+      Key key})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return OrientationBuilder(builder: (context, orientation) {
+      if (orientation == Orientation.portrait ||
+          columnMode(context)) if (primaryPage == FocusPage.FIRST)
+        return firstScaffold;
+      else
+        return secondScaffold;
+      return Row(
+        children: <Widget>[
+          Container(
+            width: minWidth,
+            child: firstScaffold,
+          ),
+          Container(
+            width: 1,
+            color: Color(0xFFE8E8E8),
+          ),
+          Expanded(
+            child: Container(
+              child: secondScaffold,
+            ),
+          )
+        ],
+      );
+    });
+  }
+}

lib/components/avatar.dart

@@ -0,0 +1,39 @@
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:famedlysdk/famedlysdk.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import 'matrix.dart';
+
+class Avatar extends StatelessWidget {
+  final MxContent mxContent;
+  final double size;
+
+  const Avatar(this.mxContent, {this.size = 40, Key key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final String src = mxContent.getThumbnail(
+      Matrix.of(context).client,
+      width: size * MediaQuery.of(context).devicePixelRatio,
+      height: size * MediaQuery.of(context).devicePixelRatio,
+      method: ThumbnailMethod.scale,
+    );
+    return CircleAvatar(
+      radius: size / 2,
+      backgroundImage: mxContent.mxc?.isNotEmpty ?? false
+          ? kIsWeb
+              ? NetworkImage(
+                  src,
+                )
+              : CachedNetworkImageProvider(
+                  src,
+                )
+          : null,
+      backgroundColor: Color(0xFFF8F8F8),
+      child: mxContent.mxc.isEmpty
+          ? Text("@", style: TextStyle(color: Colors.blueGrey))
+          : null,
+    );
+  }
+}

lib/components/chat_settings_popup_menu.dart

@@ -0,0 +1,70 @@
+import 'package:famedlysdk/famedlysdk.dart';
+import 'package:fluffychat/utils/app_route.dart';
+import 'package:fluffychat/views/chat_details.dart';
+import 'package:fluffychat/views/chat_list.dart';
+import 'package:flutter/material.dart';
+
+import 'matrix.dart';
+
+class ChatSettingsPopupMenu extends StatelessWidget {
+  final Room room;
+  final bool displayChatDetails;
+  const ChatSettingsPopupMenu(this.room, this.displayChatDetails, {Key key})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    List<PopupMenuEntry<String>> items = <PopupMenuEntry<String>>[
+      room.pushRuleState == PushRuleState.notify
+          ? const PopupMenuItem<String>(
+              value: "mute",
+              child: Text('Mute chat'),
+            )
+          : const PopupMenuItem<String>(
+              value: "unmute",
+              child: Text('Unmute chat'),
+            ),
+      const PopupMenuItem<String>(
+        value: "leave",
+        child: Text('Leave'),
+      ),
+    ];
+    if (displayChatDetails)
+      items.insert(
+        0,
+        const PopupMenuItem<String>(
+          value: "details",
+          child: Text('Chat details'),
+        ),
+      );
+    return PopupMenuButton(
+      onSelected: (String choice) async {
+        switch (choice) {
+          case "leave":
+            await Matrix.of(context).tryRequestWithLoadingDialog(room.leave());
+            Navigator.of(context).pushAndRemoveUntil(
+                AppRoute.defaultRoute(context, ChatListView()),
+                (Route r) => false);
+            break;
+          case "mute":
+            await Matrix.of(context).tryRequestWithLoadingDialog(
+                room.setPushRuleState(PushRuleState.mentions_only));
+            break;
+          case "unmute":
+            await Matrix.of(context).tryRequestWithLoadingDialog(
+                room.setPushRuleState(PushRuleState.notify));
+            break;
+          case "details":
+            Navigator.of(context).push(
+              AppRoute.defaultRoute(
+                context,
+                ChatDetails(room),
+              ),
+            );
+            break;
+        }
+      },
+      itemBuilder: (BuildContext context) => items,
+    );
+  }
+}

lib/components/content_banner.dart

@@ -0,0 +1,55 @@
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:famedlysdk/famedlysdk.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import 'matrix.dart';
+
+class ContentBanner extends StatelessWidget {
+  final MxContent mxContent;
+  final double height;
+  final IconData defaultIcon;
+  final bool loading;
+
+  const ContentBanner(this.mxContent,
+      {this.height = 400,
+      this.defaultIcon = Icons.people_outline,
+      this.loading = false,
+      Key key})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final mediaQuery = MediaQuery.of(context);
+    final int bannerSize =
+        (mediaQuery.size.width * mediaQuery.devicePixelRatio).toInt();
+    final String src = mxContent.getThumbnail(
+      Matrix.of(context).client,
+      width: bannerSize,
+      height: bannerSize,
+      method: ThumbnailMethod.scale,
+    );
+    return Container(
+      height: 200,
+      color: Color(0xFFF8F8F8),
+      child: !loading
+          ? mxContent.mxc?.isNotEmpty ?? false
+              ? kIsWeb
+                  ? Image.network(
+                      src,
+                      height: 200,
+                      fit: BoxFit.cover,
+                    )
+                  : CachedNetworkImage(
+                      imageUrl: src,
+                      height: 200,
+                      fit: BoxFit.cover,
+                      placeholder: (c, s) =>
+                          Center(child: CircularProgressIndicator()),
+                      errorWidget: (c, s, o) => Icon(Icons.error, size: 200),
+                    )
+              : Icon(defaultIcon, size: 200)
+          : Icon(defaultIcon, size: 200),
+    );
+  }
+}

lib/components/dialogs/new_group_dialog.dart

@@ -0,0 +1,59 @@
+import 'package:fluffychat/views/chat.dart';
+import 'package:flutter/material.dart';
+
+import '../matrix.dart';
+
+class NewGroupDialog extends StatelessWidget {
+  final TextEditingController controller = TextEditingController();
+
+  void submitAction(BuildContext context) async {
+    final MatrixState matrix = Matrix.of(context);
+    Map<String, dynamic> params = {};
+    if (controller.text.isNotEmpty) params["name"] = controller.text;
+    final String roomID = await matrix.tryRequestWithLoadingDialog(
+      matrix.client.createRoom(params: params),
+    );
+    Navigator.of(context).pop();
+    if (roomID != null)
+      Navigator.push(
+        context,
+        MaterialPageRoute(builder: (context) => Chat(roomID)),
+      );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return AlertDialog(
+      title: Text("Create new group"),
+      content: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: <Widget>[
+          TextField(
+            controller: controller,
+            autofocus: true,
+            autocorrect: false,
+            textInputAction: TextInputAction.go,
+            onSubmitted: (s) => submitAction(context),
+            decoration: InputDecoration(
+                labelText: "Group name",
+                icon: Icon(Icons.people),
+                hintText: "Enter a group name"),
+          ),
+        ],
+      ),
+      actions: <Widget>[
+        FlatButton(
+          child: Text("Close".toUpperCase(),
+              style: TextStyle(color: Colors.blueGrey)),
+          onPressed: () {
+            Navigator.of(context).pop();
+          },
+        ),
+        FlatButton(
+          child: Text("Create".toUpperCase()),
+          onPressed: () => submitAction(context),
+        ),
+      ],
+    );
+  }
+}

lib/components/dialogs/new_private_chat_dialog.dart

@@ -0,0 +1,72 @@
+import 'package:famedlysdk/famedlysdk.dart';
+import 'package:fluffychat/views/chat.dart';
+import 'package:flutter/material.dart';
+
+import '../matrix.dart';
+
+class NewPrivateChatDialog extends StatelessWidget {
+  final TextEditingController controller = TextEditingController();
+
+  void submitAction(BuildContext context) async {
+    if (controller.text.isEmpty) return;
+    final MatrixState matrix = Matrix.of(context);
+    final User user = User(
+      "@" + controller.text,
+      room: Room(id: "", client: matrix.client),
+    );
+    final String roomID =
+        await matrix.tryRequestWithLoadingDialog(user.startDirectChat());
+    Navigator.of(context).pop();
+
+    if (roomID != null)
+      Navigator.push(
+        context,
+        MaterialPageRoute(builder: (context) => Chat(roomID)),
+      );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return AlertDialog(
+      title: Text("New private chat"),
+      content: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: <Widget>[
+          TextField(
+            controller: controller,
+            autofocus: true,
+            autocorrect: false,
+            textInputAction: TextInputAction.go,
+            onSubmitted: (s) => submitAction(context),
+            decoration: InputDecoration(
+                labelText: "Enter a username",
+                icon: Icon(Icons.account_circle),
+                prefixText: "@",
+                hintText: "username:homeserver"),
+          ),
+          SizedBox(height: 16),
+          Text(
+            "Your username is ${Matrix.of(context).client.userID}",
+            style: TextStyle(
+              color: Colors.blueGrey,
+              fontSize: 12,
+            ),
+          ),
+        ],
+      ),
+      actions: <Widget>[
+        FlatButton(
+          child: Text("Close".toUpperCase(),
+              style: TextStyle(color: Colors.blueGrey)),
+          onPressed: () {
+            Navigator.of(context).pop();
+          },
+        ),
+        FlatButton(
+          child: Text("Continue".toUpperCase()),
+          onPressed: () => submitAction(context),
+        ),
+      ],
+    );
+  }
+}

lib/components/dialogs/redact_message_dialog.dart

@@ -0,0 +1,32 @@
+import 'package:famedlysdk/famedlysdk.dart';
+import 'package:flutter/material.dart';
+
+import '../matrix.dart';
+
+class RedactMessageDialog extends StatelessWidget {
+  final Event event;
+  const RedactMessageDialog(this.event);
+
+  void removeAction(BuildContext context) {
+    Matrix.of(context).tryRequestWithLoadingDialog(event.redact());
+    Navigator.of(context).pop();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return AlertDialog(
+      title: Text("Message will be removed for all participants"),
+      actions: <Widget>[
+        FlatButton(
+          child: Text("Close".toUpperCase(),
+              style: TextStyle(color: Colors.blueGrey)),
+          onPressed: () => Navigator.of(context).pop(),
+        ),
+        FlatButton(
+          child: Text("Remove".toUpperCase()),
+          onPressed: () => removeAction(context),
+        ),
+      ],
+    );
+  }
+}

lib/components/list_items/chat_list_item.dart

@@ -0,0 +1,67 @@
+import 'package:famedlysdk/famedlysdk.dart';
+import 'package:fluffychat/components/message_content.dart';
+import 'package:fluffychat/utils/app_route.dart';
+import 'package:fluffychat/views/chat.dart';
+import 'package:flutter/material.dart';
+
+import '../avatar.dart';
+
+class ChatListItem extends StatelessWidget {
+  final Room room;
+  final bool activeChat;
+
+  const ChatListItem(this.room, {this.activeChat = false});
+
+  @override
+  Widget build(BuildContext context) {
+    return Material(
+      color: activeChat ? Color(0xFFE8E8E8) : Colors.white,
+      child: ListTile(
+        leading: Avatar(room.avatar),
+        title: Text(room.displayname),
+        subtitle: MessageContent(room.lastEvent, textOnly: true),
+        onTap: () {
+          if (activeChat)
+            Navigator.pushReplacement(
+              context,
+              AppRoute.defaultRoute(context, Chat(room.id)),
+            );
+          else
+            Navigator.push(
+              context,
+              AppRoute.defaultRoute(context, Chat(room.id)),
+            );
+        },
+        onLongPress: () {},
+        trailing: Container(
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            crossAxisAlignment: CrossAxisAlignment.end,
+            children: <Widget>[
+              Text(room.timeCreated.toEventTimeString()),
+              room.notificationCount > 0
+                  ? Container(
+                      width: 20,
+                      height: 20,
+                      margin: EdgeInsets.only(top: 3),
+                      decoration: BoxDecoration(
+                        color: room.highlightCount > 0
+                            ? Colors.red
+                            : Color(0xFF5625BA),
+                        borderRadius: BorderRadius.circular(20),
+                      ),
+                      child: Center(
+                        child: Text(
+                          room.notificationCount.toString(),
+                          style: TextStyle(color: Colors.white),
+                        ),
+                      ),
+                    )
+                  : Text(" "),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/components/list_items/message.dart

@@ -0,0 +1,128 @@
+import 'package:bubble/bubble.dart';
+import 'package:famedlysdk/famedlysdk.dart';
+import 'package:fluffychat/components/dialogs/redact_message_dialog.dart';
+import 'package:fluffychat/components/message_content.dart';
+import 'package:flutter/material.dart';
+
+import '../avatar.dart';
+import '../matrix.dart';
+import 'state_message.dart';
+
+class Message extends StatelessWidget {
+  final Event event;
+
+  const Message(this.event);
+
+  @override
+  Widget build(BuildContext context) {
+    if (event.typeKey != "m.room.message") return StateMessage(event);
+
+    Client client = Matrix.of(context).client;
+    final bool ownMessage = event.senderId == client.userID;
+    Alignment alignment = ownMessage ? Alignment.topRight : Alignment.topLeft;
+    Color color = Color(0xFFF8F8F8);
+    BubbleNip nip = ownMessage ? BubbleNip.rightBottom : BubbleNip.leftBottom;
+    final Color textColor = ownMessage ? Colors.white : Colors.black;
+    MainAxisAlignment rowMainAxisAlignment =
+        ownMessage ? MainAxisAlignment.end : MainAxisAlignment.start;
+
+    if (ownMessage) {
+      color = event.status == -1 ? Colors.redAccent : Color(0xFF5625BA);
+    }
+    List<PopupMenuEntry<String>> popupMenuList = [];
+    if (event.canRedact && !event.redacted && event.status > 1)
+      popupMenuList.add(
+        const PopupMenuItem<String>(
+          value: "remove",
+          child: Text('Remove message'),
+        ),
+      );
+    if (ownMessage && event.status == -1) {
+      popupMenuList.add(
+        const PopupMenuItem<String>(
+          value: "resend",
+          child: Text('Send again'),
+        ),
+      );
+      popupMenuList.add(
+        const PopupMenuItem<String>(
+          value: "delete",
+          child: Text('Delete message'),
+        ),
+      );
+    }
+
+    List<Widget> rowChildren = [
+      Expanded(
+        child: PopupMenuButton(
+          onSelected: (String choice) async {
+            switch (choice) {
+              case "remove":
+                showDialog(
+                  context: context,
+                  builder: (BuildContext context) => RedactMessageDialog(event),
+                );
+                break;
+              case "resend":
+                event.sendAgain();
+                break;
+              case "delete":
+                event.remove();
+                break;
+            }
+          },
+          itemBuilder: (BuildContext context) => popupMenuList,
+          child: Opacity(
+            opacity: event.status == 0 ? 0.5 : 1,
+            child: Bubble(
+              elevation: 0,
+              alignment: alignment,
+              margin: BubbleEdges.symmetric(horizontal: 4),
+              color: color,
+              nip: nip,
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: <Widget>[
+                  Row(
+                    mainAxisSize: MainAxisSize.min,
+                    children: <Widget>[
+                      Text(
+                        ownMessage ? "You" : event.sender.calcDisplayname(),
+                        style: TextStyle(
+                          color: textColor,
+                          fontWeight: FontWeight.bold,
+                        ),
+                      ),
+                      SizedBox(width: 4),
+                      Text(
+                        event.time.toEventTimeString(),
+                        style: TextStyle(color: textColor, fontSize: 12),
+                      ),
+                    ],
+                  ),
+                  MessageContent(
+                    event,
+                    textColor: textColor,
+                  ),
+                ],
+              ),
+            ),
+          ),
+        ),
+      ),
+    ];
+    if (ownMessage)
+      rowChildren.add(Avatar(event.sender.avatarUrl));
+    else
+      rowChildren.insert(0, Avatar(event.sender.avatarUrl));
+    return Padding(
+      padding: const EdgeInsets.all(8.0),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.end,
+        mainAxisAlignment: rowMainAxisAlignment,
+        children: rowChildren,
+      ),
+    );
+  }
+}

lib/components/list_items/participant_list_item.dart

@@ -0,0 +1,119 @@
+import 'package:famedlysdk/famedlysdk.dart';
+import 'package:fluffychat/utils/app_route.dart';
+import 'package:fluffychat/views/chat.dart';
+import 'package:flutter/material.dart';
+
+import '../avatar.dart';
+import '../matrix.dart';
+
+class ParticipantListItem extends StatelessWidget {
+  final User user;
+
+  const ParticipantListItem(this.user);
+
+  participantAction(BuildContext context, String action) async {
+    final MatrixState matrix = Matrix.of(context);
+    switch (action) {
+      case "ban":
+        matrix.tryRequestWithLoadingDialog(user.ban());
+        break;
+      case "unban":
+        matrix.tryRequestWithLoadingDialog(user.unban());
+        break;
+      case "kick":
+        matrix.tryRequestWithLoadingDialog(user.kick());
+        break;
+      case "admin":
+        matrix.tryRequestWithLoadingDialog(user.setPower(100));
+        break;
+      case "user":
+        matrix.tryRequestWithLoadingDialog(user.setPower(100));
+        break;
+      case "message":
+        final String roomId = await user.startDirectChat();
+        Navigator.of(context).pushAndRemoveUntil(
+            AppRoute.defaultRoute(
+              context,
+              Chat(roomId),
+            ),
+            (Route r) => r.isFirst);
+        break;
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    const Map<Membership, String> membershipBatch = {
+      Membership.join: "",
+      Membership.ban: "Banned",
+      Membership.invite: "Invited",
+      Membership.leave: "Left",
+    };
+    final String permissionBatch = user.powerLevel == 100
+        ? "Admin"
+        : user.powerLevel >= 50 ? "Moderator" : "";
+    List<PopupMenuEntry<String>> items = <PopupMenuEntry<String>>[];
+    if (user.canChangePowerLevel &&
+        user.room.ownPowerLevel == 100 &&
+        user.powerLevel != 100)
+      items.add(
+        PopupMenuItem(child: Text("Make an admin"), value: "admin"),
+      );
+    if (user.canChangePowerLevel && user.powerLevel != 0)
+      items.add(
+        PopupMenuItem(child: Text("Revoke all permissions"), value: "user"),
+      );
+    if (user.canKick)
+      items.add(
+        PopupMenuItem(child: Text("Kick from group"), value: "kick"),
+      );
+    if (user.canBan && user.membership != Membership.ban)
+      items.add(
+        PopupMenuItem(child: Text("Ban from group"), value: "ban"),
+      );
+    else if (user.canBan && user.membership == Membership.ban)
+      items.add(
+        PopupMenuItem(child: Text("Remove exile"), value: "unban"),
+      );
+    if (user.id != Matrix.of(context).client.userID)
+      items.add(
+        PopupMenuItem(child: Text("Send a message"), value: "message"),
+      );
+    return PopupMenuButton(
+      onSelected: (action) => participantAction(context, action),
+      itemBuilder: (c) => items,
+      child: ListTile(
+        title: Row(
+          children: <Widget>[
+            Text(user.calcDisplayname()),
+            permissionBatch.isEmpty
+                ? Container()
+                : Container(
+                    padding: EdgeInsets.all(4),
+                    margin: EdgeInsets.symmetric(horizontal: 8),
+                    decoration: BoxDecoration(
+                      color: Color(0xFFF8F8F8),
+                      borderRadius: BorderRadius.circular(8),
+                    ),
+                    child: Center(child: Text(permissionBatch)),
+                  ),
+            membershipBatch[user.membership].isEmpty
+                ? Container()
+                : Container(
+                    padding: EdgeInsets.all(4),
+                    margin: EdgeInsets.symmetric(horizontal: 8),
+                    decoration: BoxDecoration(
+                      color: Color(0xFFF8F8F8),
+                      borderRadius: BorderRadius.circular(8),
+                    ),
+                    child:
+                        Center(child: Text(membershipBatch[user.membership])),
+                  ),
+          ],
+        ),
+        subtitle: Text(user.id),
+        leading: Avatar(user.avatarUrl),
+      ),
+    );
+  }
+}

lib/components/list_items/state_message.dart

@@ -0,0 +1,23 @@
+import 'package:bubble/bubble.dart';
+import 'package:famedlysdk/famedlysdk.dart';
+import 'package:flutter/material.dart';
+
+import '../message_content.dart';
+
+class StateMessage extends StatelessWidget {
+  final Event event;
+  const StateMessage(this.event);
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.all(8.0),
+      child: Bubble(
+        color: Color(0xFFF8F8F8),
+        elevation: 0,
+        alignment: Alignment.center,
+        child: MessageContent(event),
+      ),
+    );
+  }
+}

lib/components/matrix.dart

@@ -0,0 +1,167 @@
+import 'dart:convert';
+import 'package:famedlysdk/famedlysdk.dart';
+import 'package:fluffychat/utils/sqflite_store.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:localstorage/localstorage.dart';
+import 'package:toast/toast.dart';
+
+class Matrix extends StatefulWidget {
+  final Widget child;
+
+  final String clientName;
+
+  final Client client;
+
+  Matrix({this.child, this.clientName, this.client, Key key}) : super(key: key);
+
+  @override
+  MatrixState createState() => MatrixState();
+
+  /// Returns the (nearest) Client instance of your application.
+  static MatrixState of(BuildContext context) {
+    MatrixState newState =
+        (context.dependOnInheritedWidgetOfExactType<_InheritedMatrix>()).data;
+    newState.context = context;
+    return newState;
+  }
+}
+
+class MatrixState extends State<Matrix> {
+  Client client;
+  BuildContext context;
+
+  /// Used to load the old account if there is no store available.
+  void loadAccount() async {
+    final LocalStorage storage = LocalStorage('LocalStorage');
+    await storage.ready;
+
+    final credentialsStr = storage.getItem(widget.clientName);
+    if (credentialsStr == null || credentialsStr.isEmpty) {
+      client.connection.onLoginStateChanged.add(LoginState.loggedOut);
+      return;
+    }
+    print("[Matrix] Restoring account credentials");
+    final Map<String, dynamic> credentials = json.decode(credentialsStr);
+    client.connection.connect(
+      newDeviceID: credentials["deviceID"],
+      newDeviceName: credentials["deviceName"],
+      newHomeserver: credentials["homeserver"],
+      newLazyLoadMembers: credentials["lazyLoadMembers"],
+      //newMatrixVersions: credentials["matrixVersions"], // FIXME: wrong List type
+      newToken: credentials["token"],
+      newUserID: credentials["userID"],
+    );
+  }
+
+  /// Used to save the current account persistently if there is no store available.
+  Future<void> saveAccount() async {
+    if (!kIsWeb) return;
+    print("[Matrix] Save account credentials in crypted preferences");
+    final Map<String, dynamic> credentials = {
+      "deviceID": client.deviceID,
+      "deviceName": client.deviceName,
+      "homeserver": client.homeserver,
+      "lazyLoadMembers": client.lazyLoadMembers,
+      "matrixVersions": client.matrixVersions,
+      "token": client.accessToken,
+      "userID": client.userID,
+    };
+
+    final LocalStorage storage = LocalStorage('LocalStorage');
+    await storage.ready;
+    await storage.setItem(widget.clientName, json.encode(credentials));
+    return;
+  }
+
+  void clean() async {
+    if (!kIsWeb) return;
+    print("Clear session...");
+
+    final LocalStorage storage = LocalStorage('LocalStorage');
+    await storage.ready;
+    storage.deleteItem(widget.clientName);
+  }
+
+  BuildContext _loadingDialogContext;
+
+  Future<dynamic> tryRequestWithLoadingDialog(Future<dynamic> request) async {
+    showLoadingDialog(context);
+    final dynamic = await tryRequestWithErrorToast(request);
+    hideLoadingDialog();
+    return dynamic;
+  }
+
+  Future<dynamic> tryRequestWithErrorToast(Future<dynamic> request) async {
+    try {
+      return await request;
+    } catch (exception) {
+      Toast.show(
+        exception.toString(),
+        context,
+        duration: Toast.LENGTH_LONG,
+      );
+      return false;
+    }
+  }
+
+  showLoadingDialog(BuildContext context) {
+    _loadingDialogContext = context;
+    showDialog(
+      context: _loadingDialogContext,
+      barrierDismissible: false,
+      builder: (BuildContext context) => AlertDialog(
+        content: Row(
+          children: <Widget>[
+            CircularProgressIndicator(),
+            SizedBox(width: 16),
+            Text("Loading... Please wait"),
+          ],
+        ),
+      ),
+    );
+  }
+
+  hideLoadingDialog() => Navigator.of(_loadingDialogContext)?.pop();
+
+  @override
+  void initState() {
+    if (widget.client == null) {
+      client = Client(widget.clientName, debug: true);
+      if (!kIsWeb)
+        client.store = Store(client);
+      else
+        loadAccount();
+    } else {
+      client = widget.client;
+    }
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return _InheritedMatrix(
+      data: this,
+      child: widget.child,
+    );
+  }
+}
+
+class _InheritedMatrix extends InheritedWidget {
+  final MatrixState data;
+
+  _InheritedMatrix({Key key, this.data, Widget child})
+      : super(key: key, child: child);
+
+  @override
+  bool updateShouldNotify(_InheritedMatrix old) {
+    bool update = old.data.client.accessToken != this.data.client.accessToken ||
+        old.data.client.userID != this.data.client.userID ||
+        old.data.client.matrixVersions != this.data.client.matrixVersions ||
+        old.data.client.lazyLoadMembers != this.data.client.lazyLoadMembers ||
+        old.data.client.deviceID != this.data.client.deviceID ||
+        old.data.client.deviceName != this.data.client.deviceName ||
+        old.data.client.homeserver != this.data.client.homeserver;
+    return update;
+  }
+}

lib/components/message_content.dart

@@ -0,0 +1,78 @@
+import 'package:famedlysdk/famedlysdk.dart';
+import 'package:flutter/material.dart';
+import 'package:url_launcher/url_launcher.dart';
+
+import 'matrix.dart';
+
+class MessageContent extends StatelessWidget {
+  final Event event;
+  final Color textColor;
+  final bool textOnly;
+
+  const MessageContent(this.event, {this.textColor, this.textOnly = false});
+
+  @override
+  Widget build(BuildContext context) {
+    final int maxLines = textOnly ? 1 : null;
+    if (textOnly)
+      return Text(
+        event.getBody(),
+        style: TextStyle(
+          color: textColor,
+          decoration: event.redacted ? TextDecoration.lineThrough : null,
+        ),
+        maxLines: maxLines,
+      );
+    switch (event.type) {
+      case EventTypes.Audio:
+      case EventTypes.Image:
+      case EventTypes.File:
+      case EventTypes.Video:
+        return Container(
+          width: 200,
+          child: RaisedButton(
+            color: Colors.blueGrey,
+            child: Text(
+              "Download ${event.getBody()}",
+              overflow: TextOverflow.fade,
+              softWrap: false,
+              maxLines: 1,
+            ),
+            onPressed: () => launch(
+              MxContent(event.content["url"])
+                  .getDownloadLink(Matrix.of(context).client),
+            ),
+          ),
+        );
+      case EventTypes.Text:
+      case EventTypes.Reply:
+      case EventTypes.Notice:
+        return Text(
+          event.getBody(),
+          style: TextStyle(
+            color: textColor,
+            decoration: event.redacted ? TextDecoration.lineThrough : null,
+          ),
+        );
+      case EventTypes.Emote:
+        return Text(
+          "* " + event.getBody(),
+          maxLines: maxLines,
+          style: TextStyle(
+            color: textColor,
+            fontStyle: FontStyle.italic,
+            decoration: event.redacted ? TextDecoration.lineThrough : null,
+          ),
+        );
+      default:
+        return Text(
+          "${event.sender.calcDisplayname()} sent a ${event.typeKey} event",
+          maxLines: maxLines,
+          style: TextStyle(
+            color: textColor,
+            decoration: event.redacted ? TextDecoration.lineThrough : null,
+          ),
+        );
+    }
+  }
+}