Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ghostwalker562/flutterbook
📓 Storyboard your components with Flutterbook. Develop, document, & test any kind of Flutter component.
https://github.com/ghostwalker562/flutterbook
flutter
Last synced: 23 days ago
JSON representation
📓 Storyboard your components with Flutterbook. Develop, document, & test any kind of Flutter component.
- Host: GitHub
- URL: https://github.com/ghostwalker562/flutterbook
- Owner: GhostWalker562
- License: mit
- Created: 2021-07-09T04:41:27.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-12-08T22:15:40.000Z (about 1 year ago)
- Last Synced: 2024-05-15T15:29:39.106Z (8 months ago)
- Topics: flutter
- Language: Dart
- Homepage:
- Size: 349 KB
- Stars: 33
- Watchers: 2
- Forks: 17
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 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.
# [](https://www.youtube.com/channel/UCurQRmT17EyOIrdPseiastg)
### Demo
## 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.
```dart
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.
```dart
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.
```dart
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'),
),
),
),
);
},
),
],
),
],
),
```
#### 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_ 😉
