functional_flutter 0.0.1

  • Example
  • Installing
  • Versions
  • 58



Tools for composing flutter widget trees in a functional manner.


Your widget tree should be a function of your applications state, so why would you write widgets as classes and not functions?

functional_flutter encourages you to separate your state and properties from your widget definition. Rather than have a class that has properties and a build function implemented, you can lift the properties into a class and write FunctionalWidgets that take a properties class and return a widget.

Properties should always be a value type. I suggest you leverage built_value or meta's @immutable annotation for your prop classes.

If everything is a pure functional widget how can my widgets have state

The withState widget enhancer lets you lift state into a functional wrapper. For example:

class AppProps {
  final String title;
  final int count;
  final VoidCallback increment;
  final VoidCallback decrement;
  AppProps({this.title, this.count, this.increment, this.decrement});

FunctionalWidget<String> counterApp = withState(
  (String props, int state, SetState<int> setState) =>
      new AppProps(
        title: props,
        count: state,
        increment: () => setState((s) => s + 1),
        decrement: () => setState((s) => s - 1),

Widget _appContent(AppProps props) => new MaterialApp(
      title: props.title,
      home: new Scaffold(
        body: new Row(
          children: <Widget>[
            new RaisedButton(
              onPressed: props.increment,
              child: new Row(
                children: <Widget>[
                  new Text('Increment'),
              key: incrementButtonKey,
            new RaisedButton(
              onPressed: props.decrement,
              child: new Row(
                children: <Widget>[
                  new Text('Decrement'),
              key: decrementButtonKey,
            new Text(
              'Count: ${props.count}',
              key: counterKey,

the withBuiltReduxStore enhancer also lets you subscribe to state from your built_redux store, if you are using built_redux as a state management solution.


initial release


import 'package:functional_flutter/functional_flutter.dart';
import 'package:flutter/material.dart';
import 'package:meta/meta.dart';

void main() {
  // The following app has two views, one that shows countA and one that shows
  // countB. Depeding on which view is selected countA or countB is rendered.
  // If countA is incremented when countB is showing then the pure wrapper
  // will not rebuild the countAView widget.
  runApp(counterApp('functional flutter example'));

class AppState {
  final bool showingA;
  final int countA;
  final int countB;
    this.showingA: true,
    this.countA: 0,
    this.countB: 0,

  AppState clone({
    bool showingA,
    int countA,
    int countB,
  }) =>
      new AppState(
        showingA: showingA ?? this.showingA,
        countA: countA ?? this.countA,
        countB: countB ?? this.countB,

class AppProps {
  final String title;
  final AppState state;
  final VoidCallback incrementA;
  final VoidCallback incrementB;
  final VoidCallback changView;

// counterApp is a functional component that wraps appContent
// in a statefult widget.
FunctionalWidget<String> counterApp = withState(
  // default state
  new AppState(),
  // maps the incoming props, the state from the stateful widget
  // and the setState function from the stateful widget to AppProps,
  // the result of this function is passed to appContent when counterApp
  // is invoked.
  (String props, AppState state, SetState<AppState> setState) => new AppProps(
        title: props,
        state: state,
        incrementA: () => setState((s) => s.clone(countA: s.countA + 1)),
        incrementB: () => setState((s) => s.clone(countB: s.countB + 1)),
        changView: () => setState((s) => s.clone(showingA: !s.showingA)),

// appContent is a functional widget that takes AppProps
// and renders the content of the application, which is
// 3 buttons that update the app state and the current view
Widget appContent(AppProps props) => new MaterialApp(
      title: props.title,
      home: new Scaffold(
        body: new ListView(children: <Widget>[
          new RaisedButton(
            onPressed: props.changView,
            child: new Row(
              children: <Widget>[
                new Text('Change View'),
          new RaisedButton(
            onPressed: props.incrementA,
            child: new Row(
              children: <Widget>[
                new Text('Increment A'),
          new RaisedButton(
            onPressed: props.incrementB,
            child: new Row(
              children: <Widget>[
                new Text('Increment B'),

// viewBranch is a functional widget that gen AppProps returns
// a view that displays either counterA or counterB's value.
// Both counterView widgets are 'pure' meaning they won't rebuild
// if their props do not change. For example, if increment B is clicked
// in the parent widget and showingA is true, the build function for
// the Text widget will not be run again since the value of countA didn't change
FunctionalWidget<AppProps> viewBranch = branch(
  (props) => props.state.showingA,
  withProps<int, AppProps>((props) => props.state.countA)(
  withProps<int, AppProps>((props) => props.state.countB)(

Widget counterView(int count) => new Text('Count $count');

1. Depend on it

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

  functional_flutter: "^0.0.1"

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter packages get

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

3. Import it

Now in your Dart code, you can use:

import 'package:functional_flutter/functional_flutter.dart';
Version Uploaded Documentation Archive
0.0.1 Feb 18, 2018 Go to the documentation of functional_flutter 0.0.1 Download functional_flutter 0.0.1 archive


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

  • Dart: 2.0.0-dev.31.0
  • pana: 0.10.3
  • Flutter: 0.1.7


Describes how popular the package is relative to other packages. [more]
18 / 100
Code health derived from static analysis. [more]
96 / 100
Reflects how tidy and up-to-date the package is. [more]
100 / 100
Overall score:
Weighted score of the above. [more]
Learn more about scoring.


Detected platforms: Flutter

References Flutter, and has no conflicting libraries.


  • Fix issues reported by dartanalyzer or dartfmt.

    dartanalyzer or dartfmt reported 1 warning 3 hints.

    Strong-mode analysis of lib/src/with_built_redux_store.dart gave the following warning:

    line: 17 col: 20
    A function of type '(InnerP) → Widget' can't be assigned to a location of type '(dynamic) → Widget'.

    Run dartfmt to format lib/src/pure.dart.

    Similar analysis of the following files failed:

    • lib/src/with_state.dart (hint)
  • The description is too short.

    Add more detail about the package, what it does and what is its target use case. Try to write at least 60 characters.

  • Package is pre-v1 release.

    While there is nothing inherently wrong with versions of 0.*.*, it usually means that the author is still experimenting with the general direction API.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.19.0 <2.0.0
built_redux ^7.0.0 7.4.0
flutter 0.0.0
flutter_built_redux ^0.4.0 0.4.5 0.5.0
meta ^1.0.3 1.1.2
Transitive dependencies
analyzer 0.30.0+4 0.31.1
args 1.4.1
async 2.0.6
barback 0.15.2+14
boolean_selector 1.0.2
build 0.11.2 0.12.0+1
build_config 0.2.4
built_collection 3.0.5
charcode 1.1.1
cli_util 0.1.2+1
collection 1.14.5
convert 2.0.1
crypto 2.0.2+1
csslib 0.14.1
dart_style 1.0.9+1 1.0.10
fixnum 0.10.7
front_end 0.1.0-alpha.4.1 0.1.0-alpha.10
glob 1.1.5
html 0.13.2+2
http 0.11.3+16
http_multi_server 2.0.4
http_parser 3.1.1
io 0.3.2+1
isolate 1.1.0
js 0.6.1
kernel 0.3.0-alpha.1.1 0.3.0-alpha.10
logging 0.11.3+1
matcher 0.12.1+4
mime 0.9.6
multi_server_socket 1.0.1
node_preamble 1.4.0
package_config 1.0.3
package_resolver 1.0.2
path 1.5.1
plugin 0.2.0+2
pool 1.3.4
pub_semver 1.3.2
quiver 0.28.0
shelf 0.7.2
shelf_packages_handler 1.0.3
shelf_static 0.2.7
shelf_web_socket 0.2.2
sky_engine 0.0.99
source_map_stack_trace 1.1.4
source_maps 0.10.4
source_span 1.4.0
stack_trace 1.9.2
stream_channel 1.6.4
string_scanner 1.0.2
term_glyph 1.0.0
test 0.12.31
typed_data 1.1.5
utf 0.9.0+4
vector_math 2.0.5
watcher 0.9.7+7
web_socket_channel 1.0.7
yaml 2.1.13
Dev dependencies
build_runner ^0.6.0
built_value ^5.0.0 5.2.1
built_value_generator ^5.0.0
source_gen ^0.7.0 0.7.5+1