Skip to content
All projects
Source code Open sourceOwn products

video_walkthrough

Onboarding that moves, in one Flutter widget

A Flutter package for video-backed onboarding: looping background video, animated pages, dots and Skip, Continue, Start in one widget. Rewritten as 2.0.0 for Dart 3.

Country
Egypt
Type
Source code
Timeline
2022–2026
Platforms
Android · iOS · Web
GitHub pub.dev
video_walkthrough banner
Dart 3 rewrite
2.0.0
widget tests passing
11

Overview

video_walkthrough turns an onboarding flow into a single widget. Give it an asset video and a list of pages: it plays the video full-screen on a loop, lays the pages over it in a swipeable PageView, and handles the dots, Skip, Continue and the final Start action.

First built for the onboarding of the Visit Egypt tourism app and published on pub.dev in 2022, the package now has a 2.0.0 rewrite for Flutter 3 and Dart 3 with a typed API, dartdoc and 11 widget tests. pub.dev still serves 1.0.1 until 2.0.0 is published.

Highlights

In one widget

  • Background video: any asset video, looping and cover-fitted, with volume and zoom controls.
  • Animated pages: Walkthrough pages slide and fade in, or pass any widgets you like.
  • Skip jumps to the last page, Continue animates forward, Start finishes the flow.
  • Fully themable texts, styles, button colours, dots and an optional tinted logo.

Safe and flexible

  • Finish with an onFinish callback, or a pageRoute that is pushed or replaces the walkthrough.
  • Missing videos fall back to a solid colour.
  • System bars are restored on dispose, and nothing force-unwraps.

What's new in 2.0.0

  • Inactive dots now use indicatorInActiveColor, covered by a test.
  • Start without a pageRoute no longer crashes: onFinish, then pageRoute, then no-op.
  • Removed FlatButton in favour of Flutter 3 buttons.
  • The page animation that was built but never applied now runs.
  • Typed API, dartdoc everywhere and 11 widget tests.

Swipe for more

The 2.0.0 rewrite: fixes, typed API, dartdoc and tests
The 2.0.0 example app, captured from a Flutter web build
Production use: the Visit Egypt onboarding
The original 2022 demo recording

Engineering notes

  1. 01

    Testing a video widget without a device

    Widget tests swap VideoPlayerPlatform.instance for an in-memory fake that reports an initialized 1080×1920 video, so tests assert the asset is created, looped, played at the right volume and disposed, with no platform channels.

  2. 02

    Dot-colour regression locked down

    Each dot carries a stable key, and a test checks active and inactive colours before and after paging.

  3. 03

    Null-safety without surprises

    pageRoute! was replaced by an explicit order: onFinish, then pageRoute, then no-op.

  4. 04

    Quiet for users, loud for developers

    If the video cannot load, the walkthrough still works over backgroundColor, and the error is reported with debugPrint.

  5. 05

    Real screenshots, not mockups

    The example screens come from a flutter build web of the example app, driven in headless Chrome over the DevTools protocol.

Results

  • Published on pub.dev in 2022 and used in production for the Visit Egypt onboarding.
  • 2.0.0 rewrite for Flutter 3 and Dart 3 with 11 passing widget tests and a clean flutter analyze.
  • Open source under the MIT license, with a runnable example app for Android, iOS and Web.

Stack

  • Flutter
  • Dart 3
  • video_player
  • PageView
  • AnimationController
  • Material 3
  • flutter_test
  • flutter_lints
  • pub.dev

Links

Contact

Need something like this?

Let's talk about your product.

Chat on WhatsApp