Table of Contents
Badges :
Badges are the visual indicators they are shown on the screen stating the number of unread notifications, items added to cart and so on based on the app requirement.
Badges is a very good option to display or notify user that there is a message or update which is unread most of the social media apps use these to notify incoming messages.
It will be very difficult to use apps without badges because we cannot manually open each to know the updates that are coming on regular basis.
Almost all the apps uses these badges and are even tracked by analytics events to make sure how many people follow their app updates.
In this tutorial we will see the detailed explanation on this topic and also go through for the animations used in displaying the count on to screen.
pubspec.yaml :
Need to add badges dependency into your project also make sure you update it according to the latest version available.
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.2
badges: ^3.1.2
Badges Video Tutorial :
In the below video tutorial you can find practical example of a flutter badge implementation.
main.dart :
Detailed code for flutter badges implementation.
Specify a badge in your project in this way
badges.Badge( )
Specify the badge content
badgeContent: Text("$count"),
Animate using
badgeAnimation: badges.BadgeAnimation.scale(),
Complete code for flutter badge implementation. You can customize the badge according to your app designs.
import 'package:flutter/material.dart';
import 'package:badges/badges.dart' as badges;
void main()
runApp(MyApp());
var count = 0;
class MyApp extends StatefulWidget
const MyApp(Key? key) : super(key: key);
@override
State<MyApp> createState() => _MyAppState();
class _MyAppState extends State<MyApp>
@override
Widget build(BuildContext context)
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("badges"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextButton(onPressed: ()
setState(()
count++;
);
, child: const Text("increment")),
badges.Badge(
badgeAnimation: badges.BadgeAnimation.scale(),
badgeContent: Text("$count"),
child: const Icon(Icons.shopping_cart,
size: 50,)
)
],
),
),
),
);
If you have any query regarding the implementation of flutter badges do let me know in comment section below.If you like this tutorial do like and share this tutorial for more interesting updates.
