InkWell in Flutter

18-Sep-2024

Learn how to use InkWell in Flutter to provide visual feedback for user interactions

The InkWell widget is used to create a material design ink splash effect for touch-based interactions. It's commonly used to wrap other widgets to provide a visual response, such as a ripple effect, when the user taps or interacts with the wrapped widget

There Are Some Common Attributes for InkWell

onTapInkWell Tapped
splashColorChange the splash color
borderRadius
Set border radius

Here's a simple example of using a InkWell in Flutter:

File open lib->main.dart file −



import 'package:flutter/material.dart';

void main() {
runApp(
MyApp()
);
}
class MyApp extends StatefulWidget{

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

class _MyAppState extends State<MyApp> {

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue,
title: Text('InkWell Example',
style:TextStyle(fontSize: 20,color: Colors.white)),
),
body: Center(
child:
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [

InkWell(
onTap: () {
print('InkWell Tapped');
},

splashColor: Colors.red, // Change the splash color
borderRadius: BorderRadius.circular(8.0), // Set border radius
child:
Container(
padding: EdgeInsets.all(16.0),
child: Text(
'Click me',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(8.0),
),
),
)
],
),
)

));

}


}





Open Device Manager, run the emulator, and then run the application. Next, check the working output and check the output you declared in your code.


Output:


Comments