feat: New chat background colors and chatlist design

lib/pages/chat_list.dart

@@ -51,6 +51,17 @@ class ChatListController extends State<ChatList> {
 
   String _activeSpaceId;
   String get activeSpaceId => _activeSpaceId;
+  final ScrollController scrollController = ScrollController();
+  bool scrolledToTop = true;
+
+  void _onScroll() {
+    final newScrolledToTop = scrollController.position.pixels <= 0;
+    if (newScrolledToTop != scrolledToTop) {
+      setState(() {
+        scrolledToTop = newScrolledToTop;
+      });
+    }
+  }
 
   void setActiveSpaceId(BuildContext context, String spaceId) {
     Scaffold.of(context).openEndDrawer();
@@ -156,6 +167,7 @@ class ChatListController extends State<ChatList> {
     WidgetsBinding.instance.addPostFrameCallback(
       (_) => waitForFirstSync().then((_) => checkBootstrap()),
     );
+    scrollController.addListener(_onScroll);
     super.initState();
   }
 
@@ -181,6 +193,7 @@ class ChatListController extends State<ChatList> {
     _intentDataStreamSubscription?.cancel();
     _intentFileStreamSubscription?.cancel();
     _intentUriStreamSubscription?.cancel();
+    scrollController.removeListener(_onScroll);
     super.dispose();
   }
 

lib/pages/views/chat_list_view.dart

@@ -31,6 +31,7 @@ class ChatListView extends StatelessWidget {
             },
             child: Scaffold(
               appBar: AppBar(
+                elevation: controller.scrolledToTop ? 0 : null,
                 actionsIconTheme: IconThemeData(
                   color: controller.selectedRoomIds.isEmpty
                       ? null
@@ -200,7 +201,15 @@ class ChatListView extends StatelessWidget {
                 Expanded(child: _ChatListViewBody(controller)),
               ]),
               floatingActionButton: selectMode == SelectMode.normal
-                  ? FloatingActionButton(
+                  ? controller.scrolledToTop
+                      ? FloatingActionButton.extended(
+                          heroTag: 'main_fab',
+                          onPressed: () =>
+                              VRouter.of(context).to('/newprivatechat'),
+                          icon: Icon(CupertinoIcons.chat_bubble),
+                          label: Text(L10n.of(context).newChat),
+                        )
+                      : FloatingActionButton(
                           heroTag: 'main_fab',
                           onPressed: () =>
                               VRouter.of(context).to('/newprivatechat'),
@@ -307,6 +316,7 @@ class _ChatListViewBody extends StatelessWidget {
                 );
               }
               return ListView.builder(
+                controller: controller.scrollController,
                 itemCount: rooms.length,
                 itemBuilder: (BuildContext context, int i) {
                   return ChatListItem(

lib/pages/views/chat_view.dart

@@ -2,6 +2,7 @@ import 'dart:ui';
 
 import 'package:emoji_picker_flutter/emoji_picker_flutter.dart';
 import 'package:fluffychat/config/app_config.dart';
+import 'package:fluffychat/widgets/background_gradient_box.dart';
 import 'package:matrix/matrix.dart';
 import 'package:fluffychat/pages/chat.dart';
 import 'package:fluffychat/widgets/avatar.dart';
@@ -204,6 +205,7 @@ class ChatView extends StatelessWidget {
               : null,
           body: Stack(
             children: <Widget>[
+              BackgroundGradientBox(),
               if (Matrix.of(context).wallpaper != null)
                 Image.file(
                   Matrix.of(context).wallpaper,

lib/pages/views/empty_page_view.dart

@@ -1,5 +1,6 @@
 import 'dart:math';
 
+import 'package:fluffychat/widgets/background_gradient_box.dart';
 import 'package:flutter/material.dart';
 
 class EmptyPage extends StatelessWidget {
@@ -10,7 +11,10 @@ class EmptyPage extends StatelessWidget {
   Widget build(BuildContext context) {
     final _width = min(MediaQuery.of(context).size.width, EmptyPage._width);
     return Scaffold(
-      body: Column(
+      body: Stack(
+        children: [
+          BackgroundGradientBox(),
+          Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
               Center(
@@ -32,6 +36,8 @@ class EmptyPage extends StatelessWidget {
                 ),
             ],
           ),
+        ],
+      ),
     );
   }
 }

lib/widgets/background_gradient_box.dart

@@ -0,0 +1,26 @@
+import 'package:flutter/material.dart';
+
+class BackgroundGradientBox extends StatelessWidget {
+  final Widget child;
+  const BackgroundGradientBox({
+    Key key,
+    this.child,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        gradient: LinearGradient(
+          begin: Alignment.topRight,
+          end: Alignment.bottomLeft,
+          colors: [
+            Theme.of(context).scaffoldBackgroundColor,
+            Theme.of(context).secondaryHeaderColor,
+          ],
+        ),
+      ),
+      child: child,
+    );
+  }
+}

lib/widgets/event_content/message.dart

@@ -54,7 +54,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).secondaryHeaderColor;
+    var color = Theme.of(context).scaffoldBackgroundColor;
     final sameSender = nextEvent != null &&
             [EventTypes.Message, EventTypes.Sticker].contains(nextEvent.type)
         ? nextEvent.sender.id == event.sender.id

lib/widgets/event_content/state_message.dart

@@ -32,6 +32,7 @@ class StateMessage extends StatelessWidget {
               border: Border.all(
                 color: Theme.of(context).dividerColor,
               ),
+              color: Theme.of(context).scaffoldBackgroundColor,
               borderRadius: BorderRadius.circular(AppConfig.borderRadius),
             ),
             child: Column(

lib/widgets/layouts/one_page_card.dart

@@ -3,6 +3,8 @@ import 'dart:math';
 import 'package:fluffychat/config/themes.dart';
 import 'package:flutter/material.dart';
 
+import '../background_gradient_box.dart';
+
 class OnePageCard extends StatelessWidget {
   final Widget child;
 
@@ -16,32 +18,16 @@ class OnePageCard extends StatelessWidget {
         ? child
         : Material(
             color: Theme.of(context).backgroundColor,
-            child: Container(
+            child: BackgroundGradientBox(
-              decoration: BoxDecoration(
+              child: Padding(
-                gradient: LinearGradient(
-                  begin: Alignment.topRight,
-                  end: Alignment.bottomLeft,
-                  stops: [
-                    0.1,
-                    0.4,
-                    0.6,
-                    0.9,
-                  ],
-                  colors: [
-                    Theme.of(context).secondaryHeaderColor.withAlpha(alpha),
-                    Theme.of(context).primaryColor.withAlpha(alpha),
-                    Theme.of(context).colorScheme.secondary.withAlpha(alpha),
-                    Theme.of(context).backgroundColor.withAlpha(alpha),
-                  ],
-                ),
-              ),
                 padding: EdgeInsets.symmetric(
                   horizontal:
                       max((MediaQuery.of(context).size.width - 600) / 2, 12),
                   vertical:
                       max((MediaQuery.of(context).size.height - 800) / 2, 12),
                 ),
-              child: SafeArea(child: Card(elevation: 7, child: child)),
+                child: SafeArea(child: Card(elevation: 3, child: child)),
+              ),
             ),
           );
   }