skip to Main Content
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

2

Answers


  1. -Change
    mainAxisAlignment: MainAxisAlignment.spaceBetween: Added to align the NotificationWidget at both ends. – check Image
    enter image description here
    Removed Spacer(): Removed the Spacer() widget and replaced its functionality with MainAxisAlignment.spaceBetween.

    Login or Signup to reply.
  2. Try to replace your NotificationWidget with given widget. Hope it helps…

    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(
        padding: EdgeInsets.zero,
        constraints: BoxConstraints(),
          onPressed: () {},
          icon: Container(
            width: 16,
            height: 16,
            decoration: BoxDecoration(
              border: Border.all(
                color: Colors.green,
              ),
              borderRadius: BorderRadius.circular(120),
            ),
          ),
        );
      }
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search