J'utilise FirebaseMessaging pour envoyer des notifications sur mon application.
Pour que je puisse gérer ces notifications avec ce 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());
});
Lorsque je reçois une notification, je souhaite afficher ce petit «1» sur mon icône dans ma barre d'applications
Mon problème est le suivant: je ne sais pas comment modifier dynamiquement l'icône de ma cloche sur ma barre d'applications pour toutes les pages (et je ne peux pas appeler setState dans ma barre d'applications)
4 Réponses :
vous pouvez simplement créer une variable de type IconData et changer sa valeur. vous en aurez plus d'idées après avoir parcouru l'exemple ci-dessous.
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;
});
}
}
),
),
);
}
}
Vous devez créer un dessin personnalisé et le définir comme icône Appbar et vous devez peindre le nombre sous forme de texte dans le dessin personnalisé. Ceci est déjà fait pour vous dans le lien suivant.
Comment faire une icône dans la barre d'action avec le numéro de notification?
Je pense qu'il est assez simple de résoudre votre problème, il vous suffit d'utiliser une classe Stateful et une icône personnalisée comme ci-dessous l'extrait de code:
void _incrementCounter() {
setState(() {
_counter++;
});
}
et plus tard, vous pouvez inclure cette icône dans votre barre d'applications (direction ou action). Comme vous pouvez voir le changement de valeur du texte avec n'importe quelle touche, j'ai utilisé comme base l'exemple de code lorsque vous démarrez un nouveau projet Flutter, il contient une méthode pour compter le nombre de fois que vous appuyez sur le bouton flottant et changez l'état:
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),
),
),
),
),
),
],
),
);
}
J'espère que cela vous aidera
Merci, c'était très utile, j'ai utilisé votre exemple pour faire quelque chose à ma manière. Et bienvenue sur stackoverflow :)
@ThomasNicole, Comment avez-vous mis à jour l'interface utilisateur à partir du rappel Firebase onMessage?
Ça fait longtemps ^^.
Je pense que je n'avais qu'à mettre à jour une valeur dans un service
Comment faire de même si l'icône Appbar et le bouton flottant sont dans des classes différentes?
Idée de base derrière le badge de notification
En utilisant les widgets Pile et Positionné, nous pouvons empiler le widget Texte sur le IconButton pour afficher le badge de notification.
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),
),
)),
],
)),
],
),
),
),
)
],
),
Pourquoi ne pouvez-vous pas appeler
setState?Parce que j'utilisais un widget sans état ... mon mauvais