Generic Image Icon Button?

Nicholas Manning

unread,

May 25, 2018, 12:32:29 AM5/25/18

to Flutter Dev

Greetings,

I'd like to know if there is a better way to create an icon button with an image, not using Material Design / Cupertino widgets.

The way I typically do this in iOS is I define a comfortable "tap area", roughly a 35 - 50px square, that is greater than the size of the button icon.

Here is what I've come up with, but is there a better way to do this? I see there is an "IconButton" widget but this forces me to use an icon font rather than an image asset.

  Widget _actionButton(String iconFilename, GestureTapCallback onTap) {
    return GestureDetector(
        onTap: onTap,
        child: Container(
            decoration: BoxDecoration(
              color: Colors.red,
            ),
            constraints: BoxConstraints.tightFor(
              width: 50.0,
              height: 50.0,
            ),
            alignment: Alignment.center,
            child: Container(
                constraints: BoxConstraints(minWidth: 35.0, maxWidth: 35.0),
                decoration: BoxDecoration(
                    color: Colors.blue,
                    image: new DecorationImage(
                      image: new AssetImage(iconFilename),
                      fit: BoxFit.contain,
                      alignment: Alignment.center,
                    )))));
  }

Ian Hickson

unread,

May 25, 2018, 1:06:50 AM5/25/18

to Nicholas Manning, Flutter Dev

IconButton takes any widget as its "icon". You can use Icon, which will use the MaterialIcons font, or you can use ImageIcon, which takes any image, or you can use whatever else you want, such as the Container from your sample code. It doesn't force you to use an icon font.

--
You received this message because you are subscribed to the Google Groups "Flutter Dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

--
Ian Hickson

😸

Nicholas Manning

unread,

May 25, 2018, 10:49:33 AM5/25/18

to Ian Hickson, Flutter Dev

Ian thanks. That clarifies things. What about though constraining the icon to a specific size while keeping a larger tap area around it?

To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
--
Ian Hickson
😸

Ian Hickson

unread,

May 25, 2018, 1:37:56 PM5/25/18

to Nicholas Manning, Flutter Dev

The ImageIcon and IconButton classes work together to do that automatically, I believe.

To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
--
Ian Hickson
😸

--

--
Ian Hickson

😸

Reply all

Reply to author

Forward