14 Interactivity and Gestures
# Resources
Flutter Animation Cheatsheet (opens new window)
Net Ninja Flutter Animation Tutorial (opens new window) from Aug 2020. A little outdated but the majority of the concepts still apply completely.
# Dismissable
The Dismissable widget is one that we can wrap around ListTile widgets. It is used to swipe away things like ListTile. The user can touch the ListTile and slide their finger left or right to reveal hidden controls behind the tile, like a delete IconButton. It takes child:, background:, secondaryBackground, and key: ValueKey(myString) properties. The child will be your ListTile. The background and secondaryBackground properties will be the colours shown behind the ListTile as the user swipes. It also includes the onDismissed: (direction) {} property that holds a handler function meant to call a setState(() => items.removeAt(i)). The key property is needed because we are targetting widgets for removal.
The update of the state value can trigger the ListView build method to recreate the children of the ListView. This recreates the new list of Dismissable widgets that each hold a ListTile.
Here is the Dismissable reference (opens new window).
When you create your ListView, if you are using the ListView.builder(), then the itemBuilder: (context, i) property can return a Dismissable() which contains the ListTile.
Here is a Github repo with a ListView.builder that creates Dismissible Widgets containing ListTiles plus a confirmation dialog for each delete (opens new window). The ListTiles are using the English Words package (opens new window) to generate random content for themselves, stored in a state List variable.
# GestureDetectors
Flutter has a GestureDetector widget that is used to capture user interactions with the screen. You can wrap your other widgets with a GestureDetector widget to accomplish the same sort of thing that you did with addEventListener in JavaScript.
# Focusing on Widgets in Flutter
Here is a guide to understanding the focus system in Flutter (opens new window)
# Animated List
When working with a ListView widget we have the ListView.builder constructor that allows us to feed in dynamic data while creating the List.
Another alternative to the ListView.builder is to use an AnimatedList which will add some smooth transitions when you dynamically add or remove items from your data list. Reference for AnimatedList (opens new window). It also uses an itemBuilder property.
# What to do this week
TODO
Things to do before next week
Work on your Final Project with your partner. Remember to use Branches in Git to create a professional work environment for your code.