preview_knobs 0.0.1-alpha copy "preview_knobs: ^0.0.1-alpha" to clipboard
preview_knobs: ^0.0.1-alpha copied to clipboard

Define custom panel for updating a set of properties.

Preview Knobs #

Define custom panel for updating a set of properties.

screenshot

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 :

Knobs(
    name: 'Title',
    properties: [
        Property<String>('text', widget.title),
        const Property<double>('fontSize', 12),
        const Property<String>('fontFamily', 'Roboto'),
        Property<FontWeight>.enumOptions('fontWeight', FontWeight.values),
    ],
    documentation: (context, data) => '''This is a doc example.''',
    builder: (context, _) => GestureDetector(
        onTap: () => Knobs.showEditor(context),
        child: Text(
                // `context.preview_knobs.read<String>('text')` can also be used for children widgets
                data.read<String>('text'), 
                style: TextStyle(
                fontSize: data.read<double>('fontSize'),
                fontFamily: data.read<String>('fontFamily'),
                fontWeight: data.read<FontWeight>('fontWeight'),
            ),
        ),
    ),
),

Usage #

Supported property types :

  • String
  • double
  • bool
  • Options with a set of predefined values any type (with an helper for enums).
0
likes
0
pub points
69%
popularity

Publisher

unverified uploader

Define custom panel for updating a set of properties.

Repository (GitHub)
View/report issues

License

unknown (LICENSE)

Dependencies

equatable, flutter, flutter_markdown

More

Packages that depend on preview_knobs