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
onTap | InkWell Tapped |
splashColor | Change 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: