Diving Deep into WebViews

Working with Gesture Recognizer

Sometimes you want to act on your WebView with different gestures, like swipes. Luckily, the WebView package has you covered! In this section, you’ll learn about using gestures with WebViews, starting with GestureArena.

Understanding the GestureArena

In order to understand GestureArena, you first need to understand the gesture system in Flutter. It consists of two elements: Pointer and Gesture.

1. Pointer: Represents raw data about your interaction with your screen. It describes the location and movement of various interactions, like touches or mouse movements.
2. Gesture: Represents actions of different combinations of Pointers. Multiple Pointers could represent, for instance, a tap or a drag.

Most Material Components respond to Gesture and claim part of the screen to detect these Gestures. You may have multiple Gesture detectors listening to the stream of Pointers.

GestureArena is like a battle between different Gesture recognizers — only one will win, and it depends on the priority of its widget and the behavior of the stream of Pointer events.

When you find that by default the Gestures that are recognized are not what you expect, you can claim your own Gesture recognizer. This changes the prioritization of your widget in GestureArena.

Viewing a List of Horizontal WebViews

You want to view all the saved websites in a vertical list. By default, a WebView only responds to a gesture if no other widgets claimed it. In this case, ListView widget claims vertical drag gestures and you can’t scroll the pages in your WebView. To change this behavior, you’ll pass Gesture recognizers to the WebView.

In lib/presentation/saved_urls_page/widgets/saved_website_card.dart, you’ll add the following import:

import 'package:flutter/gestures.dart';

Next, you’ll replace //TODO: Add Gesture Recognizers with:

gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>{
  // 2
  Factory<VerticalDragGestureRecognizer>(
    () => VerticalDragGestureRecognizer()),
},

Here’s what’s happening above:

1. You passed a set of Factory of OneSequenceGestureRecognizer. This class is a base class for gesture recognizers that can only recognize one gesture at a time.
2. By specifying VerticalDragGestureRecognizer as the gesture recognizer, you want Flutter to prioritize this gesture in the GestureArena.

Build and run. Now, you can scroll each WebView without affecting the scrollability of the vertical ListView.

Where to Go From Here?

Download the completed project files by clicking the Download Materials button at the top or bottom of the tutorial.

You now have a deeper understanding of WebView, and more importantly, when and how to use it. When you find the need, you can control the WebView or specify your own NavigationDelegate. And, you can send data to and receive data from a webpage.

Check out the following links to learn more about some of the concepts in this tutorial:

• Incorporating Web View into Your App (The Boring Flutter Development Show, Ep. 14).
• Flutter docs on Gestures.

We hope you enjoyed this tutorial. If you have any questions or comments, please join the forum discussion below!