Flutter InkWell Implementation : Know in 2 Steps only

Flutter InkWell is a widget that responds to the user touch actions. You can create InkWell widget using the InkWell class. There are many properties of it that allow you to manipulate it. Also, it has many gesture functions like onTap,onDoubleTap, onLongPress e.t.c that allow you to make any widget as a clickable widget. In this entire tutorial, you will know how to create a Flutter InkWell widget and manipulate it using various properties.

Problem Statement

Create a Container and make it clickable using the InkWell widget.

Steps to Implement Flutter InkWell() widget

In this section, you will know the various steps for creating a Container that will be able to click using the InkWell() widget. Follow every step for more understanding.

Step 1: Create a Container

The first step is to create a Container. In flutter, you can create it using the Container() widget. The container widget contains some text inside it as a child. The whole thing Container and text are aligned to the center of the screen.

Execute the below lines of code to create a container.

import 'package:flutter/material.dart';

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

  @override
  _InkWellAppState createState() => _InkWellAppState();
}

class _InkWellAppState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter InkWell App"),
        ),
        body: Center(
          child: Container(
            width: 100,
            height: 100,
            color: Colors.redAccent,
            alignment: Alignment.center,
            child: Text(
              "Click Me",
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}

void main() {
  return runApp(InkWellApp());
}

Output

Step 2: Wrap the Container with Flutter InkWell

The second step is to wrap the container using the flutter InkWell() widget. Inside the InkWell() widget, define the onTap() gesture function. It will create a Splash effect for the container when you click on it.

Look out the onTap() gesture function.

onTap: () {},
            child: Container(
              width: 100,
              height: 100,
              color: Colors.transparent,
              alignment: Alignment.center,
              child: Text(
                "Click Me",
                style: TextStyle(color: Colors.grey),
              ),
            ),

You can see I have wrapped the Container widget with InkWell() and also defined the onTap() gesture function. One thing you should note is that you have to change the color of the container to transparent to look out for the splash color on clicking.

The color of the splash is by default grey in color. But you can change it using the highlightColor attribute. For example, I want to change the color of the splash to black, then I will add the following code.

highlightColor: Colors.black,

There are other attributes that allow you to manipulate the InkWell button these are focusColor, borderRadius e.t.c. You can read the official Flutter Documenataion to more about them.

That’s all for now. These are steps for implementing the flutter InkWell widget. I hope you have liked this tutorial. If you have any doubt and want us to clear your doubt then you can contact us for more help.

Below is the complete code for the example described here.

import 'package:flutter/material.dart';

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

  @override
  _InkWellAppState createState() => _InkWellAppState();
}

class _InkWellAppState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter InkWell App"),
        ),
        body: Center(
          child: InkWell(
            onTap: () {},
            highlightColor: Colors.black,
            child: Container(
              width: 100,
              height: 100,
              color: Colors.transparent,
              alignment: Alignment.center,
              child: Text(
                "Click Me",
                style: TextStyle(color: Colors.grey),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

void main() {
  return runApp(InkWellApp());
}

Output