Flutter Badge Counter Example

This articles explains you how to create push notification flutter badge UI in mobile applications. In this example, we are creating flutter badge counter UI for push notifications. You can also check our firebase related articles at HERE.

We are using badges flutter package to create badge UI in flutter applications. There are several properties in flutter badge widget. badgeContent property is used to display text or icon as badge. We can also change background color of badge using badgeColor property.

child property is used to create child widget as icon, text or button for badge UI. We can set shadow of badge using elevation property. We can also animate badge when badge content updates by set value true to toAnimate property.

We can also change position of badge using badgePosition attribute. If you want to set badge at bottom left then you can set BadgePosition.bottomStart() to badgePosition property. You can also give margin to badge UI from particular direction.

We can also give square shape to badge UI by setting BadgeShape.square to shape property. We can also change border radius of badge using borderRadius property. This property is only used if we only used square shape for badge UI. padding property is used to give padding around badge UI.

We can also set animation duration of badge UI when badge content updates. animationType property is used to display different types of animations such as slide, scale or fade when badge content is changed. If you want to display fade animation then you have to set BadgeAnimationType.fade to animationType property.

showBadge property is used to show or hide badge with animation. We can also change alignment of badge UI using alignment property. borderSlide property is used to add border around the badge UI. We can also enable or disable ignore pointer option using ignorePointer property.

 

Add required dependency in your pubspec.yaml file

badges: ^2.0.1
 
 

Flutter Badge

import ‘package:badges/badges.dart’;
import ‘package:flutter/material.dart’;

class MyBadgeScreen extends StatefulWidget {
@override
_MyBadgeScreenState createState() => _MyBadgeScreenState();
}

class _MyBadgeScreenState extends State<MyBadgeScreen> {

int selectedIndex = 0;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(“Flutter Badge Sample”)),
body: Container(),
bottomNavigationBar: BottomNavigationBar(
items: <BottomNavigationBarItem>[
    BottomNavigationBarItem(
        icon: Icon(Icons.rss_feed),
     label: “News”
    ),
    BottomNavigationBarItem(
        icon: Icon(Icons.supervised_user_circle),
        label: “Profile”
     ),
    BottomNavigationBarItem(
        icon: Badge(child:Icon(Icons.message),
            badgeContent: Text(‘3’, style: TextStyle(color: Colors.white)),),
        label: “Messages”
     ),
    BottomNavigationBarItem(
        icon: Icon(Icons.more),
         label: “More”
    ),
],
unselectedItemColor: Colors.black38,
selectedItemColor: Colors.black,
unselectedLabelStyle: TextStyle(color: Colors.black),
selectedLabelStyle: TextStyle(color: Colors.black38),
currentIndex: selectedIndex,
onTap: onItemTapped,
),
);
}

void onItemTapped(int index){
setState(() {
    selectedIndex = index;
});
}

}

 
 

flutter badge

 

Leave a Reply