Preview configuration

A preview configuration file contains a function that allows Wings to show your app's theme.

Adding a preview configuration only takes a few minutes.

Steps

1. Create a preview_config.dart file in your app's lib directory (where your main.dart file is).
2. Copy the template below into the file:

import 'package:flutter/material.dart';

Widget buildPreview(BuildContext context, Widget child) {
  // You may need to initialize app state here

  // Wrap the MaterialApp with any widgets your app requires, such as
  // ProviderScope for Riverpod or BlocProvider for Bloc.
  return MaterialApp(
    // TODO: Import your app's theme below
    // theme: getTheme(),
    // darkTheme: getDarkTheme(),
    home: child,
  );
}

3. Import your app's theme into theme, and darkTheme if you have a dark mode.

note

Switching to dark mode in previews is coming soon.

Getting your theme

You may need to do a bit of refactoring to get your theme.

For example, if your theme is embedded in your app class, like this:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: MyHomePage(),
    );
  }
}

The simplest option is to extract it into a function:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: buildTheme(),
      home: MyHomePage(),
    );
  }
}

ThemeData buildTheme() {
    return ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
    );
}

And your preview_config.dart file would look like this:

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

Widget buildPreview(BuildContext context, Widget child) {
  return MaterialApp(
    theme: buildTheme(),
    home: child,
  );
}

Source control

If you don't want to commit this file to git, you can run:

git update-index --no-assume-unchanged lib/preview_template.dart