Start to create group page tabs

lib/ui/screens/authorized_group_page_screen.dart

@@ -10,6 +10,7 @@ import 'package:comunic/ui/widgets/group_membership_widget.dart';
 import 'package:comunic/ui/widgets/like_widget.dart';
 import 'package:comunic/ui/widgets/post_create_form_widget.dart';
 import 'package:comunic/ui/widgets/posts_list_widget.dart';
+import 'package:comunic/ui/widgets/safe_state.dart';
 import 'package:comunic/utils/intl_utils.dart';
 import 'package:flutter/material.dart';
 
@@ -21,6 +22,10 @@ import 'package:flutter/material.dart';
 
 enum _MenuItems { OPEN_MEMBERS, OPEN_SETTINGS }
 
+Color get _headerTextColor => Colors.white;
+
+Color get _headerColor => Colors.blueAccent.shade700;
+
 class AuthorizedGroupPageScreen extends StatefulWidget {
   final AdvancedGroupInfo advancedGroupInfo;
   final Function() needRefresh;
@@ -38,73 +43,120 @@ class AuthorizedGroupPageScreen extends StatefulWidget {
       _AuthorizedGroupPageScreenState();
 }
 
-class _AuthorizedGroupPageScreenState extends State<AuthorizedGroupPageScreen> {
+class _AuthorizedGroupPageScreenState
+    extends SafeState<AuthorizedGroupPageScreen>
+    with SingleTickerProviderStateMixin {
   AdvancedGroupInfo get _group => widget.advancedGroupInfo;
 
+  TabController _tabController;
+
   final _postsKey = GlobalKey<PostsListWidgetState>();
 
+  List<_GroupPageTab> get _tabs => [
+        _GroupPageTab(widget: _buildGroupPagePostsList(), label: tr("Posts")),
+      ];
+
+  @override
+  void initState() {
+    _tabController = TabController(
+      length: _tabs.length,
+      initialIndex: 0,
+      vsync: this,
+    );
+
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    _tabController.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
-    return RefreshIndicator(
-      onRefresh: () => widget.needRefresh(),
-      child: _buildGroupPagePostsList(),
+    return Column(
+      children: [
+        _buildGroupPageHeader(),
+        Container(
+          color: _headerColor,
+          child: TabBar(
+            tabs: _tabs.map((e) => e.tab).toList(),
+            controller: _tabController,
+          ),
+        ),
+        Expanded(
+          child: TabBarView(
+            controller: _tabController,
+            children: _tabs.map((e) => e.widget).toList(),
+          ),
+        ),
+      ],
     );
   }
 
   /// Build group page header
   Widget _buildGroupPageHeader() {
-    return Container(
-      color: Colors.black26,
-      child: Padding(
-        padding: const EdgeInsets.all(8.0),
-        child: Row(
-          children: <Widget>[
-            GroupIcon(
-              group: _group,
-            ),
-            Expanded(
-              child: Text(
-                " ${_group.displayName}",
-                style: TextStyle(fontSize: 20),
+    return DefaultTextStyle(
+      style: TextStyle(color: _headerTextColor),
+      child: Container(
+        color: _headerColor,
+        child: Padding(
+          padding: const EdgeInsets.all(8.0),
+          child: Row(
+            children: <Widget>[
+              GroupIcon(
+                group: _group,
               ),
-            ),
-            Column(
-              children: <Widget>[
-                GroupMembershipWidget(
-                  group: _group,
-                  onUpdated: () => widget.needRefresh(),
+              Expanded(
+                child: Text(
+                  " ${_group.displayName}",
+                  style: TextStyle(fontSize: 20),
                 ),
-                Container(
-                  height: 4,
-                ),
-                GroupFollowingWidget(
-                  group: _group,
-                  onUpdated: () => widget.needRefresh(),
-                ),
-                Container(
-                  height: 2,
-                ),
-                LikeWidget(
-                  likeElement: _group,
-                ),
-              ],
-            ),
-            PopupMenuButton<_MenuItems>(
-              itemBuilder: (c) => [
-                PopupMenuItem(
-                  child: Text(tr("Group members")),
-                  value: _MenuItems.OPEN_MEMBERS,
-                  enabled: _group.isAtLeastModerator,
-                ),
-                PopupMenuItem(
-                  child: Text(tr("Group settings")),
-                  value: _MenuItems.OPEN_SETTINGS,
-                  enabled: _group.isAdmin,
-                ),
-              ],
-              onSelected: _handleMenuSelection,
-            ),
-          ],
+              ),
+              Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: <Widget>[
+                  GroupMembershipWidget(
+                    group: _group,
+                    onUpdated: () => widget.needRefresh(),
+                  ),
+                  Container(
+                    height: 4,
+                  ),
+                  GroupFollowingWidget(
+                    group: _group,
+                    onUpdated: () => widget.needRefresh(),
+                    inactiveColor: Colors.blueAccent,
+                    activeColor: Colors.white,
+                  ),
+                  Container(
+                    height: 2,
+                  ),
+                  LikeWidget(
+                    inativeColor: Colors.blueAccent,
+                    activeColor: Colors.white,
+                    likeElement: _group,
+                  ),
+                ],
+              ),
+              PopupMenuButton<_MenuItems>(
+                itemBuilder: (c) => [
+                  PopupMenuItem(
+                    child: Text(tr("Group members")),
+                    value: _MenuItems.OPEN_MEMBERS,
+                    enabled: _group.isAtLeastModerator,
+                  ),
+                  PopupMenuItem(
+                    child: Text(tr("Group settings")),
+                    value: _MenuItems.OPEN_SETTINGS,
+                    enabled: _group.isAdmin,
+                  ),
+                ],
+                onSelected: _handleMenuSelection,
+              ),
+            ],
+          ),
         ),
       ),
     );
@@ -125,7 +177,6 @@ class _AuthorizedGroupPageScreenState extends State<AuthorizedGroupPageScreen> {
     return PostsListWidget(
       key: _postsKey,
       topWidgets: <Widget>[
-        _buildGroupPageHeader(),
         _buildPostCreationArea(),
       ],
       getPostsList: () => PostsHelper().getGroupPosts(_group.id),
@@ -149,3 +200,16 @@ class _AuthorizedGroupPageScreenState extends State<AuthorizedGroupPageScreen> {
     }
   }
 }
+
+class _GroupPageTab {
+  final Widget widget;
+  final String label;
+
+  const _GroupPageTab({
+    @required this.widget,
+    @required this.label,
+  })  : assert(widget != null),
+        assert(label != null);
+
+  Tab get tab => Tab(text: label);
+}

lib/ui/widgets/group_following_widget.dart

@@ -12,10 +12,16 @@ import 'package:flutter/material.dart';
 class GroupFollowingWidget extends StatefulWidget {
   final Group group;
   final Function() onUpdated;
+  final Color inactiveColor;
+  final Color activeColor;
 
-  const GroupFollowingWidget(
-      {Key key, @required this.group, @required this.onUpdated})
-      : assert(group != null),
+  const GroupFollowingWidget({
+    Key key,
+    @required this.group,
+    @required this.onUpdated,
+    this.activeColor,
+    this.inactiveColor,
+  })  : assert(group != null),
         assert(onUpdated != null),
         super(key: key);
 
@@ -31,9 +37,17 @@ class _GroupFollowingWidgetState extends SafeState<GroupFollowingWidget> {
     if (!_group.isAtLeastMember) return Container();
 
     return InkWell(
-      child: Text(
-        _group.following ? tr("Following") : tr("Follow"),
-        style: TextStyle(color: Colors.blue),
+      child: RichText(
+        text: TextSpan(children: [
+          WidgetSpan(
+              child: Icon(
+            Icons.notifications,
+            size: 16.0,
+            color: _group.following ? widget.activeColor : widget.inactiveColor,
+          )),
+          TextSpan(
+              text: "  " + (_group.following ? tr("Following") : tr("Follow"))),
+        ]),
       ),
       onTap: () => _toggleFollowing(),
     );

lib/ui/widgets/like_widget.dart

@@ -16,12 +16,16 @@ typedef UpdatedLikingCallBack = Function(int, bool);
 class LikeWidget extends StatefulWidget {
   final LikeElement likeElement;
   final double buttonIconSize;
+  final Color activeColor;
+  final Color inativeColor;
 
-  const LikeWidget({
-    Key key,
-    @required this.likeElement,
-    this.buttonIconSize = 15.0,
-  })  : assert(likeElement != null),
+  const LikeWidget(
+      {Key key,
+      @required this.likeElement,
+      this.buttonIconSize = 15.0,
+      this.activeColor,
+      this.inativeColor})
+      : assert(likeElement != null),
         super(key: key);
 
   @override
@@ -54,7 +58,9 @@ class _LikeWidgetState extends SafeState<LikeWidget> {
             children: <Widget>[
               Icon(
                 Icons.thumb_up,
-                color: elem.userLike ? Colors.blue : null,
+                color: elem.userLike
+                    ? (widget.activeColor ?? Colors.blue)
+                    : widget.inativeColor,
                 size: widget.buttonIconSize,
               ),
               SizedBox(