Notification Badge Widget in Flutter

ถ้าแอพของเรามีการแจ้งเตือนแน่นอนสิ่งที่ขาดไม่ได้คือ Badge วันนี้จะมาแนะนำการสร้าง Badge Widget ง่ายๆ 3 วิธีด้วยกัน มีแบบไหนกันบ้างไปดูกันเล๊ยยย+++

Chip

ใช้ Chip ซึ่งเป็น widget สำหรับการปรับแต่งที่มีมาให้อยู่แล้ว

Chip(
  label: Text('$count',style:  
     TextStyle(
       color: Colors.white, 
       fontSize: 12.0)),
   backgroundColor: Colors.red,
);

BoxShape.circle

ใช้ Container แล้วปรับแต่งโดยใช้ decoration โดยกำหนด shape เป็น BoxShape.circle ผ่าน BoxDecoration

Container(
   padding: EdgeInsets.symmetric(horizontal: 6.0, vertical: 2.0),
   decoration: BoxDecoration(
      shape: BoxShape.circle, 
      color: Colors.red
   ),
   alignment: Alignment.center,
      child: Text('$count',
        style: TextStyle(
          color: Colors.white, 
          fontSize: 12.0
      )
   ),
);

BoxConstraints

ใช้ Container แล้วปรับแต่งโดยใช้ constraints โดยกำหนด minWidth, minHeight ผ่าน BoxConstraints

Container(
   padding: EdgeInsets.all(2),
   decoration: BoxDecoration(
      color: Colors.red,
      borderRadius: BorderRadius.circular(30),
   ),
   constraints: BoxConstraints(
      minWidth: 20.0,
      minHeight: 20.0,
    ),
    child: Center(
      child: Text('1',
          style: TextStyle(
            color: Colors.white, 
            fontSize: 12.0
          )
      ),
   ),
);

หรืออยากใช้แบบๆง่ายก็โหลด package badges จาก pub.dev มาใช้ได้เลยครับ :)