Preview Knobs

Define custom panel for updating a set of properties.

Quickstart

Setup the editor area where the panel opens which will contains Knobs as descendents :

MaterialApp(
    builder: (context, child) => KnobsEditor(child: child!),
    // ...
)

Define a customizable area as a Knobs widget instance :

class PreviewText extends StatelessWidget {
  const PreviewText({
    super.key,
  });

  // Define editable properties with their default value
  static const text = Property<String>('text', 'Preview Knobs');
  static const fontSize = Property<double>('fontSize', 12);
  static final fontWeight = Property<FontWeight>.enumOptions('fontWeight', FontWeight.values);

  @override
  Widget build(BuildContext context) {
    return Knobs(
      name: 'Text',
      // Registers the properties
      properties: [
        text,
        fontSize,
        fontWeight,
      ],
      // Write dynamic documentation if you wish
      documentation: (context, data) {
        return '''This is a code sample example.\n\n```dart\nText();\n```''';
      },
      // Read the property values from data
      builder: (context, data, _) => GestureDetector(
        onTap: () => Knobs.showEditor(context),
        child: Text(
        text.read(data),
          style: TextStyle(
            fontSize: fontSize.read(data),
            fontWeight: fontWeight.read(data),
          ),
        ),
      ),
    );
  }
}

Usage

Supported property types :

• String
• double
• bool
• Options with a set of predefined values any type (with an helper for enums).

Libraries

preview_knobs