doc_widget
An alternative to documentation your widgets
Motivation
How we would have the possibility of creating the documentation that shows all information about our widgets? Like to Storybook and Docz, I wanted something similar to rendering all information in Flutter.
doc_widget
Recently I created the initial version that provides a simple way that to document your widgets.
How to install
We need to install the doc_widget
as a dependency, doc_widget_builder
, and build_runner
as a development dependency.
dependencies:
doc_widget:
dev_dependencies:
doc_widget_builder:
build_runner:
Check the latest versions in pub.dev
https://pub.dev/packages/doc_widget
https://pub.dev/packages/build_runner
Knowing your widgets
Here an example of a widget that we will document. Is a simple Button.
Now we will annotate our widget with @docWidget
, see below:
import 'package:doc_widget/doc_widget.dart';@docWidget
class Button extends Stateless
Optional: Whether you prefer, you can provide a snippet of code that shows how to use your widget. The code should be a valid dart code.
/// ```dart
/// final button = Button(
/// 'Button',
/// onPressed: () => print('doc_widget'),
/// );
/// ```
@docWidget
class Button extends StatelessWidget
Now the doc_widget
has sufficient to know your widget.
Generate code
Now we will use the powers of build_runner
to generate our documentation. All file contains the extension .doc_widget.dart
To generate, run the following command:
flutter pub run build_runner build
This will generate a file button.doc_widget.dart
that contains all information about your widget. The generated class has the name of the widget + DocWidget as a suffix. Ex: ButtonDocWidget
. We will use this in the next step.
Create an application for doc_widget
You have many ways that create an application that will read and rendering the documentation. I will list two ways:
- Running your own project with a different target.
- Creating another application inside our project. Example:
documentation
For best didactic here, we use the first approach. So, I created a file in the following path lib/doc_widget.dart
that contains the following code below:
Here we use some elements that are provided by doc_widget
and the file that was generated.
Run
To view our documentation, we need to run the application above:
flutter run -t lib/doc_widget.dart
And done!
Flutter Package and Github
Follow Flutter Community on Twitter: https://www.twitter.com/FlutterComm