InkWell Widget  and Attributes

InkWell Widget and Attributes

ยท

3 min read

In the realm of Flutter UI development, the InkWell widget serves as a gateway to creating interactive and touch-friendly user interfaces. If you're aiming to add a splash of material design to your app and enable delightful touch interactions, the InkWell widget is your go-to solution. In this blog post, let's dive into the world of InkWell and explore its attributes through practical examples.

The InkWell widget in Flutter provides a material ink splash effect on touch interactions, enhancing the user experience and making the app feel more dynamic. It's particularly useful for clickable or tappable elements within your UI, such as buttons or cards.

Basic Implementation:

Let's start with a simple example to illustrate the basic usage of the InkWell widget:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter InkWell Example'),
        ),
        body: Center(
          child: InkWell(
            onTap: () {
              // Handle tap
              print('InkWell tapped!');
            },
            onLongPress: (){
              print('Long Pressed');
            },
            child: Container(
              padding: EdgeInsets.all(16),
              child: Text('Tap me!'),
            ),
          ),
        ),
      ),
    );
  }
}

In this example, an InkWell wraps around a Container containing a text widget. The onTap callback is triggered when the InkWell is tapped, allowing you to handle the tap event.

Key Attributes of InkWell:

Now, let's explore some essential attributes that provide control over the appearance and behavior of the InkWell widget:

1. onTap:

  • The onTap property allows you to specify a callback function that will be invoked when the InkWell is tapped.

2. onLongPress:

  • Similarly, the onLongPress property lets you define a callback for a long press interaction.

3. highlightColor:

  • Customize the color of the ink splash effect using the highlightColor property.

4. splashColor:

  • The splashColor property allows you to set the color of the ink splash when the InkWell is tapped.

5. radius:

  • Adjust the radius of the ink splash effect with the radius property.

6. borderRadius:

  • If you want to give the InkWell a rounded appearance, use the borderRadius property.

Comprehensive Example:

Let's integrate these attributes into a comprehensive example:

InkWell(
  onTap: () {
    // Handle tap
    print('Customized InkWell tapped!');
  },
  onLongPress: () {
    // Handle long press
    print('Long press on InkWell!');
  },
  highlightColor: Colors.green,
  splashColor: Colors.yellow,
  radius: 30,
  borderRadius: BorderRadius.circular(10),
  child: Container(
    padding: EdgeInsets.all(16),
    child: Text('Customized InkWell'),
  ),
)

In this enhanced example, we've customized the InkWell with additional attributes such as a custom highlightColor, splashColor, radius, and borderRadius. Feel free to experiment with these attributes to achieve the desired visual outcome in your Flutter applications.

By incorporating the InkWell widget and exploring its attributes, you can effortlessly add interactive and touch-friendly elements to your UI, enhancing the overall user experience.

Did you find this article valuable?

Support Vinit Mepani (Flutter Developer) by becoming a sponsor. Any amount is appreciated!

ย