dart - Displaying notification badge on BottomNavigationBar's Icon

Dart - Displaying notification badge on BottomNavigationBar's Icon

To display a notification badge on the BottomNavigationBar icons in Flutter, you can use a combination of custom widgets and layout techniques. Flutter's BottomNavigationBar does not natively support badges, so you'll need to create a custom solution.

Here's a step-by-step guide to achieving this:

Steps to Display a Notification Badge

  1. Create a Custom Widget for Badge: Design a widget that can display a badge on top of an icon.
  2. Overlay Badge on Icon: Use a Stack to overlay the badge on top of the BottomNavigationBar icon.

Example Implementation

Here's a complete example demonstrating how to create a custom notification badge and overlay it on BottomNavigationBar icons:

import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { int _selectedIndex = 0; void _onItemTapped(int index) { setState(() { _selectedIndex = index; }); } @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Text('Selected index: $_selectedIndex'), ), bottomNavigationBar: BottomNavigationBar( currentIndex: _selectedIndex, onTap: _onItemTapped, items: [ BottomNavigationBarItem( icon: BadgeIcon( icon: Icons.home, badgeContent: '3', // Badge content ), label: 'Home', ), BottomNavigationBarItem( icon: BadgeIcon( icon: Icons.search, badgeContent: '', // Empty badge ), label: 'Search', ), BottomNavigationBarItem( icon: BadgeIcon( icon: Icons.notifications, badgeContent: '5', // Badge content ), label: 'Notifications', ), ], ), ); } } class BadgeIcon extends StatelessWidget { final IconData icon; final String badgeContent; const BadgeIcon({ required this.icon, this.badgeContent = '', }); @override Widget build(BuildContext context) { return Stack( clipBehavior: Clip.none, children: <Widget>[ Icon(icon), if (badgeContent.isNotEmpty) Positioned( right: 0, top: 0, child: Container( padding: EdgeInsets.symmetric(horizontal: 6), constraints: BoxConstraints(minWidth: 20, minHeight: 20), decoration: BoxDecoration( color: Colors.red, borderRadius: BorderRadius.circular(10), ), alignment: Alignment.center, child: Text( badgeContent, style: TextStyle( color: Colors.white, fontWeight: FontWeight.bold, fontSize: 12, ), ), ), ), ], ); } }

Explanation

  1. BadgeIcon Widget:

    • This widget is a StatelessWidget that takes an icon and badgeContent as parameters.
    • It uses a Stack to place the badge on top of the icon.

  2. Positioning the Badge:

    • The Positioned widget is used to place the badge at the top-right corner of the icon.
    • The badge itself is styled with a red background and white text.

  3. Using BadgeIcon in BottomNavigationBar:

    • Replace the icon property of each BottomNavigationBarItem with BadgeIcon, passing the appropriate icon and badgeContent.

Customization

  • Badge Style: Customize the badge's size, color, and text style according to your needs.
  • Badge Position: Adjust the position of the badge if needed.

This approach provides a flexible way to integrate notification badges into the BottomNavigationBar and can be tailored further based on your specific UI requirements.

Examples

  1. "Dart Flutter BottomNavigationBar with notification badge"

    Description: Shows how to add a notification badge to the BottomNavigationBar's icon in Flutter.

    Code:

    import 'package:flutter/material.dart'; import 'package:flutter/cupertino.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( bottomNavigationBar: BottomNavigationBar( items: [ BottomNavigationBarItem( icon: Stack( children: <Widget>[ Icon(Icons.home), Positioned( right: 0, child: Container( padding: EdgeInsets.all(2), decoration: BoxDecoration( color: Colors.red, borderRadius: BorderRadius.circular(6), ), constraints: BoxConstraints( maxWidth: 16, maxHeight: 16, ), child: Center( child: Text( '3', style: TextStyle( color: Colors.white, fontSize: 10, ), ), ), ), ), ], ), label: 'Home', ), BottomNavigationBarItem( icon: Icon(Icons.search), label: 'Search', ), BottomNavigationBarItem( icon: Icon(Icons.notifications), label: 'Notifications', ), ], ), ); } }

    Description: This code creates a BottomNavigationBar with a notification badge displayed on the first icon.

  2. "Flutter BottomNavigationBar icon with badge counter"

    Description: Demonstrates how to add a badge with a counter to an icon in the BottomNavigationBar.

    Code:

    import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: HomeScreen(), ); } } class HomeScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( bottomNavigationBar: BottomNavigationBar( items: [ BottomNavigationBarItem( icon: Stack( children: <Widget>[ Icon(Icons.mail), Positioned( right: 0, child: Container( padding: EdgeInsets.all(4), decoration: BoxDecoration( color: Colors.red, borderRadius: BorderRadius.circular(8), ), constraints: BoxConstraints( minWidth: 16, minHeight: 16, ), child: Center( child: Text( '5', style: TextStyle( color: Colors.white, fontSize: 12, ), ), ), ), ), ], ), label: 'Messages', ), BottomNavigationBarItem( icon: Icon(Icons.settings), label: 'Settings', ), ], ), ); } }

    Description: Adds a badge with a count of 5 to the mail icon in the BottomNavigationBar.

  3. "Flutter BottomNavigationBar badge example"

    Description: Provides an example of adding a badge to a BottomNavigationBar icon in Flutter.

    Code:

    import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: MyHomePage(), ); } } class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( bottomNavigationBar: BottomNavigationBar( items: [ BottomNavigationBarItem( icon: Stack( children: <Widget>[ Icon(Icons.notifications), Positioned( right: 0, top: 0, child: Container( padding: EdgeInsets.all(4), decoration: BoxDecoration( color: Colors.red, borderRadius: BorderRadius.circular(12), ), constraints: BoxConstraints( minWidth: 18, minHeight: 18, ), child: Center( child: Text( '9', style: TextStyle( color: Colors.white, fontSize: 12, ), ), ), ), ), ], ), label: 'Alerts', ), BottomNavigationBarItem( icon: Icon(Icons.favorite), label: 'Favorites', ), ], ), ); } }

    Description: Shows how to position a badge with a counter on the notifications icon in the BottomNavigationBar.

  4. "Dart Flutter add badge to BottomNavigationBar item"

    Description: Example of adding a notification badge to an item in the BottomNavigationBar.

    Code:

    import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: HomeScreen(), ); } } class HomeScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( bottomNavigationBar: BottomNavigationBar( items: [ BottomNavigationBarItem( icon: Stack( children: <Widget>[ Icon(Icons.shopping_cart), Positioned( right: 0, top: 0, child: Container( padding: EdgeInsets.all(4), decoration: BoxDecoration( color: Colors.red, borderRadius: BorderRadius.circular(10), ), constraints: BoxConstraints( minWidth: 16, minHeight: 16, ), child: Center( child: Text( '7', style: TextStyle( color: Colors.white, fontSize: 12, ), ), ), ), ), ], ), label: 'Cart', ), BottomNavigationBarItem( icon: Icon(Icons.person), label: 'Profile', ), ], ), ); } }

    Description: Adds a badge to the shopping cart icon, indicating the number of items in the cart.

  5. "Flutter add notification badge to BottomNavigationBar icon"

    Description: Shows how to add a notification badge to an icon in the BottomNavigationBar.

    Code:

    import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( bottomNavigationBar: BottomNavigationBar( items: [ BottomNavigationBarItem( icon: Stack( clipBehavior: Clip.none, children: <Widget>[ Icon(Icons.chat), Positioned( right: -6, top: -6, child: Container( padding: EdgeInsets.all(4), decoration: BoxDecoration( color: Colors.red, borderRadius: BorderRadius.circular(8), ), constraints: BoxConstraints( maxWidth: 18, maxHeight: 18, ), child: Center( child: Text( '2', style: TextStyle( color: Colors.white, fontSize: 10, ), ), ), ), ), ], ), label: 'Chats', ), BottomNavigationBarItem( icon: Icon(Icons.account_circle), label: 'Profile', ), ], ), ); } }

    Description: Adds a small notification badge to the chat icon, displaying the number of unread messages.

  6. "Dart Flutter BottomNavigationBar badge with custom widget"

    Description: Example of using a custom widget for the badge in the BottomNavigationBar.

    Code:

    import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( bottomNavigationBar: BottomNavigationBar( items: [ BottomNavigationBarItem( icon: Stack( children: <Widget>[ Icon(Icons.notifications), Positioned( right: 0, top: 0, child: CustomBadge(count: 4), ), ], ), label: 'Notifications', ), BottomNavigationBarItem( icon: Icon(Icons.settings), label: 'Settings', ), ], ), ); } } class CustomBadge extends StatelessWidget { final int count; CustomBadge({required this.count}); @override Widget build(BuildContext context) { return Container( padding: EdgeInsets.all(4), decoration: BoxDecoration( color: Colors.red, borderRadius: BorderRadius.circular(12), ), constraints: BoxConstraints( minWidth: 18, minHeight: 18, ), child: Center( child: Text( '$count', style: TextStyle( color: Colors.white, fontSize: 12, ), ), ), ); } }

    Description: Uses a custom CustomBadge widget to display the badge on the notifications icon.

  7. "Flutter BottomNavigationBar badge with dynamic value"

    Description: Demonstrates how to update the badge value dynamically in the BottomNavigationBar.

    Code:

    import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { int notificationCount = 0; void _updateNotificationCount() { setState(() { notificationCount = (notificationCount + 1) % 10; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Badge Demo'), actions: [ IconButton( icon: Icon(Icons.add), onPressed: _updateNotificationCount, ), ], ), bottomNavigationBar: BottomNavigationBar( items: [ BottomNavigationBarItem( icon: Stack( children: <Widget>[ Icon(Icons.notifications), Positioned( right: 0, top: 0, child: Container( padding: EdgeInsets.all(4), decoration: BoxDecoration( color: Colors.red, borderRadius: BorderRadius.circular(10), ), constraints: BoxConstraints( minWidth: 20, minHeight: 20, ), child: Center( child: Text( '$notificationCount', style: TextStyle( color: Colors.white, fontSize: 12, ), ), ), ), ), ], ), label: 'Notifications', ), BottomNavigationBarItem( icon: Icon(Icons.settings), label: 'Settings', ), ], ), ); } }

    Description: Updates the notification badge dynamically with a button click.

  8. "Dart Flutter BottomNavigationBar badge widget position"

    Description: Shows how to adjust the position of the badge widget on the BottomNavigationBar icon.

    Code:

    import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: HomeScreen(), ); } } class HomeScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( bottomNavigationBar: BottomNavigationBar( items: [ BottomNavigationBarItem( icon: Stack( clipBehavior: Clip.none, children: <Widget>[ Icon(Icons.notifications), Positioned( right: 10, top: -5, child: Container( padding: EdgeInsets.all(4), decoration: BoxDecoration( color: Colors.red, borderRadius: BorderRadius.circular(10), ), constraints: BoxConstraints( minWidth: 18, minHeight: 18, ), child: Center( child: Text( '8', style: TextStyle( color: Colors.white, fontSize: 12, ), ), ), ), ), ], ), label: 'Alerts', ), BottomNavigationBarItem( icon: Icon(Icons.account_circle), label: 'Profile', ), ], ), ); } }

    Description: Adjusts the badge position relative to the notifications icon.

  9. "Flutter BottomNavigationBar with badge and icon color"

    Description: Shows how to set the icon color along with a badge in the BottomNavigationBar.

    Code:

    import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: HomeScreen(), ); } } class HomeScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( bottomNavigationBar: BottomNavigationBar( items: [ BottomNavigationBarItem( icon: Stack( children: <Widget>[ Icon(Icons.notifications, color: Colors.blue), Positioned( right: 0, top: 0, child: Container( padding: EdgeInsets.all(4), decoration: BoxDecoration( color: Colors.red, borderRadius: BorderRadius.circular(10), ), constraints: BoxConstraints( minWidth: 16, minHeight: 16, ), child: Center( child: Text( '3', style: TextStyle( color: Colors.white, fontSize: 10, ), ), ), ), ), ], ), label: 'Notifications', ), BottomNavigationBarItem( icon: Icon(Icons.settings), label: 'Settings', ), ], ), ); } }

    Description: Sets a custom icon color for the BottomNavigationBar item along with a badge.

  10. "Flutter custom badge widget on BottomNavigationBar icon"

    Description: Example of using a custom badge widget on a BottomNavigationBar icon.

    Code:

    import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: HomeScreen(), ); } } class HomeScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( bottomNavigationBar: BottomNavigationBar( items: [ BottomNavigationBarItem( icon: BadgeIcon( icon: Icons.notifications, badgeCount: 6, ), label: 'Notifications', ), BottomNavigationBarItem( icon: Icon(Icons.home), label: 'Home', ), ], ), ); } } class BadgeIcon extends StatelessWidget { final IconData icon; final int badgeCount; BadgeIcon({required this.icon, required this.badgeCount}); @override Widget build(BuildContext context) { return Stack( clipBehavior: Clip.none, children: <Widget>[ Icon(icon), if (badgeCount > 0) Positioned( right: -6, top: -6, child: Container( padding: EdgeInsets.all(4), decoration: BoxDecoration( color: Colors.red, borderRadius: BorderRadius.circular(12), ), constraints: BoxConstraints( minWidth: 20, minHeight: 20, ), child: Center( child: Text( '$badgeCount', style: TextStyle( color: Colors.white, fontSize: 12, ), ), ), ), ), ], ); } }

    Description: Uses a custom BadgeIcon widget to add a badge with a dynamic count to a BottomNavigationBar icon.

More Tags

tablename uiwindow floating-accuracy forms-authentication win32com pygame2 multiline windows-10-desktop pypdf hotspot

More Programming Questions

More Mixtures and solutions Calculators

More Livestock Calculators

More Various Measurements Units Calculators

More Gardening and crops Calculators