Merge pull request 'Add Badge + Count to Profile Image Widget' (#41) from profile_image_badge into trunk

Reviewed-on: #41

lib/widgets/contactrow.dart

@@ -24,6 +24,9 @@ class _ContactRowState extends State<ContactRow> {
             Padding(
               padding: const EdgeInsets.all(2.0), //border size
               child: ProfileImage(
+                  badgeCount: contact.unreadMessages,
+                  badgeColor: Provider.of<Settings>(context).theme.portraitContactBadgeColor(),
+                  badgeTextColor: Provider.of<Settings>(context).theme.portraitContactBadgeTextColor(),
                   diameter: 64.0,
                   imagePath: contact.imagePath,
                   border: contact.status == "Authenticated" ? Provider.of<Settings>(context).theme.portraitOnlineBorderColor() : Provider.of<Settings>(context).theme.portraitOfflineBorderColor()),
@@ -58,14 +61,13 @@ class _ContactRowState extends State<ContactRow> {
                       )
                     ])
                   : (contact.isBlocked != null && contact.isBlocked
-                  ? IconButton(
-                    padding: EdgeInsets.zero,
-                    iconSize: 16,
-                    icon: Icon(Icons.block, color: Opaque.current().mainTextColor()),
-                    onPressed: (){},
-                  )
-                  : Text(contact.unreadMessages.toString())
-                  ),
+                      ? IconButton(
+                          padding: EdgeInsets.zero,
+                          iconSize: 16,
+                          icon: Icon(Icons.block, color: Opaque.current().mainTextColor()),
+                          onPressed: () {},
+                        )
+                      : Text(contact.unreadMessages.toString())),
             ),
           ]),
           onTap: () {

lib/widgets/profileimage.dart

@@ -5,10 +5,13 @@ import 'package:provider/provider.dart';
 import '../settings.dart';
 
 class ProfileImage extends StatefulWidget {
-  ProfileImage({this.imagePath, this.diameter, this.border});
+  ProfileImage({this.imagePath, this.diameter, this.border, this.badgeCount, this.badgeColor, this.badgeTextColor});
   final double diameter;
   final String imagePath;
   final Color border;
+  final int badgeCount;
+  final Color badgeColor;
+  final Color badgeTextColor;
 
   @override
   _ProfileImageState createState() => _ProfileImageState();
@@ -17,26 +20,38 @@ class ProfileImage extends StatefulWidget {
 class _ProfileImageState extends State<ProfileImage> {
   @override
   Widget build(BuildContext context) {
-    return ClipOval(
-        clipBehavior: Clip.antiAlias,
-        child: Container(
-          width: widget.diameter,
-          height: widget.diameter,
-          color: widget.border,
-          child: Padding(
-              padding: const EdgeInsets.all(2.0), //border size
-              child: ClipOval(
-                  clipBehavior: Clip.antiAlias,
-                  child: Image(
-                    image: AssetImage("assets/" + widget.imagePath),
-                    filterQuality: FilterQuality.medium,
-                    // We need some theme specific blending here...we might want to consider making this a theme level attribute
-                    colorBlendMode: Provider.of<Settings>(context).theme == Opaque.dark ? BlendMode.softLight : BlendMode.darken,
-                    color: Provider.of<Settings>(context).theme.backgroundHilightElementColor(),
-                    isAntiAlias: true,
-                    width: widget.diameter,
-                    height: widget.diameter,
-                  ))),
-        ));
+    return Stack(children: [
+      ClipOval(
+          clipBehavior: Clip.antiAlias,
+          child: Container(
+              width: widget.diameter,
+              height: widget.diameter,
+              color: widget.border,
+              child: Padding(
+                  padding: const EdgeInsets.all(2.0), //border size
+                  child: ClipOval(
+                      clipBehavior: Clip.antiAlias,
+                      child: Image(
+                        image: AssetImage("assets/" + widget.imagePath),
+                        filterQuality: FilterQuality.medium,
+                        // We need some theme specific blending here...we might want to consider making this a theme level attribute
+                        colorBlendMode: Provider.of<Settings>(context).theme == Opaque.dark ? BlendMode.softLight : BlendMode.darken,
+                        color: Provider.of<Settings>(context).theme.backgroundHilightElementColor(),
+                        isAntiAlias: true,
+                        width: widget.diameter,
+                        height: widget.diameter,
+                      ))))),
+      Visibility(
+          visible: widget.badgeCount > 0,
+          child: Positioned(
+            bottom: 0.0,
+            right: 0.0,
+            child: CircleAvatar(
+              radius: 10.0,
+              backgroundColor: widget.badgeColor,
+              child: Text(widget.badgeCount > 99 ? "99+" : widget.badgeCount.toString(), style: TextStyle(color: widget.badgeTextColor, fontSize: 8.0)),
+            ),
+          )),
+    ]);
   }
 }

lib/widgets/profilerow.dart

@@ -29,6 +29,9 @@ class _ProfileRowState extends State<ProfileRow> {
               Padding(
                   padding: const EdgeInsets.all(2.0), //border size
                   child: ProfileImage(
+                      badgeCount: 0,
+                      badgeColor: Provider.of<Settings>(context).theme.portraitProfileBadgeColor(),
+                      badgeTextColor: Provider.of<Settings>(context).theme.portraitProfileBadgeTextColor(),
                       diameter: 64.0,
                       imagePath: profile.imagePath,
                       border: profile.isOnline ? Provider.of<Settings>(context).theme.portraitOnlineBorderColor() : Provider.of<Settings>(context).theme.portraitOfflineBorderColor())),