How To Record a Flutter App Promo Video — Better Tap Gesture Solution

If you ever needed to record an app promo, which shows the tap gestures performed when navigating through the app, below are the solutions you are likely to find.

Complex workarounds :

1. Creating custom gestures in Assistive Touch
2. Using third party tools
3. Modifying simulator settings

Better solution :

1. Navigate to your Flutter app root project directory
2. If your Flutter project is not configured for the Web, the commands below will enable Web support for your existing project

flutter channel beta
flutter upgrade
flutter create .

3. Run your project in release mode using the CanvasKit/Skia Backend

flutter run --release -d chrome --dart-define=FLUTTER_WEB_USE_SKIA=true

• The massive performance increase from using the CanvasKit/Skia backend in release mode ensures that the video will be smooth and jitter free

4. On the newly opened Chrome instance, navigate to the Developer Tools

Open the Developer Tools

5. Toggle the device toolbar

Toggle Device Toolbar

6. Choose from variety of devices (Moto G4, Galaxy S5, Pixel 2, Pixel 2 XL, iPhone 5/SE, iPhone 6/7/8, iPhone 6/7/8 Plus, iPhone X, iPad, iPadPro)

iPhone X Chosen For This App Promo

7. Click on your app screen and you would automatically notice a beautiful round tap gesture indicator

The Dark Circle can be added / removed in QuickTime Player Screen Recording : Options → Show Mouse Clicks

8. Use QuickTime Player to start a New Screen Recording

9. Record the exact dimensions of the device screen

10. Use the recorded video to create your finished Flutter App promo video.

Hope you enjoyed this tutorial!

Don’t miss the Early Bird special!

Hire me to get your own app today!