Flutter Badge Widget

mobile academy

Badge Widget

import 'dart:io';
import 'package:ecom_app/features/cart/presentation/controller/cart_controller.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class CartBadgeWidget extends ConsumerWidget {
  final Widget? child;
  const CartBadgeWidget({Key? key, this.child}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final badgeCount = ref.watch(
      cartControllerProvider.select((value) => value.badgeCount),);

    return Badge(
      largeSize: Platform.isIOS ? 20 : null,
      isLabelVisible: badgeCount > 0 ? true : false,
      label: badgeCount < 1 ? const SizedBox.shrink() : Text('$badgeCount'),
      child: child,
    );
  }
}

BottomNavigation


import 'package:ecom_app/base/base_consumer_state.dart';
import 'package:ecom_app/features/dashboard/presentation/controller/dashboard_controller.dart';
import 'package:ecom_app/features/dashboard/presentation/ui/widget/cart_badge_widget.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';

class BottomNavigationWidget extends ConsumerStatefulWidget {
  const BottomNavigationWidget({Key? key}) : super(key: key);

  @override
  ConsumerState<BottomNavigationWidget> createState() => _BottomNavigationWidgetState();
}

class _BottomNavigationWidgetState extends BaseConsumerState<BottomNavigationWidget> {
  @override
  Widget build(BuildContext context) {
    final index = ref.watch(dashboardControllerProvider.select((value) => value.pageIndex));

    return BottomNavigationBar(
      currentIndex: index,
      onTap: (value) => _onItemTapped(value),      
      showUnselectedLabels: true,      
      items: const [
        BottomNavigationBarItem(
          activeIcon: Icon(Icons.home),
          icon: Icon(Icons.home),
          label: 'Home',
        ),
        BottomNavigationBarItem(
          activeIcon: Icon(Icons.shop),
          icon: Icon(Icons.shop_rounded),
          label: 'Product',
        ),
        BottomNavigationBarItem(
          activeIcon: CartBadgeWidget(child: Icon(Icons.shopify),),
          icon: CartBadgeWidget(child: Icon(Icons.shopping_bag)),
          label: 'Cart',
        ),
        BottomNavigationBarItem(
          activeIcon: Icon(Icons.settings),
          icon: Icon(Icons.settings_applications),
          label: 'Setting',
        ),

      ],
    );
  }

  
  void _onItemTapped(int index) {
    ref.read(dashboardControllerProvider.notifier).setPageIndex(index);

    switch (index) {
      case 0:
        GoRouter.of(context).go('/');
        break;
      case 1:
        GoRouter.of(context).go('/product');
        break;
      case 2:
        GoRouter.of(context).go('/cart');
        break;
      case 3:
        GoRouter.of(context).go('/setting');
        break;
      default:
    }

  }
}
Select your currency
USD United States (US) dollar