Flutter Image Button with Ripple Effect

The InkWell widget create ripple effect on Image and also provide us onTap() method. onTap works same as onClick and onPress event prese in buttons. To make image button in flutter we will be using InkWell widget with its child Ink.image().

Here is our button Image:

Flutter Network Image Button with Ripple Effect

1. Defining a String with button image URL.

final String buttonURL =
      'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi--IC3Vi3IVIObZvc0JDVQcQSAN9NJZtc2XVlMx3XEoMmikLgsYiAbZyR8dQq-whroK8WfCDPTk-kTpMatcyV5EOnhrmKy8cek3JflHr1notjFTO0VY-r6fkj97P82ZRhuVgGtp_VlzMPz6nt2i8-v4ht-4_gi5uPN8oSfn9IBEkyXeBJlAym1_iI1G5CA/s318/button-image.png';

2. Creating a temporary function with Console a message.

  void temp() {
    print('Image Clicked...');
  }

3. Defining InkWell image wrapped inside Sized Box widget to set width and height of image button.

SizedBox(
      width: 238,
      child: InkWell(
        onTap: temp,
        child: Ink.image(
          image: NetworkImage(buttonURL),
        ),
      ),
    )

Screenshot:

Source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});

  final String buttonURL =
      'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi--IC3Vi3IVIObZvc0JDVQcQSAN9NJZtc2XVlMx3XEoMmikLgsYiAbZyR8dQq-whroK8WfCDPTk-kTpMatcyV5EOnhrmKy8cek3JflHr1notjFTO0VY-r6fkj97P82ZRhuVgGtp_VlzMPz6nt2i8-v4ht-4_gi5uPN8oSfn9IBEkyXeBJlAym1_iI1G5CA/s318/button-image.png';

  void temp() {
    print('Image Clicked...');
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: SafeArea(
                child: Center(
                    child: SizedBox(
      width: 238,
      child: InkWell(
        onTap: temp,
        child: Ink.image(
          image: NetworkImage(buttonURL),
        ),
      ),
    )))));
  }
}

Flutter Local Image Button with Ripple Effect

1. Creating a local string variable and define local image path. Our button image is placed inside Flutter App -> assets -> images folder.

  final String localImage = 'assets/images/local-button-image.png';

2. Creating Inkwell widget with AssetImage widget to call local image.

SizedBox(
      width: 238,
      child: InkWell(
        onTap: temp,
        child: Ink.image(
          image: AssetImage(localImage),
        ),
      ),
    )

Screenshot:

Complete source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});

  final String localImage = 'assets/images/local-button-image.png';

  void temp() {
    print('Image Clicked...');
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: SafeArea(
                child: Center(
                    child: SizedBox(
      width: 238,
      child: InkWell(
        onTap: temp,
        child: Ink.image(
          image: AssetImage(localImage),
        ),
      ),
    )))));
  }
}