Haste ⚡️ #

You're locked in. All of a sudden you realize that your StatelessWidget widget needs a TextEditingController, or maybe a FocusNode or somple simple piece of boolean state. You don't have time to convert it to a StatefulWidget. You need a one-line solution. You need to act with Haste.

Similarly to the awesome Flutter hooks package, Haste lets you perform stateful actions in a StatelessWidget. Let's see how it looks!

Pre-haste #

class MyForm extends StatefulWidget {
  final Widget Function({
    required String name,
    required int age,
  }) submit;

  MyForm({ required this.submit });

  @override
  MyFormState createState() => MyFormState();
}

class MyFormState extends State<MyForm> {
  int _age = 0;
  TextEditingController _controller = TextEditingController();

  @override
  build(context) {
    return Column(
      children: [
        TextField(controller: _controller, hintText: 'Name'),
        AgePicker(initialValue: 0, onPick: (newAge) => setState(() => _age = newAge)),
        TextButton(
          child: Text('Submit'),
          onPressed: () => widget.submit(age: _age, name: _controller.text),
        ),
      ]
    )
  }
}

Post-haste #

class MyForm extends StatelessWidget with Haste {
  final Widget Function({
    required String name,
    required int age,
  }) submit;

  MyForm({ required this.submit });

  @override
  build(context) {
    final (age, setAge) = state(0);
    final controller = memo(() => TextEditingController());

    return Column(
      children: [
        TextField(controller: controller, hintText: 'Name'),
        AgePicker(initialValue: 0, onPick: (newAge) => setAge(newAge)),
        TextButton(
          child: Text('Submit'),
          onPressed: () => widget.submit(age: age, name: _controller.text),
        ),
      ]
    )
  }
}

Actions #

• init ➡️ Run some code when a StatelessWidget is initialized.
• memo ➡️ Memoize a value like a TextEditingController, FocusNode, etc.
• state ➡️ Setup a mutable piece of state in a StatelessWidget.
• future ➡️ Subscribe to a future.
• stream ➡️ Subscribe to a stream.
• onChange ➡️ Run some code when a value changes.
• dispose ➡️ Run some code when a StatelessWidget is disposed.
• previous ➡️ Return the previous value from the last build.

Install #

flutter pub add haste

Demos #

1. User form (actions - state)
2. Load user (actions - state, future)
3. Football score (actions - stream, init, onChange)

Extensions #

Want extended actions for a particular library? You can find some extension packages below:

• Computables - A reactive state primitive library. Extension.
• Loon - Loon is a reactive document data store for Flutter. Extension.

Creating extensions #

Need an action you don't see yet? Create your own!

Let's take the example of creating an extended action called counter that periodically increments a value and rebuilds the widget:

class MyWidget extends StatelessWidget with Haste {
  @override
  build(context) {
    // Increment a counter beginning at 0 every 2 seconds.
    final count = counter(0, Duration(seconds: 2));
    return Text("Count: $count"); // Count: 0, Count: 1, Count: 2...
  }
}

And here is how you would implement it:

class CounterAction extends HasteAction<int> {
  int _count;
  late final Timer _timer;

  CounterAction(this._count, Duration duration) {
    _timer = Timer.periodic(duration, (_) {
      _count++;
      markNeedsBuild();
    });
  }

  @override
  dispose() {
    _timer.cancel();
    super.dispose();
  }
}

class CounterActionBuilder extends HasteActionBuilder {
  const CounterActionBuilder();

  int call(int initialValue, Duration duration, {Key? key}) {
    // A new counter action is built whenever the provided key changes.
    final action = rebuild(key, () => CounterAction(initialValue, duration));
    return action._count;
  }
}

// Finally, extend the set of existing haste actions with the counter extension.
extension HasteCounterAction on Haste {
  CounterActionBuilder get counter => const CounterActionBuilder();
}