Question

我正在使用FirebaseMessaging在我的应用程序上推送通知。

因此我可以使用以下代码处理这些通知：

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

收到通知后，我想在应用栏中的图标上显示这个小“ 1”

我的问题是：我不知道如何在所有页面的应用程序栏中动态更改响铃图标（而且我无法在应用程序栏中调用setState）

Answer 1

我认为解决您的问题非常简单，您只需要使用Stateful类和自定义图标即可

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

}

，稍后您可以在应用程序栏上添加此图标（领导或操作）。正如您所看到的，当我启动新的Flutter项目时，以示例代码为基础的任何触摸都会改变Text值，它包含一种计算触摸浮动按钮并更改状态的次数的方法：

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

}

希望对您有帮助

this is my example

Answer 2

您可以只创建IconData类型的变量并更改其值。通过下面的示例，您将对此有更多了解。

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

Answer 3

您必须创建一个自定义图形并将其设置为Appbar图标，并且必须在自定义图形中将数字绘制为文本。在以下链接中已经为您完成了此操作。

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

Answer 4

通知徽标后面的基本提示

使用堆叠和定位小部件，我们可以将文本小部件堆叠在 IconButton来显示通知徽章。

string->number

Flutter-收到通知时更改应用栏图标

4 个答案: