Flutter , IconButton not working when using alignment or margin or padding
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))),
],
),
),
);
AdnanAsali
Updated on December 06, 2022Comments
-
AdnanAsali over 1 year
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 ?