feat: Add widget story for notification bell

This commit is contained in:
Jacques 2024-04-04 11:11:00 +02:00
parent 0289ca1756
commit 0edad6b3a8
13 changed files with 174 additions and 90 deletions

View file

@ -1,31 +0,0 @@
Extension Discovery Cache
=========================
This folder is used by `package:extension_discovery` to cache lists of
packages that contains extensions for other packages.
DO NOT USE THIS FOLDER
----------------------
* Do not read (or rely) the contents of this folder.
* Do write to this folder.
If you're interested in the lists of extensions stored in this folder use the
API offered by package `extension_discovery` to get this information.
If this package doesn't work for your use-case, then don't try to read the
contents of this folder. It may change, and will not remain stable.
Use package `extension_discovery`
---------------------------------
If you want to access information from this folder.
Feel free to delete this folder
-------------------------------
Files in this folder act as a cache, and the cache is discarded if the files
are older than the modification time of `.dart_tool/package_config.json`.
Hence, it should never be necessary to clear this cache manually, if you find a
need to do please file a bug.

View file

@ -1 +0,0 @@
{"version":2,"entries":[{"package":"flutter_notification_center","rootUri":"../","packageUri":"lib/"}]}

View file

@ -49,6 +49,12 @@
"packageUri": "lib/", "packageUri": "lib/",
"languageVersion": "3.2" "languageVersion": "3.2"
}, },
{
"name": "flutter_animated_widgets",
"rootUri": "file:///Users/jacquesdoeleman/.pub-cache/git/flutter_animated_widgets-0eb6ea4c2e64b757b468e23ee2055e27e8302397/",
"packageUri": "lib/",
"languageVersion": "2.18"
},
{ {
"name": "flutter_lints", "name": "flutter_lints",
"rootUri": "file:///Users/jacquesdoeleman/.pub-cache/hosted/pub.dev/flutter_lints-3.0.2", "rootUri": "file:///Users/jacquesdoeleman/.pub-cache/hosted/pub.dev/flutter_lints-3.0.2",
@ -176,7 +182,7 @@
"languageVersion": "3.3" "languageVersion": "3.3"
} }
], ],
"generated": "2024-04-03T12:50:20.344201Z", "generated": "2024-04-04T07:46:25.501696Z",
"generator": "pub", "generator": "pub",
"generatorVersion": "3.3.3" "generatorVersion": "3.3.3"
} }

View file

@ -1,3 +1,7 @@
flutter_animated_widgets
2.18
file:///Users/jacquesdoeleman/.pub-cache/git/flutter_animated_widgets-0eb6ea4c2e64b757b468e23ee2055e27e8302397/
file:///Users/jacquesdoeleman/.pub-cache/git/flutter_animated_widgets-0eb6ea4c2e64b757b468e23ee2055e27e8302397/lib/
async async
2.18 2.18
file:///Users/jacquesdoeleman/.pub-cache/hosted/pub.dev/async-2.11.0/ file:///Users/jacquesdoeleman/.pub-cache/hosted/pub.dev/async-2.11.0/

View file

@ -9,19 +9,17 @@ void main() {
); );
} }
class NotificationCenterDemo extends StatelessWidget { class NotificationCenterDemo extends StatefulWidget {
const NotificationCenterDemo({Key? key}) : super(key: key); const NotificationCenterDemo({Key? key}) : super(key: key);
@override @override
Widget build(BuildContext context) { State<NotificationCenterDemo> createState() => _NotificationCenterDemoState();
return Scaffold( }
appBar: AppBar(
title: const Text('Notification Center'), class _NotificationCenterDemoState extends State<NotificationCenterDemo> {
centerTitle: true, var config = NotificationConfig(
), service: NotificationService(
body: NotificationCenter( listOfNotifications: [
key: key,
notificationCenterService: NotificationService(listOfNotifications: [
NotificationModel( NotificationModel(
title: 'Notification title 1', title: 'Notification title 1',
body: 'Notification body 1', body: 'Notification body 1',
@ -47,11 +45,27 @@ class NotificationCenterDemo extends StatelessWidget {
dateTime: DateTime.now(), dateTime: DateTime.now(),
isRead: false, isRead: false,
), ),
]), ],
notificationTheme: const NotificationStyle( ),
style: const NotificationStyle(
titleTextStyle: TextStyle(color: Colors.red, fontSize: 20), titleTextStyle: TextStyle(color: Colors.red, fontSize: 20),
subtitleTextStyle: TextStyle(color: Colors.blue, fontSize: 16), subtitleTextStyle: TextStyle(color: Colors.blue, fontSize: 16),
subtitleTextAlign: TextAlign.end), subtitleTextAlign: TextAlign.end),
)); );
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Notification Center Demo'),
centerTitle: true,
actions: [
NotificationBellWidgetStory(
config: config,
),
],
),
body: const SizedBox.shrink(),
);
} }
} }

