How to position iconbuttons closer? - flutter

Question

I would like to make a trailing button bar at the end of my title. How can I position the buttons closer to each other?
https://szirom.hu/Fisha/so.jpg
I assume they are completily next to each other but the inner padding is too big imo.
ButtonTheme (
padding: EdgeInsets.all(0),
child: ButtonBar (
alignment: MainAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
IconButton(
icon: Icon(Icons.delete),
onPressed:() {
_deleteDialog(context, campaigns, i);
}),
IconButton(
icon: Icon(Icons.edit,),
onPressed: () async {
....
}
),
],
),
)
Can I solve this with IconButtons or should I create buttons from scratch?

Answer 1

IconButton have is wrapped in an ConstrainedBox with minHeight&minWidth set to 48 ,so you'll have a modify the constrains.
something like this ...
CustomIconButton(
icon: Icon(Icons.delete),
onPressed: () {},
padding: EdgeInsets.zero,
constraints: BoxConstraints(
minHeight: 20.0,
minWidth: 30.0,
),
),
The code for CustomIconButton...
import 'dart:math' as math;
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
class CustomIconButton extends StatelessWidget {
const CustomIconButton(
{Key key,
this.iconSize = 24.0,
this.padding = const EdgeInsets.all(8.0),
this.alignment = Alignment.center,
#required this.icon,
this.color,
this.highlightColor,
this.splashColor,
this.disabledColor,
#required this.onPressed,
this.tooltip,
#required this.constraints})
: assert(iconSize != null),
assert(padding != null),
assert(alignment != null),
assert(icon != null),
assert(constraints != null),
super(key: key);
final double iconSize;
final BoxConstraints constraints;
final EdgeInsetsGeometry padding;
final AlignmentGeometry alignment;
final Widget icon;
final Color color;
final Color splashColor;
final Color highlightColor;
final Color disabledColor;
final VoidCallback onPressed;
final String tooltip;
#override
Widget build(BuildContext context) {
assert(debugCheckHasMaterial(context));
Color currentColor;
if (onPressed != null)
currentColor = color;
else
currentColor = disabledColor ?? Theme.of(context).disabledColor;
Widget result = Semantics(
button: true,
enabled: onPressed != null,
child: ConstrainedBox(
constraints: constraints,
child: Padding(
padding: padding,
child: SizedBox(
height: iconSize,
width: iconSize,
child: Align(
alignment: alignment,
child: IconTheme.merge(
data: IconThemeData(size: iconSize, color: currentColor),
child: icon),
),
),
),
),
);
if (tooltip != null) {
result = Tooltip(message: tooltip, child: result);
}
return InkResponse(
onTap: onPressed,
child: result,
highlightColor: highlightColor ?? Theme.of(context).highlightColor,
splashColor: splashColor ?? Theme.of(context).splashColor,
radius: math.max(
Material.defaultSplashRadius,
(iconSize + math.min(padding.horizontal, padding.vertical)) * 0.7,
// x 0.5 for diameter -> radius and + 40% overflow derived from other Material apps.
),
);
}
#override
void debugFillProperties(DiagnosticPropertiesBuilder properties) {
super.debugFillProperties(properties);
properties.add(DiagnosticsProperty<Widget>('icon', icon, showName: false));
properties.add(ObjectFlagProperty<VoidCallback>('onPressed', onPressed,
ifNull: 'disabled'));
properties.add(
StringProperty('tooltip', tooltip, defaultValue: null, quoted: false));
}
}
Hope it helps!