How to Create Image Buttons in Flutter (4 examples)

This practical article walks you through a couple of different ways to create image buttons in Flutter (I use network images for the upcoming examples so that you can readily run the code without any extra setup. However, you can replace them with your local asset images if necessary.)

Using InkWell and Ink.image

If you want to create an image button that responds to touch with a ripple/splash effect, add the image using the Ink.image constructor and wrap it inside an Inkwell widget.

Example

This example implements an image button that shows a growing circle initially centered on the tap location. When this button gets tapped, a snackbar will show up at the bottom of the screen. Here’s how it works:

The code:

Scaffold(
      appBar: AppBar(title: const Text('KindaCode.com')),
      body: Center(
        // add an elevation
        child: Material(
          elevation: 6,
          // Size the button
          child: SizedBox(
            width: 300,
            height: 200,
            // Inkwell
            child: InkWell(
              radius: 100,
              // display a snackbar on tap
              onTap: () {
                ScaffoldMessenger.of(context).clearSnackBars();
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(
                    content: Text('Hello There!'),
                    duration: Duration(milliseconds: 1500),
                  ),
                );
              },
              // implement the image with Ink.image
              child: Ink.image(
                fit: BoxFit.cover,
                image: const NetworkImage(
                    'https://www.kindacode.com/wp-content/uploads/2022/07/bottle.jpeg'),
              ),
            ),
          ),
        ),
      ),
);

Using GestureDetector

If you don’t need any effects when your image button gets tapped (e.g. when you want to navigate to another screen), using a GestureDetector widget is a good choice. The code is shorter and cleaner.

Example

This code creates an image button that triggers a function on tap but shows no effects:

Scaffold(
      appBar: AppBar(title: const Text('KindaCode.com')),
      body: Center(
        child: GestureDetector(
          onTap: () {
            debugPrint('The image button has been tapped');
          },
          child: SizedBox(
            width: 300,
            height: 100,
            child: Image.network(
              'https://www.kindacode.com/wp-content/uploads/2022/07/rocket.png',
              fit: BoxFit.cover,
            ),
          ),
        ),
      ),
);

Screenshot:

Using IconButton to Make Round Image Button

If you want to create a circular image button with a splash effect on pressed, using the IconButton widget Is very quick (you need to use an image that fits the shape of the button).

Example:

Scaffold(
      appBar: AppBar(title: const Text('KindaCode.com')),
      body: Center(
        child: IconButton(
          splashRadius: 100,
          iconSize: 200,
          icon: Ink.image(
            image: const NetworkImage(
                'https://www.kindacode.com/wp-content/uploads/2022/07/lemon.png'),
          ),
          onPressed: () {
            // do something when the button is pressed
            debugPrint('Hi there');
          },
        ),
      ),
);

Output:

Button with Image and Text

This example creates an image button with a text label. We’ll use the InkReponse widget to make it clickable and add a ripple effect.

Preview:

The Complete Code:

// main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'KindaCode.com',
      theme: ThemeData(
        primarySwatch: Colors.pink,
      ),
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('KindaCode.com')),
      body: Center(
        child: SizedBox(
          width: 300,
          height: 340,
          child: Card(
            elevation: 6,
            color: Colors.amber.shade100,
            semanticContainer: true,
            // Implement InkResponse
            child: InkResponse(
              containedInkWell: true,
              highlightShape: BoxShape.rectangle,
              onTap: () {
                // Clear all showing snack bars
                ScaffoldMessenger.of(context).clearSnackBars();
                // Display a snack bar
                ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
                  content: Text("Let's me sleep. Don't touch me!"),
                ));
              },
              // Add image & text
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Ink.image(
                      width: double.infinity,
                      height: 240,
                      fit: BoxFit.cover,
                      image: const NetworkImage(
                          'https://www.kindacode.com/wp-content/uploads/2022/06/big-boss.jpeg')),
                  const Text(
                    'The Big Boss',
                    style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                  ),
                  const SizedBox(height: 10)
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Wrapping Up

We’ve examined a bunch of examples that demonstrate how to construct image buttons in Flutter. Choose from them the one that suits your needs. Try to modify the code, add some things, remove some things, and see what happens afterward.

Flutter is fantastic and its realm is vast. There are so many things to learn. Keep yourself on the rails by taking a look at the following articles:

• Working with MaterialBanner in Flutter
• Flutter: Floating Action Button examples (basic & advanced)
• Working with ElevatedButton in Flutter
• Flutter BottomAppBar: Tutorial & Examples
• How to create Circle Charts (Pie Charts) in Flutter
• Flutter + Firebase Storage: Upload, Retrieve, and Delete files

You can also tour around our Flutter topic page or Dart topic page for the most recent tutorials and examples.