11

I am using FirebaseMessaging to push notifications on my app.

So I can handle these notification with this code :

firebaseMessaging.configure(
    onLaunch: (Map<String, dynamic> msg) {
  print("onLaunch called");
}, onResume: (Map<String, dynamic> msg) {
  print("onResume called");
}, onMessage: (Map<String, dynamic> msg) {
  print("onMessage called : " + msg.toString());
});

When I receive a notification, I want to display this little '1' on my icon in my appbar

icon

My problem is : I don't know how to change my bell icon dynamically on my appbar for all pages (and I can't call setState in my appbar)

2

4 Answers 4

16

I think is pretty simple to solve your problem you only need to use a Stateful class and a custom icon as below snippet:

Widget myAppBarIcon(){
return Container(
  width: 30,
  height: 30,
  child: Stack(
    children: [
      Icon(
        Icons.notifications,
        color: Colors.black,
        size: 30,
      ),
      Container(
        width: 30,
        height: 30,
        alignment: Alignment.topRight,
        margin: EdgeInsets.only(top: 5),
        child: Container(
          width: 15,
          height: 15,
          decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: Color(0xffc32c37),
              border: Border.all(color: Colors.white, width: 1)),
          child: Padding(
            padding: const EdgeInsets.all(0.0),
            child: Center(
              child: Text(
                _counter.toString(),
                style: TextStyle(fontSize: 10),
              ),
            ),
          ),
        ),
      ),
    ],
  ),
);
}

and later you can include this icon on your app bar(leading or action). As you can see the Text value change with any touch I used as base the example code when you start a new Flutter project it contains a method to count how many times you touch the floating button and change the state:

void _incrementCounter() {
setState(() {
  _counter++;
});
}

I hope this helps you

this is my example

4
  • Thanks it was very usefull, I used your example to do something in my way. And welcome to stackoverflow :) Apr 18, 2019 at 8:34
  • @ThomasNicole, How did you update the UI from firebase onMessage callback?
    – Rakesh
    Jun 16, 2020 at 14:06
  • It's been a long time ^^. Jun 16, 2020 at 15:06
  • How can do the same if Appbar icon and the floating button are in different classes? Dec 20, 2020 at 19:20
3

Basic Idea behind the notification badge

Using Stack and Positioned widgets we can stack the Text widget over the IconButton to show the notification badge.

appBar: AppBar(
        leading: IconButton(
          icon: Icon(
            _backIcon(),
            color: Colors.black,
          ),
          alignment: Alignment.centerLeft,
          tooltip: 'Back',
          onPressed: () {

          },
        ),
        title: Text(
          "Title",
          style: TextStyle(
            color: Colors.black,
          ),
        ),
        backgroundColor: Colors.white,
        actions: <Widget>[
          IconButton(
            tooltip: 'Search',
            icon: const Icon(
              Icons.search,
              color: Colors.black,
            ),
            onPressed: _toggle,
          ),
          new Padding(
            padding: const EdgeInsets.all(10.0),
            child: new Container(
              height: 150.0,
              width: 30.0,
              child: new GestureDetector(
                onTap: () {
                },
                child: Stack(
                  children: <Widget>[
                    new IconButton(
                        icon: new Icon(
                          Icons.shopping_cart,
                          color: Colors.black,
                        ),
                        onPressed: () {

                        }),
                    ItemCount == 0
                        ? new Container()
                        : new Positioned(
                            child: new Stack(
                            children: <Widget>[
                              new Icon(Icons.brightness_1,
                                  size: 20.0, color: Colors.orange.shade500),
                              new Positioned(
                                  top: 4.0,
                                  right: 5.0,
                                  child: new Center(
                                    child: new Text(
                                      ItemCount.toString(),
                                      style: new TextStyle(
                                          color: Colors.white,
                                          fontSize: 11.0,
                                          fontWeight: FontWeight.w500),
                                    ),
                                  )),
                            ],
                          )),
                  ],
                ),
              ),
            ),
          )
        ],
      ),
2

You have to create a custom drawable and set it as the Appbar icon and you have to paint the number as text in the custom drawable. This is already done for you in the following link.

How to make an icon in the action bar with the number of notification?

1

you can just create variable of type IconData and change it's value. you will get more idea about that after gone through below example.

import 'package:flutter/material.dart';

void main() => runApp(MyHome());

class MyHome extends StatefulWidget {
  @override
  _MyHomeState createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {

  IconData _iconData= Icons.notifications;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Color(0xffFF5555),
      ),
      home: Scaffold(
        appBar: new AppBar(
          title: new Text("Title"),
          actions: <Widget>[
            Icon(_iconData)
          ],
        ),
        body: Center(
          child: new Text("Demo")
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.check_circle_outline),
            onPressed: (){
              if(_iconData == Icons.notifications){
                setState(() {
                  _iconData = Icons.notifications_active;
                });
              }else{
                setState(() {
                  _iconData = Icons.notifications;
                });
              }
            }
        ),
      ),
    );
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.