SliverAppBar in ChatDetails

lib/views/chat_details.dart

@@ -158,8 +158,13 @@ class _ChatDetailsState extends State<ChatDetails> {
         activeChat: widget.room.id,
       ),
       secondScaffold: Scaffold(
-        appBar: AppBar(
-          title: Text(widget.room.getLocalizedDisplayname(context)),
+        body: NestedScrollView(
+          headerSliverBuilder:
+              (BuildContext context, bool innerBoxIsScrolled) => <Widget>[
+            SliverAppBar(
+              expandedHeight: 300.0,
+              floating: true,
+              pinned: true,
               actions: <Widget>[
                 if (widget.room.canonicalAlias?.isNotEmpty ?? false)
                   IconButton(
@@ -174,19 +179,23 @@ class _ChatDetailsState extends State<ChatDetails> {
                   ),
                 ChatSettingsPopupMenu(widget.room, false)
               ],
+              title: Text(widget.room.getLocalizedDisplayname(context),
+                  style: TextStyle(color: Colors.black)),
+              backgroundColor: Theme.of(context).appBarTheme.color,
+              flexibleSpace: FlexibleSpaceBar(
+                background: ContentBanner(widget.room.avatar,
+                    onEdit: widget.room.canSendEvent("m.room.avatar") && !kIsWeb
+                        ? () => setAvatarAction(context)
+                        : null),
               ),
+            ),
+          ],
           body: ListView.builder(
             itemCount: members.length + 1 + (canRequestMoreMembers ? 1 : 0),
             itemBuilder: (BuildContext context, int i) => i == 0
                 ? Column(
                     crossAxisAlignment: CrossAxisAlignment.stretch,
                     children: <Widget>[
-                    ContentBanner(widget.room.avatar,
-                        onEdit:
-                            widget.room.canSendEvent("m.room.avatar") && !kIsWeb
-                                ? () => setAvatarAction(context)
-                                : null),
-                    Divider(height: 1),
                       topicEditMode
                           ? ListTile(
                               title: TextField(
@@ -215,7 +224,8 @@ class _ChatDetailsState extends State<ChatDetails> {
                                       child: Icon(Icons.edit),
                                     )
                                   : null,
-                            title: Text("${I18n.of(context).groupDescription}:",
+                              title: Text(
+                                  "${I18n.of(context).groupDescription}:",
                                   style: TextStyle(
                                       color: Theme.of(context).primaryColor,
                                       fontWeight: FontWeight.bold)),
@@ -252,10 +262,12 @@ class _ChatDetailsState extends State<ChatDetails> {
                           ),
                           title: TextField(
                             textInputAction: TextInputAction.done,
-                          onSubmitted: (s) => setDisplaynameAction(context, s),
+                            onSubmitted: (s) =>
+                                setDisplaynameAction(context, s),
                             decoration: InputDecoration(
                               border: InputBorder.none,
-                            labelText: I18n.of(context).changeTheNameOfTheGroup,
+                              labelText:
+                                  I18n.of(context).changeTheNameOfTheGroup,
                               labelStyle: TextStyle(color: Colors.black),
                               hintText:
                                   widget.room.getLocalizedDisplayname(context),
@@ -292,8 +304,8 @@ class _ChatDetailsState extends State<ChatDetails> {
                               backgroundColor: Colors.white,
                               foregroundColor: Colors.grey,
                               child: Icon(Icons.public)),
-                        title:
-                            Text(I18n.of(context).whoIsAllowedToJoinThisGroup),
+                          title: Text(
+                              I18n.of(context).whoIsAllowedToJoinThisGroup),
                           subtitle: Text(
                             widget.room.joinRules.getLocalizedString(context),
                           ),
@@ -372,9 +384,11 @@ class _ChatDetailsState extends State<ChatDetails> {
                               foregroundColor: Colors.grey,
                               child: Icon(Icons.info_outline),
                             ),
-                          title: Text(I18n.of(context).areGuestsAllowedToJoin),
+                            title:
+                                Text(I18n.of(context).areGuestsAllowedToJoin),
                             subtitle: Text(
-                            widget.room.guestAccess.getLocalizedString(context),
+                              widget.room.guestAccess
+                                  .getLocalizedString(context),
                             ),
                           ),
                           onSelected: (GuestAccess guestAccess) =>
@@ -449,6 +463,7 @@ class _ChatDetailsState extends State<ChatDetails> {
                       ),
           ),
         ),
+      ),
     );
   }
 }