IconButton's color displays weirdly

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");
                              },
                            ),
                          ),