View file

@ -62,6 +62,15 @@ packages:
description: flutter description: flutter
source: sdk source: sdk
version: "0.0.0" version: "0.0.0"
flutter_animated_widgets:
dependency: transitive
description:
path: "."
ref: "0.0.1"
resolved-ref: "0eb6ea4c2e64b757b468e23ee2055e27e8302397"
url: "https://github.com/Iconica-Development/flutter_animated_widgets.git"
source: git
version: "0.0.1"
flutter_lints: flutter_lints:
dependency: "direct dev" dependency: "direct dev"
description: description:
@ -225,3 +234,4 @@ packages:
version: "13.0.0" version: "13.0.0"
sdks: sdks:
dart: ">=3.3.2 <4.0.0" dart: ">=3.3.2 <4.0.0"
flutter: ">=1.17.0"

View file

@ -8,3 +8,6 @@ export 'package:flutter_notification_center/src/services/notification_service.da
export 'package:flutter_notification_center/src/notification_center.dart'; export 'package:flutter_notification_center/src/notification_center.dart';
export 'package:flutter_notification_center/src/models/notification.dart'; export 'package:flutter_notification_center/src/models/notification.dart';
export 'package:flutter_notification_center/src/models/notification_theme.dart'; export 'package:flutter_notification_center/src/models/notification_theme.dart';
export 'package:flutter_notification_center/src/models/notification_config.dart';
export 'package:flutter_notification_center/src/notification_bell.dart';
export 'package:flutter_notification_center/src/notification_bell_story.dart';

View file

@ -0,0 +1,14 @@
import 'package:flutter_notification_center/flutter_notification_center.dart';
import 'package:flutter_notification_center/src/models/notification_translation.dart';
class NotificationConfig {
final NotificationService service;
final NotificationStyle style;
final NotificationTranslations translations;
const NotificationConfig({
required this.service,
this.style = const NotificationStyle(),
this.translations = const NotificationTranslations(),
});
}

View file

@ -0,0 +1,31 @@
import 'package:flutter/material.dart';
import 'package:flutter_animated_widgets/flutter_animated_widgets.dart';
import 'package:flutter_notification_center/flutter_notification_center.dart';
class NotificationBell extends StatefulWidget {
const NotificationBell({
required this.config,
this.onTap,
super.key,
});
final NotificationConfig config;
final VoidCallback? onTap;
@override
State<NotificationBell> createState() => _NotificationBellState();
}
class _NotificationBellState extends State<NotificationBell> {
@override
Widget build(BuildContext context) {
return IconButton(
onPressed: widget.onTap,
icon: AnimatedNotificationBell(
duration: const Duration(seconds: 1),
notificationCount: widget.config.service.listOfNotifications.length,
notificationIconSize: 45,
),
);
}
}

View file

@ -0,0 +1,27 @@
import 'package:flutter/material.dart';
import 'package:flutter_notification_center/flutter_notification_center.dart';
class NotificationBellWidgetStory extends StatelessWidget {
const NotificationBellWidgetStory({
required this.config,
super.key,
});
final NotificationConfig config;
@override
Widget build(BuildContext context) {
return NotificationBell(
config: config,
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => NotificationCenter(
config: config,
),
),
);
},
);
}
}

View file

