Introduction

Develop, test, and interact with Flutter widgets directly inside VS Code. Iterate faster with instant Hot Reload as you build and refine your UI.

Features

Usage

1. Add the Flutter package

Until the package is published, reference this repository from your app's pubspec.yaml:

dependencies:
  flutter_design_preview:
    git:
      url: https://github.com/MTtankkeo/vscode-flutter-design-preview.git
      path: packages/flutter_design_preview

2. Create a preview

Add a PreviewWidget subclass anywhere under your project's lib directory:

import 'package:flutter/material.dart';
import 'package:flutter_design_preview/flutter_design_preview.dart';

class PrimaryButtonPreview extends PreviewWidget {
  static const label = PreviewControl.string(...);
  static const count = PreviewControl.integer(
    key: 'count',
    displayName: 'Count',
    description: 'Number displayed in the badge',
    defaultValue: 3,
    minValue: 0,
    maxValue: 99,
  );

  @override
  String get displayName => 'Primary';

  @override
  List<String> get groups => ['Buttons', 'Primary'];

  @override
  Widget build(BuildContext context) {
    final label = label.of(context).value;
    final count = count.of(context).value;

    return FilledButton(child: Text('$label $count'));
  }
}

Custom app builder

Declare one top-level function with @preview when previews need your application's theme, localization, providers, or navigation setup:

If no custom builder is found, the extension supplies a default MaterialApp and centers the selected widget on the canvas.

import 'package:flutter/material.dart';
import 'package:flutter_design_preview/flutter_design_preview.dart';

@preview
Widget buildPreviewApp(PreviewWidget widget) {
  return MaterialApp(
    debugShowCheckedModeBanner: false,
    theme: ThemeData.light(),
    darkTheme: ThemeData.dark(),
    themeMode: PreviewBinding.themeMode,
    home: ...,
  );
}

Preview Controls