Start to create custom appbar overlay

lib/ui/widgets/tablet_mode/appbar_custom_dropdown_widget.dart

@@ -0,0 +1,123 @@
+import 'package:comunic/ui/widgets/icon_button_badge.dart';
+import 'package:flutter/material.dart';
+
+/// Custom dropdown built for Appbar
+///
+/// @author Pierre Hubert
+
+class AppBarCustomDropDownWidget extends StatefulWidget {
+  final Widget icon;
+  final int notificationsBadge;
+  final Widget Function(BuildContext) onBuildOverlay;
+
+  const AppBarCustomDropDownWidget({
+    Key key,
+    @required this.icon,
+    @required this.notificationsBadge,
+    @required this.onBuildOverlay,
+  })  : assert(icon != null),
+        assert(notificationsBadge != null),
+        assert(onBuildOverlay != null),
+        super(key: key);
+
+  @override
+  _AppBarCustomDropDownWidgetState createState() =>
+      _AppBarCustomDropDownWidgetState();
+}
+
+class _AppBarCustomDropDownWidgetState
+    extends State<AppBarCustomDropDownWidget> {
+  @override
+  Widget build(BuildContext context) {
+    return IconButtonWithBadge(
+      icon: widget.icon,
+      onPressed: toggleOverlay,
+      number: widget.notificationsBadge,
+    );
+  }
+
+  void toggleOverlay() async {
+    RenderBox renderBox = context.findRenderObject();
+    final size = renderBox.size;
+    final offset = renderBox.localToGlobal(Offset(size.width, size.height));
+
+    Navigator.of(context).push(_AppBarCustomPopupRoute(
+      onBuild: widget.onBuildOverlay,
+      showContext: context,
+      offset: offset,
+    ));
+  }
+}
+
+class _AppBarCustomPopupRoute extends PopupRoute {
+  final BuildContext showContext;
+  final Widget Function(BuildContext) onBuild;
+  final Offset offset;
+
+  _AppBarCustomPopupRoute({
+    @required this.showContext,
+    @required this.onBuild,
+    @required this.offset,
+  });
+
+  @override
+  Color get barrierColor => null;
+
+  @override
+  bool get barrierDismissible => true;
+
+  @override
+  String get barrierLabel =>
+      MaterialLocalizations.of(showContext).modalBarrierDismissLabel;
+
+  @override
+  Widget buildPage(BuildContext context, Animation<double> animation,
+      Animation<double> secondaryAnimation) {
+    return MediaQuery.removePadding(
+      context: context,
+      removeTop: true,
+      removeBottom: true,
+      removeLeft: true,
+      removeRight: true,
+      child: Builder(
+        builder: (BuildContext context) {
+          return _PopupContentBody(
+            onBuild: onBuild,
+            offset: offset,
+          );
+        },
+      ),
+    );
+  }
+
+  @override
+  Duration get transitionDuration => Duration(milliseconds: 0);
+}
+
+class _PopupContentBody extends StatelessWidget {
+  final Widget Function(BuildContext) onBuild;
+  final Offset offset;
+
+  const _PopupContentBody({Key key, this.onBuild, this.offset})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+      children: <Widget>[
+        GestureDetector(
+          onTapDown: (d) => Navigator.of(context).pop(),
+          onPanDown: (d) => Navigator.of(context).pop(),
+          child: Container(color: Color(0x55000000)),
+        ),
+        Positioned(
+          left: offset.dx - 300,
+          top: offset.dy,
+          width: 300,
+          height: 400,
+          child: Card(child: onBuild(context)),
+        )
+      ],
+    );
+  }
+}

lib/ui/widgets/tablet_mode/tablet_appbar_widget.dart

@@ -1,8 +1,9 @@
 import 'package:comunic/helpers/events_helper.dart';
 import 'package:comunic/helpers/notifications_helper.dart';
 import 'package:comunic/models/count_unread_notifications.dart';
-import 'package:comunic/ui/widgets/icon_button_badge.dart';
 import 'package:comunic/ui/widgets/safe_state.dart';
+import 'package:comunic/ui/widgets/tablet_mode/appbar_custom_dropdown_widget.dart';
+import 'package:comunic/utils/ui_utils.dart';
 import 'package:flutter/material.dart';
 
 /// Comunic tablet AppBar widget
@@ -54,15 +55,15 @@ class _ComunicTabletAppBarWidgetState
     return AppBar(
       title: Text("Comunic"),
       actions: <Widget>[
-        IconButtonWithBadge(
+        AppBarCustomDropDownWidget(
           icon: Icon(Icons.notifications),
-          onPressed: () {},
+          notificationsBadge: _unreadNotifications.notifications,
-          number: _unreadNotifications.notifications,
+          onBuildOverlay: (c) => buildCenteredProgressBar(),
         ),
-        IconButtonWithBadge(
+        AppBarCustomDropDownWidget(
           icon: Icon(Icons.message),
-          onPressed: () {},
+          notificationsBadge: _unreadNotifications.conversations,
-          number: _unreadNotifications.conversations,
+          onBuildOverlay: (c) => Text("hello world"),
         ),
         PopupMenuButton(itemBuilder: (c) => []),
       ],