preview_knobs

Description:

preview knobs

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!),
// ...
)
copied to clipboard
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),
),
),
),
);
}
}
copied to clipboard
Usage #
Supported property types :

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

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter