英文:
How to show notification badge icon on notification icon
问题
以下是翻译好的内容：
Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).primaryColor,
leading: Center(
child: SizedBox(
height: 40,
width: 40,
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.asset(
'assets/images/vr_logo.png',
fit: BoxFit.cover,
height: 10,
width: 10,
),
),
),
),
title: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(
dashboardViewModel.dashboardDetail.data?.garageName ?? "",
style: white40017,
),
Text(
dashboardViewModel.dashboardDetail.data?.garageOwnerName ?? "",
style: white50014,
)
],
),
actions: [
IconButton(
icon: const Icon(Icons.notifications_none_sharp),
onPressed: () {
context.push(const NotificationScreen());
},
),
Positioned(
top: 5,
right: 0,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
decoration: const BoxDecoration(shape: BoxShape.circle, color: Colors.red),
alignment: Alignment.center,
child: Text("1"),
),
)
],
),
body: SizedBox(
// color: Colors.amberAccent,
height: size(context).height,
width: size(context).width,
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
trackingTopBar(context),
Text(
"Overview",
style: black60018,
),
progressAndJob(context),
corsorelSliderBar(context),
amountBar(context),
customerStatusBar(context)
],
),
),
),
);
我编写了代码来在通知上方显示通知徽章图标，但它们分别出现在顶部栏的左侧和右侧。
这是我的当前代码的外观，但我希望它只与通知图标的右上角接触，请问有人可以帮助我如何调整吗？我尝试过但无法做到，请帮助我。谢谢。
英文:
: Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).primaryColor,
leading: Center(
child: SizedBox(
height: 40,
width: 40,
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.asset(
'assets/images/vr_logo.png',
fit: BoxFit.cover,
height: 10,
width: 10,
),
)),
),
title: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(
dashboardViewModel.dashboardDetail.data?.garageName ?? "",
style: white40017,
),
Text(
dashboardViewModel.dashboardDetail.data?.garageOwnerName ??
"",
style: white50014,
)
],
),
actions: [
IconButton(
icon: const Icon(Icons.notifications_none_sharp),
onPressed: () {
context.push(const NotificationScreen());
},
),
Positioned(
top: 5,
right: 0,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
decoration: const BoxDecoration(shape: BoxShape.circle, color: Colors.red),
alignment: Alignment.center,
child: Text("1"),
),
)
],
),
body: SizedBox(
// color: Colors.amberAccent,
height: size(context).height,
width: size(context).width,
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
trackingTopBar(context),
Text(
"Overview",
style: black60018,
),
progressAndJob(context),
corsorelSliderBar(context),
amountBar(context),
customerStatusBar(context)
]),
),
),
));
I wrote code to show notification badge icon on top of notification but its coming separate left and right side in top bar.
This how its looking with my current code while i want just on right top corner touch with notification icon can any one help me how to adjust i tried but unable to do please help with this.
Thanks
答案1
得分: 1
尝试这样写：
IconButton(
icon: Badge(
label: Text('1'),
child: const Icon(
Icons.notifications_none_sharp,
color: Colors.black,
),
),
onPressed: () {
context.push(const NotificationScreen());
},
),
英文:
Try like this
IconButton(
icon: Badge(
label: Text('1'),
child: const Icon(
Icons.notifications_none_sharp,
color: Colors.black,
)),
onPressed: () {
context.push(const NotificationScreen());
},
),
答案2
得分: 0
以下是你要翻译的内容：
在你的Positioned小部件中进行了一些更改。尝试使用下面的Positioned小部件代码替换代码：
Positioned(
top: 5,
right: 5,
child: Container(
height: 18,
width: 18,
decoration: const BoxDecoration(
shape: BoxShape.circle,
color: Colors.red,
),
alignment: Alignment.center,
child: Text(
"1",
style: TextStyle(fontSize: 10),
),
),
)
英文:
some changes in your Positioned widget. try or replace code with Positioned widget below code:
Positioned(
top: 5,
right: 5,
child: Container(
height: 18,
width: 18,
decoration: const BoxDecoration(
shape: BoxShape.circle, color: Colors.red),
alignment: Alignment.center,
child: Text(
"1",
style: TextStyle(fontSize: 10),
),
),
)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论