Flutter - изменить значок панели приложений при получении уведомления
Я использую 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 на панели приложений)
Потому что я использовал виджет без сохранения состояния... мой плохой
Ответы 4
вы можете просто создать переменную типа IconData и изменить ее значение. вы получите больше информации об этом после того, как ознакомитесь с приведенным ниже примером.
импортировать 'пакет: флаттер/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;
});
}
}
),
),
);
}
}
Вы должны создать пользовательский рисунок и установить его в качестве значка панели приложений, и вы должны нарисовать число как текст в пользовательском рисунке. Это уже сделано для вас по следующей ссылке.
Я думаю, что решить вашу проблему довольно просто, вам нужно всего лишь использовать класс 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),
),
),
),
),
),
],
),
);
}
а позже вы можете включить этот значок на панели приложений (ведущий или действие). Как вы можете видеть, значение Text изменяется при любом прикосновении, которое я использовал в качестве основы кода примера, когда вы запускаете новый проект Flutter, он содержит метод подсчета того, сколько раз вы касаетесь плавающей кнопки и меняете состояние:
void _incrementCounter() {
setState(() {
_counter++;
});
}
Я надеюсь, это поможет вам
Спасибо, это было очень полезно, я использовал ваш пример, чтобы сделать что-то по-своему. И добро пожаловать в stackoverflow :)
@ThomasNicole, как вы обновили пользовательский интерфейс из обратного вызова firebase onMessage?
Это было давно ^^.
Как сделать то же самое, если значок панели приложений и плавающая кнопка находятся в разных классах?
Основная идея значка уведомления
Используя виджеты «Стек» и «Позиционирование», мы можем расположить виджет «Текст» над IconButton для отображения значка уведомления.
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),
),
)),
],
)),
],
),
),
),
)
],
),
Почему нельзя звонить
setState?