functional_flutter 0.0.1

  • Example
  • Installing
  • Versions
  • 56



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

Use this package as a library

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 flutter 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 May 26, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0-dev.54.0
  • pana: 0.11.1
  • Flutter: 0.4.4


Describes how popular the package is relative to other packages. [more]
14 / 100
Code health derived from static analysis. [more]
98 / 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.


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

  • Fix analysis and formatting issues.

    Analysis or formatting checks reported 3 hints.

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

    Run flutter format to format lib/src/with_built_redux_store.dart.

    Similar analysis of the following files failed:

    • lib/src/with_state.dart (hint)


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.19.0 <2.0.0
built_redux ^7.0.0 7.4.1
flutter 0.0.0
flutter_built_redux ^0.4.0 0.4.5 0.5.0
meta ^1.0.3 1.1.5
Transitive dependencies
analyzer 0.30.0+4 0.32.0
args 1.4.3
async 2.0.7
boolean_selector 1.0.3
build 0.11.2 0.12.6
built_collection 3.1.1
charcode 1.1.1
cli_util 0.1.3
collection 1.14.6 1.14.9
convert 2.0.1
crypto 2.0.3
csslib 0.14.4
dart_style 1.0.9+1 1.0.14
fixnum 0.10.7
front_end 0.1.0-alpha.4.1 0.1.0
glob 1.1.5
html 0.13.3
http 0.11.3+16
http_multi_server 2.0.4
http_parser 3.1.2
io 0.3.2+1
isolate 1.1.0 2.0.1
js 0.6.1
kernel 0.3.0-alpha.1.1 0.3.0
logging 0.11.3+1
matcher 0.12.2+1
mime 0.9.6+1
multi_server_socket 1.0.1
node_preamble 1.4.2
package_config 1.0.3
package_resolver 1.0.3
path 1.5.1
plugin 0.2.0+2
pool 1.3.5
pub_semver 1.4.1
quiver 0.29.0+1
shelf 0.7.3 0.7.3+1
shelf_packages_handler 1.0.3
shelf_static 0.2.7 0.2.7+1
shelf_web_socket 0.2.2+1
sky_engine 0.0.99
source_map_stack_trace 1.1.4
source_maps 0.10.5
source_span 1.4.0
stack_trace 1.9.2
stream_channel 1.6.6
string_scanner 1.0.2
term_glyph 1.0.0
test 0.12.38+1
typed_data 1.1.5
utf 0.9.0+4
vector_math 2.0.6 2.0.7
watcher 0.9.7+8
web_socket_channel 1.0.7
yaml 2.1.14
Dev dependencies
build_runner ^0.6.0
built_value ^5.0.0 5.4.5
built_value_generator ^5.0.0
source_gen ^0.7.0 0.7.5+1 0.8.1+3