functional_widget 0.2.1

  • Example
  • Installing
  • Versions
  • new62

Build Status pub package

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);

  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:

... 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.


You write:

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);

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

And then you use it:


How to use


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
  functional_widget_annotation: 0.0.1

  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

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 foo(int value) => Text(value.toString());


new Foo(42);
  • named:
Widget foo({int value}) => Text(value.toString());


new Foo(value: 42);
  • A bit of everything:
Widget foo(BuildContext context, int value, { int value2 }) {
  return Text('$value $value2')


new Foo(42, value2: 24);


  • Fix bug where types from dart:ui where generated as dynamic


  • Rename generator
  • Add documentation


  • Generate class documentation from the function documentation.
  • Pass down decorators from function parameter to class constructor


Initial release


import 'package:flutter/widgets.dart';
import 'package:functional_widget_annotation/functional_widget_annotation.dart';

part 'main.g.dart';

void main() => runApp(const Foo(42));

/// Class documentation
/// * [value] Field documentation
Widget foo(BuildContext context, int value, Color color) {
  return Container();

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  functional_widget: ^0.2.1

2. Install it

You can install packages from the command line:

with pub:

$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:functional_widget/builder.dart';
import 'package:functional_widget/function_to_widget_class.dart';
Version Uploaded Documentation Archive
0.2.1 Dec 10, 2018 Go to the documentation of functional_widget 0.2.1 Download functional_widget 0.2.1 archive
0.2.0 Dec 10, 2018 Go to the documentation of functional_widget 0.2.0 Download functional_widget 0.2.0 archive
0.1.0 Dec 3, 2018 Go to the documentation of functional_widget 0.1.0 Download functional_widget 0.1.0 archive
0.0.3 Dec 3, 2018 Go to the documentation of functional_widget 0.0.3 Download functional_widget 0.0.3 archive
0.0.1 Dec 2, 2018 Go to the documentation of functional_widget 0.0.1 Download functional_widget 0.0.1 archive
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Dec 10, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.1.0
  • pana: 0.12.7


Detected platforms: other

Platform components identified in package: build, io, mirrors.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.68.0 <3.0.0
analyzer >=0.32.2 <0.34.0 0.33.6 0.34.0
build >=0.12.6 <2.0.0 1.0.2
build_config >=0.3.0 <1.0.0 0.3.1+4
code_builder >=3.1.3 <4.0.0 3.1.3
functional_widget_annotation >=0.1.0 <0.2.0 0.1.0
source_gen ^0.9.0 0.9.2
Transitive dependencies
args 1.5.1
async 2.0.8
built_collection 4.1.0
built_value 6.1.6
charcode 1.1.2
collection 1.14.11
convert 2.0.2
crypto 2.0.6
csslib 0.14.6
fixnum 0.10.9
front_end 0.1.6+8 0.1.7
glob 1.1.7
html 0.13.3+3
json_annotation 2.0.0
kernel 0.3.6+8 0.3.7
logging 0.11.3+2
matcher 0.12.4
meta 1.1.6
package_config 1.0.5
path 1.6.2
plugin 0.2.0+3
pub_semver 1.4.2
pubspec_parse 0.1.2+3
quiver 2.0.1
source_span 1.4.1
stack_trace 1.9.3
string_scanner 1.0.4
typed_data 1.1.6
utf 0.9.0+5
watcher 0.9.7+10
yaml 2.1.15
Dev dependencies
dart_style 1.2.0 1.2.0 1.2.2
mockito 4.0.0
pedantic 1.4.0
test 1.5.1+1