Interaction
When the widget's state changes, the state object calls setState() to tell the framework to re-draw the widget Create a custom stateful widget. Replace two stateless widgets with a custom stateful widget - a red solid star icon and its number count next to it - widget manages a row that contains two sub-widgets: IconButton and Text.
class FavoriteWidget extends StatefulWidget {
@override
_FavoriteWidgetState createState() => new _FavoriteWidgetState();
}
To create a custom stateful widget, you need to create two classes: StatefulWidget and State state objects contain the state of the widget and the build() method.
To implement a custom stateful widget, two classes need to be created: Define the widget class inherited from the StatefulWidget Class that contains the widget state and defines the widget build() method. It inherits from State This section describes how to build a stateful widget named FavoriteWidget for Lakes applications. The first step is to choose how to manage the status of FavoriteWidgets.
Step 1: Determine which object manages the state of a widget The state of a widget can be managed in a number of ways, but in our example, the widget itself (FavoriteWidget) will manage its own state. In this case, switching the star icon is a standalone operation that does not affect the parent widget or other user interface, so the widget can handle its own state internally.
Step 2: Create a subclass of StatefulWidget The FavoriteWidget class manages its own state, so it overrides createState() to create a state object. The framework calls createState() when building a widget. createState() creates an instance of FavoriteWidgetState that will implement it in the next step.
new Icon(
,
color: [500],
),
new Text('41')
Widgets manage their status
Sometimes, widgets are best managed internally. For example, when the content of the ListView exceeds the render box, the ListView will automatically scroll. Most developers using ListView do not want to manage the scrolling behavior of ListView, so ListView itself manages its scrolling offsets.
class TapboxA extends StatefulWidget {
TapboxA({Key key}) : super(key: key);
@override
_TapboxAState createState() => new _TapboxAState();
}
class _TapboxAState extends State<TapboxA> {
bool _active = false;
void _handleTap() {
setState(() {
_active = !_active;
});
}
Widget build(BuildContext context) {
return new GestureDetector(
onTap: _handleTap,
child: new Container(
child: new Center(
child: new Text(
_active ? 'Active' : 'Inactive',
style: new TextStyle(fontSize: 32.0, color: ),
),
),
width: 200.0,
height: 200.0,
decoration: new BoxDecoration(
color: _active ? [700] : [600],
),
),
);
}
}
_TapboxAState class: Manage the status of TapboxA Definition_Active: Determine the boolean value of the current color of the box Definition_When the box is clicked, the handleTap() function will be updated and the UI is called setState()
widget state
Implementing all interactive behaviors of widgets For parent widgets, it is usually most meaningful to manage state and tell their children when to update. For example, IconButton allows the icon to be treated as a clickable button. IconButton is a stateless widget because we think the parent widget needs to know if the button is clicked to take the corresponding action. In the following example, TapboxB exports its state to its parent via a callback. Because TapboxB does not manage any state, its parent class is StatelessWidget.
ParentWidgetState class: Manage TapboxB_Active Status Implementation_ HandleTapboxChanged(), method called when clicking a box When the state changes, call setState() to update the UI TapboxB class: Inherit the StatelessWidget class because all states are handled by its parent control When a click is detected, it notifies the parent control
class ParentWidget extends StatefulWidget {
@override
_ParentWidgetState createState() => new _ParentWidgetState();
}
class _ParentWidgetState extends State<ParentWidget> {
bool _active = false;
void _handleTapboxChanged(bool newValue) {
setState(() {
_active = newValue;
});
}
@override
Widget build(BuildContext context) {
return new Container(
child: new TapboxB(
active: _active,
onChanged: _handleTapboxChanged,
),
);
}
}
Hybrid management
class ParentWidget extends StatefulWidget {
@override
_ParentWidgetState createState() => new _ParentWidgetState();
}
class _ParentWidgetState extends State<ParentWidget> {
bool _active = false;
void _handleTapboxChanged(bool newValue) {
setState(() {
_active = newValue;
});
}
@override
Widget build(BuildContext context) {
return new Container(
child: new TapboxC(
active: _active,
onChanged: _handleTapboxChanged,
),
);
}
}
For some widgets, the mashup management method makes the most sense. In this case, the stateful widget manages some states while the parent widget manages others. In the TapboxC example, when clicked, a dark green border appears around the box. When clicked, the border disappears and the color of the box changes. TapboxC exports the _active state to its parent control, but manages the _highlight state internally. This example has two state objects _PrentWidgetState and _TapboxCState
class _TapboxCState extends State<TapboxC> {
bool _highlight = false;
void _handleTapDown(TapDownDetails details) {
setState(() {
_highlight = true;
});
}
ParentWidgetState object: Management_Active Status Implementation HandleTapboxChanged(), called when clicking the box When clicking the box and _calling setState() to update the UI when the active state changes _TapboxCState object: Management_Highlight status. The gesture detector monitors all strike events. When the user clicks, it adds a highlight (dark green border); when the user releases, the highlight is deleted. Update the highlight status when pressed, lifted, or canceled, and call setState() to update the UI. When clicked, the status changes are passed to the parent control
void _handleTapUp(TapUpDetails details) {
setState(() {
_highlight = false;
});
}
void _handleTapCancel() {
setState(() {
_highlight = false;
});
}
Another implementation may export the highlighted state to the parent widget while staying active. The activity is internal, but if you ask someone to use TapBox, they may complain that it doesn't make much sense. The developer only cares if the box is active. Developers may not care about how highlighting is managed, but tend to let TapBox handle these details.
The above is the detailed explanation of the state of Flutter interaction and using widgets to manage its state widget. For more information about Flutter interaction state management widget state, please follow my other related articles!