@ -1,20 +1,13 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_notification_center/src/models/notification.dart'; import 'package:flutter_notification_center/flutter_notification_center.dart';
import 'package:flutter_notification_center/src/models/notification_theme.dart';
import 'package:flutter_notification_center/src/models/notification_translation.dart';
import 'package:flutter_notification_center/src/services/notification_service.dart';
import 'package:intl/intl.dart'; import 'package:intl/intl.dart';
class NotificationCenter extends StatefulWidget { class NotificationCenter extends StatefulWidget {
final NotificationService notificationCenterService; final NotificationConfig config;
final NotificationStyle? notificationTheme;
final NotificationTranslations translations;
const NotificationCenter({ const NotificationCenter({
super.key, super.key,
required this.notificationCenterService, required this.config,
this.notificationTheme,
this.translations = const NotificationTranslations(),
}); });
@override @override
@ -27,7 +20,7 @@ class _NotificationCenterState extends State<NotificationCenter> {
@override @override
void initState() { void initState() {
super.initState(); super.initState();
listOfNotifications = widget.notificationCenterService.getNotifications(); listOfNotifications = widget.config.service.getNotifications();
} }
@override @override
@ -39,8 +32,8 @@ class _NotificationCenterState extends State<NotificationCenter> {
return Scaffold( return Scaffold(
appBar: AppBar( appBar: AppBar(
title: Text( title: Text(
widget.translations.appBarTitle, widget.config.translations.appBarTitle,
style: widget.notificationTheme?.appTitleTextStyle, style: widget.config.style.appTitleTextStyle,
), ),
centerTitle: true, centerTitle: true,
leading: IconButton( leading: IconButton(
@ -51,9 +44,9 @@ class _NotificationCenterState extends State<NotificationCenter> {
), ),
), ),
body: unreadNotifications.isEmpty body: unreadNotifications.isEmpty
? widget.notificationTheme?.emptyNotificationsBuilder?.call() ?? ? widget.config.style.emptyNotificationsBuilder?.call() ??
Center( Center(
child: Text(widget.translations.appBarTitle), child: Text(widget.config.translations.appBarTitle),
) )
: ListView.builder( : ListView.builder(
itemCount: unreadNotifications.length, itemCount: unreadNotifications.length,
@ -62,7 +55,7 @@ class _NotificationCenterState extends State<NotificationCenter> {
final formattedDateTime = DateFormat('yyyy-MM-dd HH:mm') final formattedDateTime = DateFormat('yyyy-MM-dd HH:mm')
.format(notification.dateTime); .format(notification.dateTime);
return Container( return Container(
decoration: widget.notificationTheme?.tileDecoration, decoration: widget.config.style.tileDecoration,
child: ListTile( child: ListTile(
title: Column( title: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
@ -70,12 +63,12 @@ class _NotificationCenterState extends State<NotificationCenter> {
children: [ children: [
Text( Text(
notification.title, notification.title,
style: widget.notificationTheme?.titleTextStyle ?? style: widget.config.style.titleTextStyle ??
const TextStyle(), const TextStyle(),
), ),
Text( Text(
notification.body, notification.body,
style: widget.notificationTheme?.subtitleTextStyle ?? style: widget.config.style.subtitleTextStyle ??
const TextStyle(), const TextStyle(),
), ),
Text( Text(

View file

@ -62,6 +62,15 @@ packages:
description: flutter description: flutter
source: sdk source: sdk
version: "0.0.0" version: "0.0.0"
flutter_animated_widgets:
dependency: "direct main"
description:
path: "."
ref: "0.0.1"
resolved-ref: "0eb6ea4c2e64b757b468e23ee2055e27e8302397"
url: "https://github.com/Iconica-Development/flutter_animated_widgets.git"
source: git
version: "0.0.1"
flutter_lints: flutter_lints:
dependency: "direct dev" dependency: "direct dev"
description: description:
@ -218,3 +227,4 @@ packages:
version: "13.0.0" version: "13.0.0"
sdks: sdks:
dart: ">=3.3.2 <4.0.0" dart: ">=3.3.2 <4.0.0"
flutter: ">=1.17.0"

View file

@ -32,6 +32,10 @@ dependencies:
sdk: flutter sdk: flutter
intl: ^0.17.0 intl: ^0.17.0
flutter_animated_widgets:
git:
url: https://github.com/Iconica-Development/flutter_animated_widgets.git
ref: 0.0.1
# The following adds the Cupertino Icons font to your application. # The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons. # Use with the CupertinoIcons class for iOS style icons.