“This is the 15th day of my participation in the November Gwen Challenge. See details of the event: The Last Gwen Challenge 2021”.

In the previous article, we briefly described runApp() in the main.dart mian method. Today we’ll talk about StatelessWidget and StatefulWidget classes in Main. dart.

StatelessWidget

StatelessWidget: A Widget whose state cannot be changed once it is built. Once built, these widgets are immutable, meaning that no changes to variables, ICONS, buttons, or data can change the Widget’s state. Some official examples :Text, RaisedButton, Icon. Here is the basic way to write a StatelessWidget:

class SplashScreen extends StatelessWidget { const SplashScreen({Key? key}) : super(key: key); // This widget is the root of your application. @override Widget build(BuildContext context) { return Container(color: Colors.red); }}Copy the code

The build method of StatelessWidget and returns a Widget whose state does not change at runtime, but only when the value is initialized.

  • A stateless component is a StatelessWidget component.
  • They do not depend on any data or behavior changing.
  • Stateless Widgets have no state, they are rendered once and do not update themselves, only when initialized externally.
  • For example: Text, Icon,RaisedButtonIs a stateless component.

StatefulWidget

StatefulWidget: Is a Widget whose state changes once the Widget is built. These states are mutable and can change many times over their lifetime. This simply means that the state of the Widget can be changed by different variables, inputs, or any change in the data. Some official examples :CheckBox, RadioButton, Form, TextField. Here’s the basic way to write StatefulWidget:

class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { @override Widget build(BuildContext context) { return Container(); }}Copy the code

The StatefulWidget overrides createState() and returns a State.

The life cycle of StatefulWidget

createState()

When we create a stateful component, the Flutter framework prompts us to create the createState() method.

@override
    _MyAppState createState() => _MyAppState();
Copy the code

mounted

Once we have created a State object, the framework mounts it with BuildContext before calling the initState() method. All components have the bool Mounted attribute. When buildContext is allocated, it becomes true.

bool get mounted => _element ! = null;Copy the code

initState

This is the first method called when the stateful widget is created after the class constructor. InitState () is called only once. It must call super.initstate (). Here, you can initialize data, properties, and subscribe to Streams or any other object that can change the data on this widget.

@override initState() { super.initState(); / /... }Copy the code

didChangeDependencies

This method is called immediately after the initState() method when the component is first built, and it is also called whenever the object of the data on which the component depends is called. For example: It relies on the updated InheritedWidget. The Build method is always called after didChangeDependencies, so this is rarely needed.

@override
void didChangeDependencies() {
// TODO: implement didChangeDependencies
super.didChangeDependencies();
}
Copy the code

build

It displays the part of the user interface represented by the component. This method can be invoked in several different situations:

  • After calling the initState() method.
  • The framework always calls the Build () method after calling the didUpdateWidget
  • Update the UI after receiving the setState call.
  @override
  Widget build(BuildContext context) {
     return Container();
  }
Copy the code

didUpdateWidget

If the parent component changes its configuration and must rebuild this component. But it is rebuilding with the same runtimeType and then calling the didUpdateWidget() method. Update the component properties of this state object to reference the new component, and then call this method with the previous component as an argument.

@override
void didUpdateWidget(covariant MyHomePage oldWidget) {
// TODO: implement didUpdateWidget
super.didUpdateWidget(oldWidget);
}
Copy the code

setState

When the user executes the setState method, after executing the callback function that needs to be implemented in the setState method, the build method will be updated again, which is reflected in the UI. SetState notifies the framework that the internal state of the current object has changed in a way that could affect the user interface.

@override
void setState(VoidCallback fn) {
// TODO: implement setState
super.setState(fn);
}
Copy the code

deactivate

Called when state is removed from the component tree, but it may be reincarnated before the current frame changes are complete. This method exists because the State object can be moved from one point in the tree to another.

@override
void deactivate() {
// TODO: implement deactivate
super.deactivate();
}
Copy the code

dispose

Called when the State object is permanently removed. Here you can unsubscribe and unsubscribe all animations, streams, and so on.

@override
void dispose() {
// TODO: implement dispose
super.dispose();
}
Copy the code
  • A stateful component is a StatefulWidget component.
  • Updates can be made at run time based on user actions or data changes.
  • A stateful Widget has an internal state that can be rerendered if the input data changes or the Widget’s state changes.
  • For example, check boxes, radio buttons, and sliders are stateful components

Summarized below

Stateless simply means thatAll properties of a component are immutable. So the only way you can change a StatelessWidget is the initialization of that StatelessWidget. To sum up, oneStatelessWidgetwillneverRebuild itself, but it can be initialized from the outside. While StatefulWidgetcanTrigger the rebuild yourself, such as through a callsetState().

As shown in the figure, the StatelessWidget only provides a common buildAPI to trigger a build, while the StatefulWidget can have many trigger times that lead to a (redo) build. Such as the common setState() update widget UI.

  • State is mutable data for a widget, and widgetState’s data can also be changed.

  • A StatefulWidget is a component with State, while a StatelessWidget has no State.

  • StatefulWidget can actively update the UI by calling the setState function.

  • The data in the StatelessWidget cannot be changed. If it wants to update the UI, it needs its parent component to update the UI by passing data to it via constructors.

  • Use the StatelessWidget as often as possible because its performance cost is minimal.