stage_craft
Develop and live test your UI widgets on a stage.
StageCraft helps you developing and testing your widgets in a controlled environment.
It provides a stage where you can change the properties and constraints of your widget and see the changes in real time.
Benefits
- Instant Feedback: See changes to your widgets immediately without navigating through your app.
- Separation of Concerns: Naturally separates your UI widgets from your app's state.
- Efficient Development: No need to rebuild the app to see changes.
Installation
Add StageCraft to your project:
dependencies:
stage_craft: ^1.0.0
or simply run:
flutter pub add stage_craft
Try it out
To test just copy the code below, paste it in a new dart file and run it.
Click to expand the example code
````dart
import 'package:flutter/material.dart';
import 'package:stage_craft/stage_craft.dart';
Future main() async {
runApp(const MinimalExample());
}
/// Your App or ui playground project
class MinimalExample extends StatelessWidget {
const MinimalExample({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: MinimalExampleStage(),
),
);
}
}
/// The Stage for your widget
class MinimalExampleStage extends StatelessWidget {
MinimalExampleStage({super.key});
final textControl = StringControl(label: 'text', initialValue: 'Hello!');
final colorControl = ColorControl(label: 'color', initialValue: Colors.blue);
@override
Widget build(BuildContext context) {
return StageBuilder(
controls: [textControl, colorControl],
builder: (context) {
return MyWidget(
color: colorControl.value,
text: textControl.value,
);
},
);
}
}
/// Your actual widget
class MyWidget extends StatelessWidget {
const MyWidget({
super.key,
required this.color,
required this.text,
});
final Color color;
final String text;
@override
Widget build(BuildContext context) {
return ColoredBox(
color: color,
child: Text(
text,
style: Theme.of(context).textTheme.titleLarge,
),
);
}
}
````