StatefulWidget class - rad library

A widget that has mutable state.

A stateful widget is a widget that describes dynamic user interface. Stateful widgets are useful when the part of the user interface you are describing can change dynamically, e.g. due to having an internal state, or depending on some system state.

Performance consideration

Rad uses a extremely lightweight yet powerful mechanism to build and update DOM. Below are some general tips along with high level understanding of how things works under the hood:

Use const constructors where possible.
Push the state to the leaves. Having state at top level of application is acceptable as well but it's worth noting that having less child widgets to update means updates can be dispatched and processed faster.
In mission critical situations you can override framework's diffing process using shouldUpdateWidget & shouldUpdateWidgetChildren, both of which are present on every widget. If you know that in some situations your widget doesn’t need to update, you can return false from shouldUpdateWidget. And by returning false from shouldUpdateWidgetChildren you can prevent framework from going down the widget and updating its child widgets. Remember! maintaining shouldUpdateWidget & shouldUpdateWidgetChildren is hard so it's not something you should be using everywhere.
In worst case, framework rebuild widgets from scratch. Complete rebuild involves disposing off current child widgets and rebuilding new ones with new state. Usually happens when child that framework is looking for is not there anymore because of state change in parent. Rebuilds might be bad if Rad has to render pixel multiple times a second. Luckily in Rad, building and updating interface is a one-step process. Framework handles the description of widgets and building process is carried out by the browser. We can rely on browsers for building big parts of tree when needed. After all that's what they do. By widget description, we mean 'data' that's required to build a widget. This means even if you remove child nodes/or part of DOM tree using browser inspector, calling setState() in a parent widget will bring back everything back in DOM.

class ClickToggle extends StatefulWidget {

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

class _ClickToggleState extends State<ClickToggle> {
  bool isClicked = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _handleTap,
      child: Text(
        isClicked
            ? "on! click to turn off."
            : "click to turn on."
        ),
    );
  }

  _handleTap() {
    setState(() {
      isClicked = !isClicked;
    });
  }
}

StatefulWidget class abstract

Performance consideration

A Stateful widget example: 'click to toggle'

Constructors

Properties

Methods

Operators

rad library