design: Experimental design

lib/config/themes.dart

@@ -97,9 +97,6 @@ abstract class FluffyThemes {
         filled: true,
       ),
       appBarTheme: AppBarTheme(
-        toolbarHeight: FluffyThemes.isColumnMode(context) ? 72 : 56,
-        shadowColor: Colors.grey.withAlpha(64),
-        surfaceTintColor: colorScheme.background,
         systemOverlayStyle: SystemUiOverlayStyle(
           statusBarColor: Colors.transparent,
           statusBarIconBrightness: brightness.reversed,

lib/pages/chat/chat.dart

@@ -79,14 +79,7 @@ class ChatPage extends StatelessWidget {
           Container(
             width: FluffyThemes.columnWidth,
             clipBehavior: Clip.hardEdge,
-            decoration: BoxDecoration(
+            decoration: const BoxDecoration(),
-              border: Border(
-                left: BorderSide(
-                  width: 1,
-                  color: Theme.of(context).dividerColor,
-                ),
-              ),
-            ),
             child: ChatDetails(roomId: roomId),
           ),
       ],

lib/pages/chat/chat_view.dart

@@ -140,6 +140,10 @@ class ChatView extends StatelessWidget {
 
     final accountConfig = Matrix.of(context).client.applicationAccountConfig;
 
+    final backgroundColor = FluffyThemes.isColumnMode(context)
+        ? Theme.of(context).colorScheme.secondaryContainer
+        : Theme.of(context).colorScheme.background;
+
     return PopScope(
       canPop: controller.selectedEvents.isEmpty && !controller.showEmojiPicker,
       onPopInvoked: (pop) async {
@@ -156,101 +160,150 @@ class ChatView extends StatelessWidget {
         builder: (context, snapshot) => FutureBuilder(
           future: controller.loadTimelineFuture,
           builder: (BuildContext context, snapshot) {
-            return Scaffold(
+            return Container(
-              appBar: AppBar(
+              margin: FluffyThemes.isColumnMode(context)
-                actionsIconTheme: IconThemeData(
+                  ? const EdgeInsets.all(12)
-                  color: controller.selectedEvents.isEmpty
+                  : null,
-                      ? null
+              decoration: FluffyThemes.isColumnMode(context)
-                      : Theme.of(context).colorScheme.primary,
+                  ? BoxDecoration(
-                ),
+                      gradient: LinearGradient(
-                leading: controller.selectMode
+                        colors: [
-                    ? IconButton(
+                          Theme.of(context).colorScheme.primaryContainer,
-                        icon: const Icon(Icons.close),
+                          Theme.of(context).colorScheme.secondaryContainer,
-                        onPressed: controller.clearSelectedEvents,
+                          Theme.of(context).colorScheme.tertiaryContainer,
-                        tooltip: L10n.of(context)!.close,
+                        ],
-                        color: Theme.of(context).colorScheme.primary,
+                        stops: const [0.25, 0.5, 0.75],
-                      )
+                        begin: Alignment.topLeft,
-                    : UnreadRoomsBadge(
+                        end: Alignment.bottomRight,
-                        filter: (r) => r.id != controller.roomId,
-                        badgePosition: BadgePosition.topEnd(end: 8, top: 4),
-                        child: const Center(child: BackButton()),
-                      ),
-                titleSpacing: 0,
-                title: ChatAppBarTitle(controller),
-                actions: _appBarActions(context),
-              ),
-              floatingActionButton: controller.showScrollDownButton &&
-                      controller.selectedEvents.isEmpty
-                  ? Padding(
-                      padding: const EdgeInsets.only(bottom: 56.0),
-                      child: FloatingActionButton(
-                        onPressed: controller.scrollDown,
-                        heroTag: null,
-                        mini: true,
-                        child: const Icon(Icons.arrow_downward_outlined),
                       ),
+                      borderRadius:
+                          BorderRadius.circular(AppConfig.borderRadius),
                     )
                   : null,
-              body: DropTarget(
+              clipBehavior: Clip.hardEdge,
-                onDragDone: controller.onDragDone,
+              child: Scaffold(
-                onDragEntered: controller.onDragEntered,
+                extendBody: true,
-                onDragExited: controller.onDragExited,
+                extendBodyBehindAppBar: true,
-                child: Stack(
+                backgroundColor: Colors.transparent,
-                  children: <Widget>[
+                appBar: AppBar(
-                    if (accountConfig.wallpaperUrl != null)
+                  elevation: 0,
-                      Opacity(
+                  scrolledUnderElevation: 0,
-                        opacity: accountConfig.wallpaperOpacity ?? 1,
+                  backgroundColor: backgroundColor.withOpacity(0.9),
-                        child: MxcImage(
+                  surfaceTintColor: backgroundColor.withOpacity(0.9),
-                          uri: accountConfig.wallpaperUrl,
+                  actionsIconTheme: IconThemeData(
-                          fit: BoxFit.cover,
+                    color: controller.selectedEvents.isEmpty
-                          isThumbnail: true,
+                        ? null
-                          width: FluffyThemes.columnWidth * 4,
+                        : Theme.of(context).colorScheme.primary,
-                          height: FluffyThemes.columnWidth * 4,
+                  ),
-                          placeholder: (_) => Container(),
+                  leading: controller.selectMode
+                      ? IconButton(
+                          icon: const Icon(Icons.close),
+                          onPressed: controller.clearSelectedEvents,
+                          tooltip: L10n.of(context)!.close,
+                          color: Theme.of(context).colorScheme.primary,
+                        )
+                      : UnreadRoomsBadge(
+                          filter: (r) => r.id != controller.roomId,
+                          badgePosition: BadgePosition.topEnd(end: 8, top: 4),
+                          child: const Center(child: BackButton()),
                         ),
-                      ),
+                  titleSpacing: 0,
-                    SafeArea(
+                  title: ChatAppBarTitle(controller),
-                      child: Column(
+                  actions: _appBarActions(context),
-                        children: <Widget>[
+                  bottom: PreferredSize(
+                    preferredSize: Size.fromHeight(
+                      64 *
+                          ((controller.room
+                                          .getState(EventTypes.RoomTombstone) !=
+                                      null
+                                  ? 1
+                                  : 0) +
+                              (scrollUpBannerEventId != null ? 1 : 0) +
+                              (controller.room.pinnedEventIds.isNotEmpty
+                                  ? 1
+                                  : 0)),
+                    ),
+                    child: Column(
+                      mainAxisSize: MainAxisSize.min,
+                      children: [
+                        if (controller.room
+                                .getState(EventTypes.RoomTombstone) !=
+                            null)
                           TombstoneDisplay(controller),
-                          if (scrollUpBannerEventId != null)
+                        if (scrollUpBannerEventId != null)
-                            Material(
+                          Material(
-                              color:
+                            color: Theme.of(context).colorScheme.surfaceVariant,
-                                  Theme.of(context).colorScheme.surfaceVariant,
+                            shape: Border(
-                              shape: Border(
+                              bottom: BorderSide(
-                                bottom: BorderSide(
+                                width: 1,
-                                  width: 1,
+                                color: Theme.of(context).dividerColor,
-                                  color: Theme.of(context).dividerColor,
-                                ),
-                              ),
-                              child: ListTile(
-                                leading: IconButton(
-                                  color: Theme.of(context)
-                                      .colorScheme
-                                      .onSurfaceVariant,
-                                  icon: const Icon(Icons.close),
-                                  tooltip: L10n.of(context)!.close,
-                                  onPressed: () {
-                                    controller.discardScrollUpBannerEventId();
-                                    controller.setReadMarker();
-                                  },
-                                ),
-                                title: Text(
-                                  L10n.of(context)!.jumpToLastReadMessage,
-                                ),
-                                contentPadding: const EdgeInsets.only(left: 8),
-                                trailing: TextButton(
-                                  onPressed: () {
-                                    controller.scrollToEventId(
-                                      scrollUpBannerEventId,
-                                    );
-                                    controller.discardScrollUpBannerEventId();
-                                  },
-                                  child: Text(L10n.of(context)!.jump),
-                                ),
                               ),
                             ),
+                            child: ListTile(
+                              leading: IconButton(
+                                color: Theme.of(context)
+                                    .colorScheme
+                                    .onSurfaceVariant,
+                                icon: const Icon(Icons.close),
+                                tooltip: L10n.of(context)!.close,
+                                onPressed: () {
+                                  controller.discardScrollUpBannerEventId();
+                                  controller.setReadMarker();
+                                },
+                              ),
+                              title: Text(
+                                L10n.of(context)!.jumpToLastReadMessage,
+                              ),
+                              contentPadding: const EdgeInsets.only(left: 8),
+                              trailing: TextButton(
+                                onPressed: () {
+                                  controller.scrollToEventId(
+                                    scrollUpBannerEventId,
+                                  );
+                                  controller.discardScrollUpBannerEventId();
+                                },
+                                child: Text(L10n.of(context)!.jump),
+                              ),
+                            ),
+                          ),
+                        if (controller.room.pinnedEventIds.isNotEmpty)
                           PinnedEvents(controller),
+                      ],
+                    ),
+                  ),
+                ),
+                floatingActionButton: controller.showScrollDownButton &&
+                        controller.selectedEvents.isEmpty
+                    ? Padding(
+                        padding: const EdgeInsets.only(bottom: 56.0),
+                        child: FloatingActionButton(
+                          onPressed: controller.scrollDown,
+                          heroTag: null,
+                          mini: true,
+                          child: const Icon(Icons.arrow_downward_outlined),
+                        ),
+                      )
+                    : null,
+                body: DropTarget(
+                  onDragDone: controller.onDragDone,
+                  onDragEntered: controller.onDragEntered,
+                  onDragExited: controller.onDragExited,
+                  child: Stack(
+                    children: <Widget>[
+                      if (accountConfig.wallpaperUrl != null)
+                        Opacity(
+                          opacity: accountConfig.wallpaperOpacity ?? 1,
+                          child: MxcImage(
+                            uri: accountConfig.wallpaperUrl,
+                            fit: BoxFit.cover,
+                            isThumbnail: true,
+                            width: FluffyThemes.columnWidth * 4,
+                            height: FluffyThemes.columnWidth * 4,
+                            placeholder: (_) => Container(),
+                          ),
+                        ),
+                      Column(
+                        children: <Widget>[
                           Expanded(
                             child: GestureDetector(
                               onTap: controller.clearSingleSelectedEvent,
@@ -350,19 +403,19 @@ class ChatView extends StatelessWidget {
                             ),
                         ],
                       ),
-                    ),
+                      if (controller.dragging)
-                    if (controller.dragging)
+                        Container(
-                      Container(
+                          color: Theme.of(context)
-                        color: Theme.of(context)
+                              .scaffoldBackgroundColor
-                            .scaffoldBackgroundColor
+                              .withOpacity(0.9),
-                            .withOpacity(0.9),
+                          alignment: Alignment.center,
-                        alignment: Alignment.center,
+                          child: const Icon(
-                        child: const Icon(
+                            Icons.upload_outlined,
-                          Icons.upload_outlined,
+                            size: 100,
-                          size: 100,
+                          ),
                         ),
-                      ),
+                    ],
-                  ],
+                  ),
                 ),
               ),
             );

lib/pages/chat/events/message.dart

@@ -78,7 +78,7 @@ class Message extends StatelessWidget {
     final client = Matrix.of(context).client;
     final ownMessage = event.senderId == client.userID;
     final alignment = ownMessage ? Alignment.topRight : Alignment.topLeft;
-    var color = Theme.of(context).colorScheme.surfaceVariant;
+    var color = Theme.of(context).colorScheme.background;
     final displayTime = event.type == EventTypes.RoomCreate ||
         nextEvent == null ||
         !event.originServerTs.sameEnvironment(nextEvent!.originServerTs);

lib/pages/chat/pinned_events.dart

@@ -57,10 +57,6 @@ class PinnedEvents extends StatelessWidget {
   Widget build(BuildContext context) {
     final pinnedEventIds = controller.room.pinnedEventIds;
 
-    if (pinnedEventIds.isEmpty) {
-      return const SizedBox.shrink();
-    }
-
     return FutureBuilder<Event?>(
       future: controller.room.getEventById(pinnedEventIds.last),
       builder: (context, snapshot) {

lib/pages/chat/tombstone_display.dart

@@ -11,9 +11,6 @@ class TombstoneDisplay extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    if (controller.room.getState(EventTypes.RoomTombstone) == null) {
-      return const SizedBox.shrink();
-    }
     return SizedBox(
       height: 72,
       child: Material(

lib/pages/chat_list/chat_list_body.dart

@@ -54,7 +54,7 @@ class ChatListViewBody extends StatelessWidget {
           animation: primaryAnimation,
           secondaryAnimation: secondaryAnimation,
           transitionType: SharedAxisTransitionType.vertical,
-          fillColor: Theme.of(context).scaffoldBackgroundColor,
+          fillColor: Theme.of(context).colorScheme.background,
           child: child,
         );
       },

lib/pages/chat_list/chat_list_view.dart

@@ -131,7 +131,13 @@ class ChatListView extends StatelessWidget {
                         .toList();
                     final destinations = getNavigationDestinations(context);
 
-                    return SizedBox(
+                    return Container(
+                      margin: const EdgeInsets.all(12),
+                      decoration: BoxDecoration(
+                        color: Theme.of(context).colorScheme.secondaryContainer,
+                        borderRadius:
+                            BorderRadius.circular(AppConfig.borderRadius),
+                      ),
                       width: FluffyThemes.navRailWidth,
                       child: ListView.builder(
                         scrollDirection: Axis.vertical,
@@ -171,10 +177,6 @@ class ChatListView extends StatelessWidget {
                     );
                   },
                 ),
-                Container(
-                  color: Theme.of(context).dividerColor,
-                  width: 1,
-                ),
               ],
               Expanded(
                 child: GestureDetector(

lib/widgets/layouts/two_column_layout.dart

@@ -15,6 +15,7 @@ class TwoColumnLayout extends StatelessWidget {
   Widget build(BuildContext context) {
     return ScaffoldMessenger(
       child: Scaffold(
+        backgroundColor: Theme.of(context).colorScheme.background,
         body: Row(
           children: [
             Container(
@@ -23,12 +24,9 @@ class TwoColumnLayout extends StatelessWidget {
               width: 360.0 + (displayNavigationRail ? 64 : 0),
               child: mainView,
             ),
-            Container(
-              width: 1.0,
-              color: Theme.of(context).dividerColor,
-            ),
             Expanded(
               child: ClipRRect(
+                clipBehavior: Clip.hardEdge,
                 child: sideView,
               ),
             ),