CODEWITHSUNDEEP
flutterflutter-layout
Liew Syet Chau
Liew Syet Chau

Reputation: 163

How to position a dot right next to an icon?

enter image description here

Hi, may I know is there got anyway to set the margin or padding closer to the iconUser, I want to get the circle shape at the top of the iconUser, been tried set margin or padding but still unable to solve this issues. 

   children: <Widget>[
                    SizedBox(width: 10,),
                    GestureDetector(
                      onTap: (){},
                      child: Image.asset("assets/ic_user_center.png",height: 16.0,width: 16.0,)
                    )
                  ],
                ),
                Padding(
                  padding: const EdgeInsets.only(bottom: 8.0),
                  child: Container(
                    width: 5.0,
                    height: 5.0,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: Colors.white
                    ),
                  ),
                )
              ],
            ),

Upvotes: 3

Views: 5625

Answers (4)

omega_mi
omega_mi

Reputation: 718

Another way to achieve that is by place image as BackgroundImage inside Container() decoration property.

Container(
   width: 48,
   height: 48,
   decoration: BoxDecoration(
      shape: BoxShape.circle,
      color: Colors.grey,
      image: DecorationImage(
         image: NetworkImage(imageUrl),
         fit: BoxFit.cover,
      ),
   ),
   child: Align(
      alignment: Alignment.topRight,
      child: Container(
         width: 20,
         height: 20,
         decoration: BoxDecoration(
         shape: BoxShape.circle,
         color: isOnline
            ? const Color(0xFF44B513)
            : Colors.grey,
         border: const Border.fromBorderSide(
            BorderSide(color: Colors.white, width: 3),
         ),
      ),
   ),
),

enter image description here

For negative margin, use Stack() and set clip to Clip.none

Stack(
  clipBehavior: Clip.none,
  children: [
    myIcon(),
    Positioned(
      right: -6,
      top: -6,
      child: Container(
        width: 20,
        height: 20,
        decoration: const BoxDecoration(
          shape: BoxShape.circle,
          color: const Color(0xFF44B513),
        ),
      ),
    ),
  ],
),

Upvotes: 1

Sandeep Peddi
Sandeep Peddi

Reputation: 119

I would recommend to explore Badges package This will be helpful to show online status, verified profile tag, unread messages count or any other easily.

Upvotes: 0

CopsOnRoad
CopsOnRoad

Reputation: 267784

enter image description here

@override
Widget build(BuildContext context) {
  var radius = 20.0;

  return Scaffold(
    body: Center(
      child: SizedBox.fromSize(
        size: Size.fromRadius(radius),
        child: Stack(
          fit: StackFit.expand,
          children: <Widget>[
            FittedBox(
              child: Icon(
                Icons.account_circle,
                color: Colors.red,
              ),
            ),
            Positioned(
              right: 0,
              child: Container(
                decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.black),
                width: radius / 2,
                height: radius / 2,
              ),
            )
          ],
        ),
      ),
    ),
  );
}

Instead of Positioned, you can also use Align with alignment: Alignment.topRight

Upvotes: 4

Philip Dolenko
Philip Dolenko

Reputation: 658

You can use Stack and Positioned to specify where you want to place that white dot

Upvotes: 3

Related Questions