Add Notification Badge for particular grid in flutter? - flutter

Question

How to add notification badge for particular index.
I was created a Grid suing Gridview.builder now I want to add notification badge on 3 rd index(All List Count) of grid list I don't know how to add in particular list
This is my code:
import 'package:flutter/material.dart';
class StudentView extends StatefulWidget {
const StudentView({Key? key}) : super(key: key);
#override
State<StudentView> createState() => _StudentViewState();
}
class _StudentViewState extends State<StudentView> {
var notificationDetailsList = [];
List category = [
'Fruits',
'Grocery',
'Vegetable',
'All List Count',
'Notification',
];
#override
Widget build(BuildContext context) {
// print(notlength);
return Container(
child: Center(
child: GridView.builder(
itemCount: catergory.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2, childAspectRatio: 5 / 2),
itemBuilder: (BuildContext context, int index) {
return Card(
color: Colors.blue.shade100,
child: Center(child: Text(catergory[index])));
})),
);
}
}

Answer 1

You can try this method and replace my condition with your condition.
import 'package:badges/badges.dart';
import 'package:flutter/material.dart';
class StudentView extends StatefulWidget {
const StudentView({Key? key}) : super(key: key);
#override
State<StudentView> createState() => _StudentViewState();
}
class _StudentViewState extends State<StudentView> {
var notificationDetailsList = [];
List category = [
'Fruits',
'Grocery',
'Vegetable',
'All List Count',
'Notification',
];
#override
Widget build(BuildContext context) {
// print(notlength);
return Scaffold(
appBar: AppBar(),
body: Center(
child: GridView.builder(
itemCount: category.length,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2, childAspectRatio: 5 / 2),
itemBuilder: (BuildContext context, int index) {
return Stack(
clipBehavior: Clip.none,
children: [
Card(
color: Colors.blue.shade100,
child: Center(
child: Text(
category[index],
),
),
),
index.isEven
? Positioned(
right: 0,
top: -6,
child: Badge(
badgeContent: const Text('3'),
),
)
: const SizedBox.shrink(),
],
);
},
),
),
);
}
}