CODEWITHSUNDEEP
flutter
mak
mak

Reputation: 63

IconButton does not align with clickable area

I have a simple icon button as presented below, for somereason the clickable area do not align with the icon, no matter what I do. tried to run the app on Linux, Web and Android.. all with the same issue.

image below

        home: Scaffold(
            body: Column(children: [
      IconButton(
        onPressed: () => {},
        icon: Icon(
          Icons.highlight_off,
          size: 70,
          color: Colors.red,
        ),
      ),
    ])));

A simplified version of what my code looks like:

MaterialApp(
        home: Scaffold(
            body: Center(
      child: Stack(
          alignment: AlignmentDirectional.center,
          overflow: Overflow.visible,
          children: [
            Container(
              width: 500,
              height: 300,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20.0),
                  color: Colors.white,
                  boxShadow: [
                    BoxShadow(
                      color: Colors.grey.withOpacity(0.5),
                      spreadRadius: 5,
                      blurRadius: 7,
                      offset: Offset(0, 3),
                    ),
                  ]),
            ),
            Positioned(
              top: -40,
              right: 5,
              child: IconButton(
                onPressed: () => {},
                icon: Icon(
                  Icons.highlight_off,
                  size: 70,
                  color: Colors.red,
                ),
              ),
            ),
          ]),
    )));

Upvotes: 1

Views: 1484

Answers (1)

Hamza
Hamza

Reputation: 1636

Here you go.

The reason this was happening, your iconSize is very big. So, according to this you need to make sure your button itself adjust its size. For that you can use BoxConstraints to provide it minHeight.

import 'package:flutter/material.dart';

void main() async {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Center(
          child: Stack(
              alignment: AlignmentDirectional.center,
              overflow: Overflow.visible,
              children: [
                Container(
                  width: 500,
                  height: 300,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(20.0),
                      color: Colors.white,
                      boxShadow: [
                        BoxShadow(
                          color: Colors.grey.withOpacity(0.5),
                          spreadRadius: 5,
                          blurRadius: 7,
                          offset: Offset(0, 3),
                        ),
                      ]),
                ),
                Positioned(
                  top: -40,
                  right: 5,
                  child: IconButton(
                    constraints: BoxConstraints(
                      minHeight: 100,
                    ),
                    onPressed: () => {},
                    icon: Icon(
                      Icons.highlight_off,
                      size: 70,
                      color: Colors.red,
                    ),
                  ),
                ),
              ]),
        ),
      ),
    ),
  );
}

Upvotes: 2

Related Questions