flutterbook

Description:

flutterbook

Flutterbook #
A storyboarding tool to accelerate the development of Flutter widgets. Inspired by Storybook.js.
The package is built to support Windows and Web layouts. There is no support for mobile support at the moment. This is new and still under heavy development, expect many changes to occur with usage.


Go subscribe to my YouTube channel to support development.
#
Demo #
Demo Link Here
Overview ✨ #
Creating the Main
Start by creating the storyboard widget. This will wrap the Flutterbook widget
so that when it is edited, it will hot reload.
class Storyboard extends StatelessWidget {
const Storyboard({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return FlutterBook(
categories: [
// organizers ...
],
);
}
}
copied to clipboard
After creating the Storyboard widget, you can run it by using the main. I recommend making another
file named main_storyboard.dart to maintain your storyboard.
void main() {
runApp(const Storyboard());
}
// Or run it directly, but this will cost the hot reload.
// void main() {
// runApp(const Flutterbook(categories:[...]));
// }
copied to clipboard
How to add Widgets
To add widgets, you simply put Organizers, aka Category, Folder, Component, and ComponentState.
The hierarchy goes
Category > Folder > Component > ComponentState
but you may also do
Category > Component > ComponentState
or
Category > Folder > Folder > Component > ComponentState
Here is a complex example of a single Category. In the example, we use the builder
where we are able to access different controls.
Category(
categoryName: 'LIBRARY',
organizers: [
Folder(
folderName: 'Charts',
organizers: [
Component(
componentName: 'LineGraph',
states: [
ComponentState.child(
stateName: 'Default Container',
child: Container(),
),
],
),
],
),
Component(
componentName: 'Button',
compenentMarkdoown: """##A global button component""",
states: [
ComponentState(
stateName: 'Primary',
markdown: """Used for the main action to be performed"""
codeSample: r'''
Button.primary(
child: Text('Primary Button'),
onPressed: () {},
);
'''
builder: (context, c) {
return Center(
child: SizedBox(
width: c.number(
label: 'Number',
initial: 50,
min: 50,
max: 250,
),
height: c.number(
label: 'height',
initial: 50,
min: 50,
max: 250,
description: 'random stuff',
),
child: CupertinoButton.filled(
onPressed: c.boolean(
label: 'boolean',
initial: true,
)
? () {}
: null,
child: Text(
c.text(label: 'Text', initial: 'Hello World'),
),
),
),
);
},
),
],
),
],
),
copied to clipboard
That's it!
Roadmap 🚧 #

❌ Mobile Support
❌ 100% Code Coverage Testing
[X ] Documentation Support in ComponentState's
❌ Better Docs
[X ] Device Previews
❌ Shareable Handoffs
❌ Optimization

Contributors 🔥 #
Your name could be here 😉