Question 79898 in Flutter Question posted in
The official Flutter documentation can be found here.

IconButton's color displays weirdly – Flutter

I had tried to imitate to this below tips to display the IconButton the same as below image:

enter image description here

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.
enter image description here

enter image description here

Please help me to draw the same as that above image. Thank you very much

Tags:

2

Answers


  1. 0

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

    Try: Icon(Icons.add_rounded)

    Login or Signup to reply.
  2. 0

    Is this what you want?

    enter image description here

    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");
                              },
                            ),
                          ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search