Starting with Flutter: Adding interactivity
Tags: flutter, beginners, dart, mobile
Published: 2021-02-03 16:03:39

Another really important part of Flutter development is user interaction. You know, that thing that makes your app... interactive?

Here we'll talk about buttons and how to make any widget "touchable".

Let's start with the most basic interaction widget of all: **buttons**. A button can have many forms, Android users are ore used to very rounded widgets with ripple effect, iOS users instead use more often flat buttons without borders or rounded rectangles with text-changing colors on touch. You can find all buttons Flutter can render [here](https://flutter.dev/docs/development/ui/widgets/material#Buttons). Let's see a little example with two "weird" buttons: DropdownButton and IconButton.

**DropdownButton** is a component which renders a simple underlined button which on click shows a dropdown with a list of strings. You'll need to create a list of `DropdownMenuItems` starting from your input. Clicking on an item triggers the `onChanged` function.

```dart
List<String> _listOfItems = List();
_listOfItems.add("One");
_listOfItems.add("Two");
_listOfItems.add("Three");

return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        child: DropdownButton(
          hint: Text("Tap Here"),
          items: _listOfItems.map((item) {
            return DropdownMenuItem(
              child: new Text(
                item,
              ),
              value: item,
            );
          }).toList(),
          icon: Icon(
            Icons.arrow_drop_down,
            color: Colors.red,
          ),
          onChanged: (value) {
            //Do something
          },
        ),
      )
    );
```

This code shows this simple button:

![Not clicked](https://dev-to-uploads.s3.amazonaws.com/i/smyh13kas7bt3k0i8yfz.png)


![Clicked](https://dev-to-uploads.s3.amazonaws.com/i/du4id6t0b41ef5ilecqv.png)

IconButton just represents a tappable icon, you can easily use it as "home" icon for the toolbar:

```dart
appBar: AppBar(
              backgroundColor: Colors.red,
              leading: IconButton(
                    icon: Icon(Icons.home),
                    onPressed: () {
                      //Do something
                    },
                    color: Colors.white,
                  ),
            ),
```

Shows this AppBar:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hxdql0i2m9efto2y388v.png)

You can choose any icon in the `Icons` package or create your own with the Icon widget.

A great thing about Flutter is to **add touchable capability on pretty much any widget** really easily. We already saw how to do a list on a previous article (check it out [here](https://dev.to/theotherdevs/starting-with-flutter-lists-l29)), now we'll see how to add interaction to those items.

We'll use `GestureDetector` which is a simple class that has a lot of parameters but we'll just need two of them: `onTap` and `child`. Very easily child is the widget that we want to add touch implementation, onTap is the function that the action will trigger:

```dart
return GestureDetector(
      onTap: () {
        final snackBar = SnackBar(content: Text("Tap!"));
        Scaffold.of(context).showSnackBar(snackBar);
      },
      child: Row(
       //My widget 
    );
)
```

Here's the result:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qw7i7kwxb5rean46ozk6.png)

Those were just some examples on UI interaction, the great thing about Flutter is the extreme personalization of any component and the urge to create custom ones. So go out and create great widgets developers! The future is yours!!