IconButton's color displays weirdly - flutter

Question

I had tried to imitate to this below tips to display the IconButton the same as below image:
These are links I had made reference to:
How to set background color for an icon button?
https://dartpad.dev/?null_safety=true&id=6182feb015bbb179e08bf5eb61cbabac
This is my code:
import 'package:cached_network_image/cached_network_image.dart';
import 'package:fakebook_frontend/screens/home/widgets/ProfileAvatar.dart';
import 'package:flutter/material.dart';
import 'package:fakebook_frontend/models/Models.dart';
class OnlineUsers extends StatelessWidget {
final List<User> onlineUsers;
const OnlineUsers({Key? key, required this.onlineUsers}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
height: 80, // mong muốn không fix cứng
color: Colors.white,
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 4),
child: Material(
color: Colors.transparent,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: onlineUsers.length,
itemBuilder: (BuildContext context, int index) {
if(index == 0) {
return Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Stack(
alignment: Alignment(0,-1),
children: [
CircleAvatar(
radius: 22.0,
backgroundImage: CachedNetworkImageProvider(onlineUsers[0].imageUrl),
),
Positioned(
right: 1.0,
bottom: 0.0,
child: Ink(
decoration: ShapeDecoration(
color: Colors.blue,
shape: CircleBorder(),
),
child: IconButton(
padding: EdgeInsets.zero,
constraints: BoxConstraints(),
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
icon: Icon(Icons.add_circle),
iconSize: 16,
color: Colors.white,
onPressed: () {
print("hello");
},
),
),
),
],
),
Text('Tin của bạn', style: TextStyle(fontSize: 10, fontWeight: FontWeight.normal, color: Colors.black45)),
],
);
}
return Padding(
padding: EdgeInsets.symmetric(horizontal: 6),
child: ProfileAvatar(avtUrl: onlineUsers[index].imageUrl, name: onlineUsers[index].name, isActive: true));
}),
),
);
}
}
Please notice to the first IconButton to see which Widget is error.
Please help me to draw the same as that above image. Thank you very much

Answer 1

Is this what you want?
You can achieve it very easy using, following your code it should be something like this:
Positioned(
right: 1.0,
bottom: 0.0,
child: IconButton(
padding: EdgeInsets.zero,
constraints: const BoxConstraints(),
color: Colors.white,
icon: const DecoratedBox(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.blue,
),
child: Icon(
Icons.add,
),
),
splashRadius: 8,
iconSize: 16,
onPressed: () {
print("hello");
},
),
),

Answer 2

The IconData you used here Icon(Icons.add_circle) has a circle around the add icon.
Try: Icon(Icons.add_rounded)