Flutter – Ripple Effect
In Flutter, the InkWell widget is used to perform ripple animation when tapped. This effect is common for all the app components that follow the material design guideline. A ripple animation in its simplest term can be understood as a black (default) bar at the bottom of an app that displays some data when a tap is done on the respective component of the application.
Let’s better understand these ripple effects using a simple application. To build such an app follow the below steps:
- Create a simple widget that can be tapped.
- Use the InkWell widget to add callback on the tap action.
Let’s discuss them in detail.
Creating a simple widget:
Let’s create a simple widget that has a button that can be tapped using the below code:
Dart
Scaffold.of(context).showSnackBar(SnackBar( content: Text( 'Hello Beginner!' ), )); }, child: Container( padding: EdgeInsets.all(12.0), child: Text( ' Button' ), ), |
Using InkWell widget:
Now wrap the widget that we just created above with the InkWell widget as shown below:
Dart
InkWell( onTap: () { Scaffold.of(context).showSnackBar(SnackBar( content: Text( 'Hello Beginner!' ), )); }, child: Container( padding: EdgeInsets.all(12.0), child: Text( 'Button' ), ), ); |
Now let’s build the complete app from the below-given source code.
Complete Source Code:
Dart
import 'package:flutter/material.dart' ; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { final title = 'w3wiki' ; return MaterialApp( title: title, home: MyHomePage(title: title), ); } } class MyHomePage extends StatelessWidget { final String title; MyHomePage({Key key, this .title}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(title), backgroundColor: Colors.green, ), body: Center(child: MyButton()), ); } } class MyButton extends StatelessWidget { @override Widget build(BuildContext context) { return InkWell( onTap: () { Scaffold.of(context).showSnackBar(SnackBar( content: Text( 'Hello Beginner!' ), )); }, child: Container( padding: EdgeInsets.all(12.0), color: Colors.green, child: Text( ' Button' ), ), ); } } |
Output:
Contact Us