Add Component
To understand better, let's review a few tips before you can add your first component.
Components
Components in Figma might be resembled by one or multiple variants, which are variations of a component.
TextButton, ElevatedButton, and OutlineButton are variants
of a Button component. In addition, different Flutter states of a button (e.g.,
focused or hovered) might resemble in Figma as additional variants.
Components Vs. Use-cases
Widgetbook features a component and use-case approach in which a single component has one or multiple use-cases.
A use-case might resemble a variant of a component or just a specific state of the component.
In Widgetbook, developers create a folder tree structure to organize and catalog components.
Add your first component
Adding components to Widgetbook works differently based on your choice: manual approach or generator approach
- To add components in the generator approach, you can add use cases with
@UseCaseannotation.
import 'package:flutter/material.dart';
import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
@widgetbook.UseCase(
name: 'with green color',
type: Container,
)
Widget greenContainerUseCase(BuildContext context) {
return Column(
children: [
Container(
color: Colors.green,
child: const SizedBox.square(
dimension: 100,
),
),
],
);
}
-
The annotation is used on a use-case builder method with a return type of
Widgetand a single required parameterBuildContext.You can freely pick the name of the method, but make sure the name of a newly created use-case builder method does not have a name conflict with already existing methods.
-
In addition,
@UseCaserequires two mandatory parameterstypeandnamethat allow you to customize how the use-case is shown in the navigation of Widgetbook.typepropertyThe
typeproperty is used by the generator to create the component entry within the navigation. As a developer, you want to specify the type of the cataloged component (Container) instead of the one that might be returned by the builder method (Column).namepropertyThe
nameproperty of the annotation allows you to specify the name of the use-case. In the case of the example, this iswith green color. -
Execute the
build_runnerby running the following command:flutter pub run build_runner buildor
flutter pub run build_runner watch
