CODEWITHSUNDEEP
androidflutterpadding
AdnanAsali
AdnanAsali

Reputation: 139

Flutter , IconButton not working when using alignment or margin or padding

 appBar: new AppBar(
      leading: Stack(
        children: <Widget>[
          IconButton(
            icon: const Icon(Icons.arrow_forward),
            onPressed: () {
              _nextPage(1);
            },
            tooltip: 'Next',
            padding: EdgeInsets.only(left: 360.0),
          ),
          IconButton(
            icon: const Icon(Icons.arrow_back),
            onPressed: () {
              _nextPage(-1);
            },
            tooltip: 'Previous',
          ),
        ],
      ),
     ),

Blockquote

The two IconButtons , the first one doesn't work but the second does , when you remove the padding it works fine , How should i do this ? , and using Containers wouldn't help as much because they take space too , so what to do ?

Upvotes: 3

Views: 10005

Answers (1)

diegoveloper
diegoveloper

Reputation: 103421

You have many errors there .

First You are using a Stack, stack will put your widgets over the other, so you have to specify the position using Positioned or Align.

Second If you check the source code , you'll find there is a width limit for the leading Widget.

if (leading != null) {
  leading = new ConstrainedBox(
    constraints: const BoxConstraints.tightFor(width: _kLeadingWidth),
    child: leading,
  );
}

where _kLeadingWidth = 56

1st Solution

Replace your Stack widget by Row widget, if you do this, you'll get an overflow exception because the size of your two IconButtons exceed the width > 56.

Final Solution (you can find more)

Remove your IconButton and use an Icon wrapped by InkWell (in order to receive the tap)

      return Scaffold(
        appBar: new AppBar(
          leading: Row(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              InkWell(
                  onTap: () => print("1"),
                  child: Padding(
                      padding: EdgeInsets.all(2.0),
                      child: const Icon(Icons.arrow_forward))),
              InkWell(
                  onTap: () => print("2"),
                  child: Padding(
                      padding: EdgeInsets.all(2.0),
                      child: const Icon(Icons.arrow_back))),
            ],
          ),
        ),
      );

Upvotes: 6

Related Questions