Created custom appbar

lib/ui/routes/home_route.dart

@@ -3,6 +3,7 @@ import 'package:comunic/ui/screens/friends_list_screen.dart';
 import 'package:comunic/ui/screens/menus_screen.dart';
 import 'package:comunic/ui/screens/newest_posts.dart';
 import 'package:comunic/ui/tiles/custom_bottom_navigation_bar_item.dart';
+import 'package:comunic/ui/widgets/navbar_widget.dart';
 import 'package:comunic/utils/intl_utils.dart';
 import 'package:flutter/material.dart';
 
@@ -16,14 +17,13 @@ class HomeRoute extends StatefulWidget {
 }
 
 class _HomeRouteState extends State<HomeRoute> {
-  int _currTab = 0;
+  BarCallbackActions _currTab = BarCallbackActions.OPEN_CONVERSATIONS;
-  List<int> history = List();
+  List<BarCallbackActions> history = List();
-
 
   /// Change currently visible tab
-  void _changeTab(int newTabNumber) {
+  void _changeTab(BarCallbackActions newTab) {
     setState(() {
-      _currTab = newTabNumber;
+      _currTab = newTab;
     });
   }
 
@@ -37,9 +37,9 @@ class _HomeRouteState extends State<HomeRoute> {
   }
 
   /// Handles a new tab being tapped
-  void _onTap(int number, BuildContext context) {
+  void _onTap(BarCallbackActions action) {
-    if (_currTab != number) history.add(number);
+    if (_currTab != action) history.add(action);
-    _changeTab(number);
+    _changeTab(action);
   }
 
   @override
@@ -51,60 +51,37 @@ class _HomeRouteState extends State<HomeRoute> {
   /// Build the body of the application
   Widget _buildBody(BuildContext context) {
     switch (_currTab) {
-      case 0:
+      case BarCallbackActions.OPEN_CONVERSATIONS:
         return ConversationsListScreen();
 
-      case 1:
+      case BarCallbackActions.OPEN_NEWEST_POSTS:
         return NewestPostsScreen();
 
-      case 2:
+      case BarCallbackActions.OPEN_FRIENDS:
         return FriendsListScreen();
 
-      case 3:
-        return MenuScreen();
-
       default:
-        throw "Invalid tab number : " + _currTab.toString();
+        throw "Invalid tab : " + _currTab.toString();
     }
   }
 
-  /// Build navigation bar items
-  List<BottomNavigationBarItem> _buildNavigationBarItems() {
-    return <BottomNavigationBarItem>[
-      CustomNavigationBarItem(
-        icon: Icon(Icons.chat),
-        title: Text(tr("Conversations")),
-      ),
-      CustomNavigationBarItem(
-        icon: Icon(Icons.refresh),
-        title: Text(tr("Newest")),
-      ),
-      CustomNavigationBarItem(
-        icon: Icon(Icons.group),
-        title: Text(tr("Friends")),
-      ),
-      CustomNavigationBarItem(
-        icon: Icon(Icons.menu),
-        title: Text(tr("Menu")),
-      ),
-    ];
-  }
-
   @override
   Widget build(BuildContext context) {
-    return WillPopScope(
+    return Container(
-      onWillPop: _willPop,
+      color: Colors.blueAccent,
-      child: Scaffold(
+      child: SafeArea(
-        appBar: AppBar(
+        // Avoid OS areas
-          title: _buildNavigationBarItems()[_currTab].title,
+        child: WillPopScope(
-        ),
+          onWillPop: _willPop,
-        body: SafeArea(
+          child: Scaffold(
-          child: _buildBody(context),
+            appBar: ComunicAppBar(
-        ),
+              onTap: _onTap,
-        bottomNavigationBar: BottomNavigationBar(
+              selectedAction: _currTab,
-          currentIndex: _currTab,
+            ),
-          items: _buildNavigationBarItems(),
+            body: SafeArea(
-          onTap: (i) => _onTap(i, context),
+              child: _buildBody(context),
+            ),
+          ),
         ),
       ),
     );

lib/ui/widgets/navbar_widget.dart

@@ -0,0 +1,152 @@
+import 'package:comunic/utils/intl_utils.dart';
+import 'package:flutter/material.dart';
+
+/// Navigation bar widget
+///
+/// @author Pierre HUBERT
+
+typedef OnSelectMenuAction = void Function(BarCallbackActions);
+
+/// Callback actions
+enum BarCallbackActions {
+  OPEN_CONVERSATIONS,
+  OPEN_NEWEST_POSTS,
+  OPEN_FRIENDS,
+  NONE,
+  ACTION_LOGOUT
+}
+
+const _PrimaryColor = Colors.blue;
+const _SecondaryColor = Colors.white;
+
+/// Menu item information
+class _MenuItem {
+  final String label;
+  final Widget icon;
+  final BarCallbackActions action;
+  final bool isMenu;
+
+  const _MenuItem(
+      {@required this.label,
+      @required this.icon,
+      @required this.action,
+      this.isMenu = false})
+      : assert(label != null),
+        assert(icon != null || isMenu),
+        assert(action != null),
+        assert(isMenu != null);
+}
+
+/// List of menu items to show
+final _menuItems = <_MenuItem>[
+  _MenuItem(
+      label: tr("Conversations"),
+      icon: Icon(Icons.comment),
+      action: BarCallbackActions.OPEN_CONVERSATIONS),
+  _MenuItem(
+      label: tr("Newest"),
+      icon: Icon(Icons.refresh),
+      action: BarCallbackActions.OPEN_NEWEST_POSTS),
+  _MenuItem(
+      label: tr("Friends"),
+      icon: Icon(Icons.group),
+      action: BarCallbackActions.OPEN_FRIENDS),
+  _MenuItem(
+      label: tr("Menu"),
+      icon: Icon(Icons.more_vert),
+      isMenu: true,
+      action: BarCallbackActions.NONE)
+];
+
+/// Public widget
+class ComunicAppBar extends StatelessWidget implements PreferredSizeWidget {
+  final OnSelectMenuAction onTap;
+  final BarCallbackActions selectedAction;
+
+  const ComunicAppBar(
+      {Key key, @required this.onTap, @required this.selectedAction})
+      : assert(onTap != null),
+        super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Material(
+      color: Colors.blue,
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: List.generate(
+          _menuItems.length,
+          (i) => _MenuItemWidget(
+                item: _menuItems[i],
+                onTap: onTap,
+                isSelected: _menuItems[i].action == selectedAction,
+              ),
+        ),
+      ),
+    );
+  }
+
+  @override
+  Size get preferredSize => Size.fromHeight(35);
+}
+
+/// The [Widget] part of a menu item
+class _MenuItemWidget extends StatelessWidget {
+  final _MenuItem item;
+  final OnSelectMenuAction onTap;
+  final bool isSelected;
+
+  const _MenuItemWidget(
+      {Key key,
+      @required this.item,
+      @required this.onTap,
+      @required this.isSelected})
+      : assert(item != null),
+        assert(onTap != null),
+        assert(isSelected != null),
+        super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    assert(debugCheckHasMaterial(context));
+
+    return Expanded(
+      child: Material(
+        color: isSelected ? _SecondaryColor : _PrimaryColor,
+        child: !item.isMenu
+            ? InkWell(
+                child: _buildIconContainer(),
+                onTap: () => onTap(item.action),
+              )
+            : _buildContextMenuPopupButton(),
+      ),
+    );
+  }
+
+  Widget _buildIconContainer() {
+    return Column(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: <Widget>[
+        IconTheme(
+          data: IconThemeData(
+              color: isSelected ? _PrimaryColor : _SecondaryColor),
+          child: item.icon,
+        )
+      ],
+    );
+  }
+
+  // Build context menu
+  Widget _buildContextMenuPopupButton() {
+    return PopupMenuButton<BarCallbackActions>(
+      child: _buildIconContainer(),
+      itemBuilder: (i) => [
+            PopupMenuItem(
+              child: Text(tr("Logout")),
+              value: BarCallbackActions.ACTION_LOGOUT,
+            )
+          ],
+      onSelected: onTap,
+    );
+  }
+}