How do I display a notification badge when I receive a notification?

Question

Hello, in my application I have a list that shows the users who sent messages. I want to place a notification badge when the user receives a notification. Any idea how I can get such a function? Follow my code:

class MessagesGet extends StatelessWidget {

  FirebaseUser _currentUser;

  DocumentSnapshot snapshot;

MessagesGet(this._currentUser, this.snapshot);

  Future<FirebaseUser> loadCurrentUser() async {
  if (_currentUser == null)
  _currentUser = await FirebaseAuth.instance.currentUser();
  if (_currentUser != null) {
  if (_currentUser == null) {

    await Firestore.instance.collection('users')
        .document(_currentUser.uid)
        .get();
         print(_currentUser.uid);
     }
   }
 }
 @override
 Widget build(BuildContext context) {
 return Container(
  child: StreamBuilder(
    stream: 

Firestore.instance.collection('chat').document(_currentUser.uid)
.collection('users').snapshots(),
    builder: (context, snapshot) {
      if (!snapshot.hasData) {

        return Center(
          child: CircularProgressIndicator(),
          );


      } else {
        return Scaffold(

          body: ListView.builder(
            padding: EdgeInsets.all(10.0),
            itemCount: snapshot.data.documents.length,
            itemBuilder: (context, index) {
              return MessagesScreen(snapshot.data.documents[index], _currentUser);
            },
          ),
        );
      }
    },
   ),
  );
 }
}


class MessagesScreen extends StatelessWidget {

 DocumentSnapshot snapshot;

 FirebaseUser _currentUser;

MessagesScreen(this.snapshot,this._currentUser);


@override
Widget build(BuildContext context) {
  return
      ListTile(
        contentPadding: EdgeInsets.only(top: 5.0, bottom: 5.0, left: 10.0),
        leading: CircleAvatar(
          radius: 25.0,
          backgroundColor: Colors.transparent,
          backgroundImage: NetworkImage(snapshot.data["photo"]),
        ),
        title: Text(
          snapshot.data["name"],
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
        trailing: Padding(
          padding: const EdgeInsets.only(right: 10.0),
          child: Badge(),
        ),


        onTap: () {
          Navigator.of(context).push(MaterialPageRoute(
              builder: (context) => AdminChat(_currentUser, snapshot)));

        },
      );


 }
}

Answer 1

Well, your example is not testable, which means that no one here will be able to run your code and see what is working or not working.

But taking into account that you want to present a badge of new notification, with a number or symbol above an icon, just use Stack together with Positioned:

Widget _buildNotificationIcon(int total) {
    return Stack(
      children: <Widget>[
        Icon(Icons.notifications),
        Positioned(
          top: 0.0,
          left: 0.0,
          child: Container(
            child: Padding(
              padding: const EdgeInsets.all(1.0),
              child: Center(
                child: Text(
                  '$total',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 10.0,
                    fontWeight: FontWeight.w500,
                  ),
                ),
              ),
            ),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(4),
              color: Colors.orange,
            ),
            constraints: BoxConstraints(minWidth: 10),
          ),
        )
      ],
    );
  }

About when or not to show this icon will depend solely on your logic and how you manage your state. Test this code in practice with the dartpad.

It will produce that output:

Customize as you see fit. If your question referred to receiving push notification by firebase, it was not clear enough the problem, then you will have to follow the plugin documentation firebase_messaging.