Live Test View

Run a Flutter widget test and watch it render, frame by frame, in a panel beside your editor — no debugger, no manual screenshotting.

Usage

Open any *_test.dart file. Above every testWidgets(...) call with a literal string name, you'll see a "▶ Live View" CodeLens:

testWidgets('increments the counter', (tester) async {
  // ▶ Live View appears above this line
  ...
});

Click it. A panel opens beside your editor and runs just that test (flutter test --plain-name "..."). As frames come in, they play back in the panel; the timeline scrubber holds every frame the test rendered. Scrub to inspect an earlier frame — the playhead stays on the latest frame automatically until you move the slider. Use Replay, step buttons, or keyboard shortcuts (←/→, Home/End, Space). A failed test shows its error and stack trace inline.

Widget Preview (experimental)

Live Test View also has a preview mode for widgets, not just tests. Above any top-level widget-returning function/getter, or StatelessWidget/StatefulWidget class, you'll see a "▶ Preview" CodeLens:

class CounterPage extends StatefulWidget {
  // ▶ Preview appears above this line
  ...
}

Click it. A panel opens beside your editor and renders that widget live in a headless flutter-tester process — auto-wrapped in a minimal MaterialApp(home: Scaffold(...)) so Theme.of, MediaQuery, Navigator, and friends resolve without extra setup. Save the file and the panel updates via a real Flutter hot reload — sub-second, no process restart.

Unlike test mode's scrubbable frame history, preview mode shows one thing: the widget's current rendered state. It's not interactive (taps/scroll/typing aren't forwarded), and it doesn't inject your app's own Provider/Riverpod/Bloc setup — widgets that need that will show Flutter's error widget, same as they would in an unwrapped test.

Setup prompt

If you click "▶ Live View" and no frames show up, the panel shows a "Set up Live Test View" button. Clicking it opens a terminal and runs:

flutter pub add --dev live_test_view && dart run live_test_view:install

Re-run the test afterward and frames should appear. If the project already has a test/flutter_test_config.dart, the installer won't touch it — it prints the one-line wrapper you need to add by hand instead.

Requirements

• Flutter >= 3.16
• live_test_view package >= 0.5.1
• VS Code >= 1.85

License

MIT — see LICENSE.