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

doc_widget | Flutter Package

isacjunior/doc_widget

Follow Flutter Community on Twitter: https://www.twitter.com/FlutterComm