A Flutter package which simplifies flows with a flexible, declarative API

package which simplifies flows

flutter flows made easy! a flutter package which simplifies flows with a flexible, declarative api.

usage

define a flow state

the flow state will be the state which drives the flow. each time this state changes, a new navigation stack will be generated based on the new flow state.

class profile {
  const profile({this.name, this.age, this.weight});

  final string? name;
  final int? age;
  final int? weight;

  profile copywith({string? name, int? age, int? weight}) {
    return profile(
      name: name ?? this.name,
      age: age ?? this.age,
      weight: weight ?? this.weight,
    );
  }
}

create a flowbuilder

flowbuilder is a widget which builds a navigation stack in response to changes in the flow state. ongeneratepages will be invoked for each state change and must return the new navigation stack as a list of pages.

flowbuilder<profile>(
  state: const profile(),
  ongeneratepages: (profile, pages) {
    return [
      materialpage(child: nameform()),
      if (profile.name != null) materialpage(child: ageform()),
    ];
  },
);

update the flow state

the state of the flow can be updated via context.flow<t>().update.

class nameform extends statefulwidget {
  @override
  _nameformstate createstate() => _nameformstate();
}

class _nameformstate extends state<nameform> {
  var _name = '';

  void _continuepressed() {
    context.flow<profile>().update((profile) => profile.copywith(name: _name));
  }

  @override
  widget build(buildcontext context) {
    return scaffold(
      appbar: appbar(title: const text('name')),
      body: center(
        child: column(
          children: <widget>[
            textfield(
              onchanged: (value) => setstate(() => _name = value),
              decoration: inputdecoration(
                labeltext: 'name',
                hinttext: 'john doe',
              ),
            ),
            raisedbutton(
              child: const text('continue'),
              onpressed: _name.isnotempty ? _continuepressed : null,
            )
          ],
        ),
      ),
    );
  }
}

complete the flow

the flow can be completed via context.flow<t>().complete.

class ageform extends statefulwidget {
  @override
  _ageformstate createstate() => _ageformstate();
}

class _ageformstate extends state<ageform> {
  int? _age;

  void _continuepressed() {
    context
        .flow<profile>()
        .complete((profile) => profile.copywith(age: _age));
  }

  @override
  widget build(buildcontext context) {
    return scaffold(
      appbar: appbar(title: const text('age')),
      body: center(
        child: column(
          children: <widget>[
            textfield(
              onchanged: (value) => setstate(() => _age = int.parse(value)),
              decoration: inputdecoration(
                labeltext: 'age',
                hinttext: '42',
              ),
              keyboardtype: textinputtype.number,
            ),
            raisedbutton(
              child: const text('continue'),
              onpressed: _age != null ? _continuepressed : null,
            )
          ],
        ),
      ),
    );
  }
}

flowcontroller

a flowbuilder can also be created with a custom flowcontroller in cases where the flow can be manipulated outside of the sub-tree.

class myflow extends statefulwidget {
  @override
  state<myflow> createstate() => _myflowstate();
}

class _myflowstate extends state<myflow> {
  late flowcontroller<profile> _controller;

  @override
  void initstate() {
    super.initstate();
    _controller = flowcontroller(const profile());
  }

  @override
  widget build(buildcontext context) {
    return flowbuilder(
      controller: _controller,
      ongeneratepages: ...,
    );
  }

  @override dispose() {
    _controller.dispose();
    super.dispose();
  }
}