How should I use space so it works on my code in row. I'm using flutter between

Question

import 'package:flutter/material.dart';

class TrackerWidget extends StatelessWidget {
  const TrackerWidget({
    super.key,
    required this.bgIcon,
    required this.title,
    required this.time,
    required this.size,
    this.isNotificationEnabled = false,
    this.isDone = false,
    required this.timeEnum,
  });

  final String bgIcon;
  final String title;
  final String time;
  final double size;
  final bool isNotificationEnabled;
  final bool isDone;
  final String timeEnum;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: size,
      height: size,
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage(bgIcon),
          fit: BoxFit.cover,
        ),
        borderRadius: BorderRadius.circular(4),
      ),
      padding: EdgeInsets.all(7),
      child: Stack(
        fit: StackFit.expand,
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Container(
                height: 17,
                width: double.infinity,
                color: Colors.red.withOpacity(0.2),
                padding: EdgeInsets.zero,
                constraints: BoxConstraints(),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    NotificationWidget(
                      isNotificationEnabled: isNotificationEnabled,
                      time: timeEnum,
                    ),
                    const Spacer(),
                    NotificationWidget(
                      isNotificationEnabled: isNotificationEnabled,
                      time: timeEnum,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class NotificationWidget extends StatelessWidget {
  const NotificationWidget({
    super.key,
    required this.isNotificationEnabled,
    required this.time,
  });

  final bool isNotificationEnabled;
  final String time;

  @override
  Widget build(BuildContext context) {
    return IconButton(
      onPressed: () {},
      padding: EdgeInsets.all(1),
      // constraints: const BoxConstraints(),
      icon: Container(
        width: 16,
        height: 16,
        decoration: BoxDecoration(
          border: Border.all(
            color: Colors.green,
          ),
          borderRadius: BorderRadius.circular(120),
        ),
      ),
    );
  }
}

I've written above code to achieve below image What I've achieved As you can see I'm adding spacer between notification widget, but they're not going to edge of widgets. Red container I've added just to see where are constraints. What's wrong? Please help

I've expected that two circles will be at the edges of widget. I've been on latest version of flutter. Thought maybe there's problem and already downgraded to 3.22 version

Answer 1

The problem is with the IconButton I don't know exactly why it's not working try using GestureDetector

    class NotificationWidget extends StatelessWidget {
  const NotificationWidget({
    super.key,
    required this.isNotificationEnabled,
    required this.time,
  });

  final bool isNotificationEnabled;
  final String time;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {},
      child: Container(
        width: 16,
        height: 16,
        decoration: BoxDecoration(
          border: Border.all(
            color: Colors.green,
          ),
          borderRadius: BorderRadius.circular(120),
        ),
      ),
    );
  }
}