widgetbook_app
A brick to simplify the setup of a Widgetbook Flutter app when working with packages and mono-repos.
How to use š
mason make widgetbook_starter --name "Awesome" --package "awesome_package"
Variables āØ
Variable | Type | Description |
---|---|---|
name | string | The name of the Widgetbook. Used to generate AppInfo . |
package | string | The name of the package containing the components. Used to include the package in the generated pubspec.yaml . |
Assumed structure š
The brick assumes the following mono-repo structure:
mono-repo āāā docs āāā examples āāā packages ā āāā awesome_package ā āāā package_2 āāā other_folder
Outputs š¦
mason make widgetbook_starter --name "Awesome" --package "awesome_package"
āāā mono-repo
āāā docs
āāā examples
āāā packages
ā āāā awesome_package
ā āāā package_2
āāā other_folder
āāā widgetbooks
āāā awesome_package_widgetbook
āāā lib
ā āāā app.dart
ā āāā app.widgetbook.dart
ā āāā components.dart
āāā macos
āāā web
āāā windows
āāā pubspec.yaml
āāā README.md
app.dart
import 'package:flutter/material.dart';
import 'package:widgetbook_annotation/widgetbook_annotation.dart';
@WidgetbookTheme(name: 'Light')
ThemeData lightTheme() {
return ThemeData.light();
}
@WidgetbookTheme(name: 'Dark')
ThemeData darkTheme() {
return ThemeData.dark();
}
@WidgetbookApp.material(
name: '{{package.pascalCase()}}',
)
int? notUsed;
components.dart
import 'package:flutter/material.dart';
import 'package:widgetbook_annotation/widgetbook_annotation.dart';
@WidgetbookUseCase(name: 'Default', type: FloatingActionButton)
Widget buildFab(BuildContext context) {
return FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.add),
);
}