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.
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 ...
],
);
}
}
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:[...]));
// }
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',
states: [
ComponentState(
stateName: 'Primary',
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'),
),
),
),
);
},
),
],
),
],
),
That's it!
Roadmap
🚧
- Mobile Support
- 100% Code Coverage Testing
- Documentation Support in ComponentState's
- Better Docs
- Device Previews
- Shareable Handoffs
- Optimization
Contributors
🔥
Your name could be here
![[Feature] Documentation Feature](https://avatars.githubusercontent.com/u/43276017?v=4)
31 Jul 27, 2022
30 Nov 10, 2022
0 Apr 16, 2022
214 Dec 13, 2022
26 Dec 31, 2022
3 Aug 19, 2022
18 Dec 16, 2022
22 Jul 10, 2022
2 Apr 18, 2022
14 Oct 20, 2022
46 Nov 21, 2022
25 Oct 7, 2022
101 Dec 16, 2022
14 Oct 17, 2022
7 Dec 30, 2022
5 Aug 7, 2022
522 Jan 2, 2023