Introduction to state management

Understanding State Stateful Widget Concepts

Changing state with the button

In this section you will:

• Update the button to try change the text field
• Switch from Stateless to Stateful Widget

Utilizing Call backs

TEXT & IMAGES

Edit

Passing functions to stateless widgets

Since Stateless widgets are…well stateless, they can’t change the state of anything. So any states they might need to modify need to be outside the widget. How can a stateless widget call a method in separate stateful widget. Well dart passes variable by reference so we can pass a reference of a stateful method into a stateless widget. When an event occurs in the stateless widget, it used a local variable that references a method outside itself. This reference is passed in to the constructor.

TEXT & IMAGES

Edit

A good paradigm for your Flutter projects is separating your widgets into small, testable units that can be adaptable to their context.

Flutter offers VoidCallback and Function(x) (where x can be a different type) for callback-style events between child and parent widgets.

In this section you’ll explore callbacks deeper to understand how to make your application more effective

CUSTOM CODE

Edit

Checkbox( value: true,

// when the checkbox is clicked in the UI the onChanged: (value) { return null }, ), TEXT & IMAGES

Edit

Now add a method that will execute when the check box changes

CUSTOM CODE

Edit

onTap: (a, b) { print(“Value $a $b”) },

Checkbox( value: true,

// call onTap in response to onChanged // in this case and arbitrary string “Hello” is added onChanged: (value) { return onTap(value, “Hello”); }, ),

// Since theres only one line, // This could be shortend to

onChanged: (value) => onTap(value, “Hello”),

// if the method signatures match this can further be shortend to

onTap: (a) { print(“Value $a”) },

Checkbox( value: true, onChanged: onTap, ),