functional_widget_annotation 0.0.3

Annotations for function_widget_generator used to generate widget classes from a function

Widgets are cool. But classes are quite verbose:

class Foo extends StatelessWidget {
  final int value;
  final int value2;

  const Foo({Key key, this.value, this.value2}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text('$value $value2');
  }
}

So much code for something that could be done much better using a plain function:

Widget foo(BuildContext context, { int value, int value2 }) {
  return Text('$value $value2');
}

The problem is, using functions instead of classes is not recommended:

• https://stackoverflow.com/questions/53234825/what-is-the-difference-between-functions-and-classes-to-create-widgets/53234826#53234826
• https://github.com/flutter/flutter/issues/19269

... Or is it?

---

Introducing functional_widgets, a code generator that generates widget classes from functions.

Simply write your widget as a function, decorate it with a @widget, and then this library will generate a class for you to use.

Example

You write:

@widget
Widget foo(BuildContext context, int value) {
  return Text('$value');
}

It generates:

class Foo extends StatelessWidget {
  final int value;

  const Foo(this.value, {Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return foo(context, value);
  }
}

And then you use it:

runApp(
    Foo(42)
);

How to use

Install

There are a few separate packages you need to install:

• functional_widget_annotation, a package containing decorators. You must install it as dependencies.
• functional_widget, a generator that uses the decorators from the previous packages to generate your widget. Install it as dev_dependencies
• build_runner, a tool that is able to run code-generators. Install it as dev_dependencies

dependencies:
  functional_widget_annotation: 0.0.1

dev_dependencies:
  functional_widget: 0.0.1
  build_runner: 1.1.2

Run the generator

To run the generator, you must use build_runner cli:

flutter pub pub run build_runner watch

All the potential syntaxtes

functional_widget will inject widget specific parameters if you ask for them. You can potentially write any of the following:

Widget foo();
Widget foo(BuildContext context);
Widget foo(Key key);
Widget foo(BuildContext context, Key key);
Widget foo(Key key, BuildContext context);

You can also replace BuildContext by HookContext from https://github.com/rrousselGit/flutter_hooks

You can then add however many arguments you like after the previously defined arguments. They will then be added to the class constructor and as a widget field:

• positional

@widget
Widget foo(int value) => Text(value.toString());

// USAGE

new Foo(42);

• named:

@widget
Widget foo({int value}) => Text(value.toString());

// USAGE

new Foo(value: 42);

• A bit of everything:

@widget
Widget foo(BuildContext context, int value, { int value2 }) {
  return Text('$value $value2')
}

// USAGE

new Foo(42, value2: 24);