diff --git a/lib/ui/widgets/tablet_mode/appbar_custom_dropdown_widget.dart b/lib/ui/widgets/tablet_mode/appbar_custom_dropdown_widget.dart new file mode 100644 index 0000000..c0c7ff9 --- /dev/null +++ b/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 { + @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 animation, + Animation 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: [ + 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)), + ) + ], + ); + } +} diff --git a/lib/ui/widgets/tablet_mode/tablet_appbar_widget.dart b/lib/ui/widgets/tablet_mode/tablet_appbar_widget.dart index 985f03d..f176b96 100644 --- a/lib/ui/widgets/tablet_mode/tablet_appbar_widget.dart +++ b/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: [ - IconButtonWithBadge( + AppBarCustomDropDownWidget( icon: Icon(Icons.notifications), - onPressed: () {}, - number: _unreadNotifications.notifications, + notificationsBadge: _unreadNotifications.notifications, + onBuildOverlay: (c) => buildCenteredProgressBar(), ), - IconButtonWithBadge( + AppBarCustomDropDownWidget( icon: Icon(Icons.message), - onPressed: () {}, - number: _unreadNotifications.conversations, + notificationsBadge: _unreadNotifications.conversations, + onBuildOverlay: (c) => Text("hello world"), ), PopupMenuButton(itemBuilder: (c) => []), ],