Flutter - change appbar icon when receiving notification

Question

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

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)

Why can you not call `setState`? – creativecreatorormaybenot Apr 17 '19 at 15:04 — creativecreatorormaybenot, Apr 17 '19 at 15:04
Because I was using a stateless widget... my bad – Thomas Nicole Apr 17 '19 at 15:28 — Thomas Nicole, Apr 17 '19 at 15:28

score 15 · Accepted Answer · edited May 24 '20 at 09:39

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

Thanks it was very usefull, I used your example to do something in my way. And welcome to stackoverflow :) — Thomas Nicole, Apr 18 '19 at 08:34
@ThomasNicole, How did you update the UI from firebase onMessage callback? — Rakesh, Jun 16 '20 at 14:06
How can do the same if Appbar icon and the floating button are in different classes? — SantoshKumar, Dec 20 '20 at 19:20

score 3 · Answer 2 · answered Jul 03 '19 at 04:24

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),
                                    ),
                                  )),
                            ],
                          )),
                  ],
                ),
              ),
            ),
          )
        ],
      ),

score 2 · Answer 3 · answered Apr 17 '19 at 15:20

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?

answered Apr 17 '19 at 15:20

Venkata Narayana

1,657
12
25

score 1 · Answer 4 · answered Apr 17 '19 at 15:05

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;
                });
              }
            }
        ),
      ),
    );
  }
}

Flutter - change appbar icon when receiving notification

4 Answers4

Linked