Flutter InkWell vs Button vs Material vs GestureDetector

There are several widgets to code Button behaviour in Flutter, besides the variations of Button, there are InkWell, Material & GestureDetector.

1. Material widgets

• Material: A widget that provides a material design background, but without actual behaviour
• MaterialButton: A button with a material design background with present ripple effect.

// Material (Material)
Material(
  elevation: 10,
  child: Container(
    width: 100,
    height: 50,
    color: Colors.blue,
  ),
)

2. Button widgets

• ElevatedButton: A material design button with elevation.
• TextButton: A simple text-based button.
• OutlinedButton: A material design button with an outline.
• FloatingActionButton: A circular button that hovers over the screen.

// ElevatedButton (Button)
ElevatedButton(
  onPressed: () {},
  child: Text('Click me'),
)

2. Ink widgets

• InkWell: A widget that responds to touches by displaying an ink splash.
• InkResponse: Similar to InkWell, but with more customization options.

// InkWell (Ink)
InkWell(
  onTap: () {},
  child: Container(
    width: 100,
    height: 50,
    color: Colors.blue,
  ),
)

4. Gesture widgets

• GestureDetector: A widget that detects gestures, such as taps and swipes, but does NOT introduce ripple effects like the buttons. These widgets may be useful for use cases like – drawing, charts, drag and drop, etc.

When to use each:

• Use Button widgets when you want a simple, pre-designed button with material design characteristics.
• Use Ink widgets when you want to create a custom button with an ink splash effect.
• Use Material widgets when you want to create a custom background with material design characteristics.
• Use GestureDetector when you need more control over gesture detection, such as detecting specific gestures or handling multiple gestures simultaneously.

Here’s an example of how you might use each:

// GestureDetector (Gesture)
GestureDetector(
  onTap: () {},
  child: Container(
    width: 100,
    height: 50,
    color: Colors.blue,
  ),
)

In these examples, we’re using each widget to create a simple button or container that responds to taps. The ElevatedButton and Material widgets provide a material design background, while the InkWell widget creates an ink splash effect. The GestureDetector widget allows us to detect taps and other gestures on the container. It is up to you to actually make a higher level reusable components that actually have paremeters according to common states. One such library may be widget_toolkit,

Ultimately, the choice of which widget to use depends on your specific design requirements and the behavior you want to achieve.