IconButton颜色显示异常，请求复刻目标样式的解决方案

需求目标 #

需要实现如下样式的IconButton：

当前异常效果 #

当前代码实现的IconButton显示异常，效果如下：

我的代码 #

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

解决方案 #

问题出在IconButton自带默认布局约束，即使手动设置constraints也难以完全精准控制尺寸，改用GestureDetector+Container+Icon的组合可以完全自定义样式，贴合目标效果。修改后的代码片段如下：

// 替换原来的Positioned内的Ink和IconButton部分
Positioned(
  right: 1.0,
  bottom: 0.0,
  child: GestureDetector(
    onTap: () {
      print("hello");
    },
    child: Container(
      width: 18,
      height: 18,
      decoration: const BoxDecoration(
        color: Colors.blue,
        shape: BoxShape.circle,
      ),
      child: const Icon(
        Icons.add,
        size: 12,
        color: Colors.white,
      ),
    ),
  ),
),

修改说明 #

1. 用GestureDetector替代IconButton实现点击事件，避免IconButton的默认布局限制
2. 通过Container精准控制蓝色圆形背景的尺寸（18x18）
3. 替换图标为Icons.add（目标图为纯加号，而非带外圈的add_circle），并调整图标尺寸为12，让整体比例更协调
4. 去掉多余的Ink组件，直接通过Container设置背景色和圆形形状

内容的提问来源于stack exchange，提问作者Minh Tiến Đào