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,23 +43,64 @@ 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(
+    return Column(
-      onRefresh: () => widget.needRefresh(),
+      children: [
-      child: _buildGroupPagePostsList(),
+        _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(
+    return DefaultTextStyle(
-      color: Colors.black26,
+      style: TextStyle(color: _headerTextColor),
+      child: Container(
+        color: _headerColor,
         child: Padding(
           padding: const EdgeInsets.all(8.0),
           child: Row(
@@ -69,6 +115,7 @@ class _AuthorizedGroupPageScreenState extends State<AuthorizedGroupPageScreen> {
                 ),
               ),
               Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
                 children: <Widget>[
                   GroupMembershipWidget(
                     group: _group,
@@ -80,11 +127,15 @@ class _AuthorizedGroupPageScreenState extends State<AuthorizedGroupPageScreen> {
                   GroupFollowingWidget(
                     group: _group,
                     onUpdated: () => widget.needRefresh(),
+                    inactiveColor: Colors.blueAccent,
+                    activeColor: Colors.white,
                   ),
                   Container(
                     height: 2,
                   ),
                   LikeWidget(
+                    inativeColor: Colors.blueAccent,
+                    activeColor: Colors.white,
                     likeElement: _group,
                   ),
                 ],
@@ -107,6 +158,7 @@ class _AuthorizedGroupPageScreenState extends State<AuthorizedGroupPageScreen> {
             ],
           ),
         ),
+      ),
     );
   }
 
@@ -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(
+  const GroupFollowingWidget({
-      {Key key, @required this.group, @required this.onUpdated})
+    Key key,
-      : assert(group != null),
+    @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(
+      child: RichText(
-        _group.following ? tr("Following") : tr("Follow"),
+        text: TextSpan(children: [
-        style: TextStyle(color: Colors.blue),
+          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({
+  const LikeWidget(
-    Key key,
+      {Key key,
       @required this.likeElement,
       this.buttonIconSize = 15.0,
-  })  : assert(likeElement != null),
+      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(