How to Create customise badge in flutter

About flutter:

Flutter is an open-source UI software development kit that is built and developed by Google. It is used to construct cross-platform applications from a single codebase for Android, iOS, Linux, macOS, Windows, Google Fuchsia, and the web. First described in 2015, Flutter was released in May 2017.

How to create customized badge in Flutter

we will discuss how we can implement Customise Badge to show notification count for icons or buttons in Flutter. The badge can be used for various purposes in an application. For example, showing the total number of items in the cart or new messages in chatting apps. This feature is nowadays the most common. It helps in improving user interaction. It is a user-friendly feature, interested users can easily now total new messages or items in the cart, etc.

Table of content:
 

1)Introduction to Badge

2)Creating Project in  Flutter

3) creating customize badge

1)Introduction to Badge

Badge can be used for various purposes in applications. For example, showing the total number of items in the cart or a new message in the chatting app.

2)Creating Project in  Flutter
 

2.1) open android studio and click on file > new >new flutter project

After that you need to provide some basic details about your project like project name, description organization, etc then hit the finish button. It will create a new project in Flutter.

3) creating customise badge
 

3.1) Create new dart file with statefulWidget (to create statefulWidget just type stf and hit enter it will automatically statefulWidget for you enter name to widget)

Code for  customise badge

import 'package:flutter/material.dart';

class CustomiseBadge extends StatefulWidget {

  const CustomiseBadge({Key? key}) : super(key: key);

  @override

  State<CustomiseBadge> createState() => _CustomiseBadgeState();

}

class _CustomiseBadgeState extends State<CustomiseBadge> {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      body:SafeArea(

        child:Center(

          child: Stack(

            children: <Widget>[

              Image.asset(

                'assets/image_name.png',

                height: 30,

                width: 30,

              ),

              new Positioned(

                right: 1,

                child: new Container(

                    padding: EdgeInsets.all(3),

                    decoration: new BoxDecoration(

                      color: Colors.orange,

                      borderRadius: BorderRadius.circular(6),

                      border: Border.all(

                        color: Colors.white,

                        width:1,

                      ),

                    ),

                    constraints: BoxConstraints(

                      minWidth: 15,

                      minHeight: 15,

                    ),

                    child: Text('0',

                      style: new TextStyle(

                        color: Colors.white,

                        fontSize: 8,

                      ),

                      textAlign: TextAlign.center,

                    )

                ),

              )

            ],

          ),

        ),

      ),

    );

  }

}

// you can replace image widget with button

Code of Main.dart file

import 'package:badge/customise_badge.dart';

import 'package:flutter/material.dart';

void main() {

  runApp(const MyApp());

}

class MyApp extends StatelessWidget {

  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Customise Badge',

      theme: ThemeData(

        primarySwatch: Colors.blue,

      ),

      home: CustomiseBadge(),

    );

  }

}