The first step

  • Create the increase folder under lib
  • Increase. Dart is created in the increase folder
  • Add increase. Dart under main.dart

The second step

incease.dart

  • In this component we use the dynamic component StatefulWidget
  • Each dynamic component needs a createState function, which is meant to generate state
  • Each dynamic component needs a controller that controls the state within the component and renders the UI structure of the controlled component
  • The build function inside the controller that renders the UI structure of the controlled component
  • Controller has naming requirements, _+ controlled component name +State< controlled component >
  • Be careful how you use underscores in variables. When an underscore precedes a variable name, it indicates that the component or function/value is private
  • State<>, the Angle brackets will write the name of the controlled component

Then replace the control name

  • Type writes the controller name. The return value is an instance of the controller class

The third step

So let’s start writing this counter

The main dart

Dart first passes a value to the counter component

If the component is static, it needs to receive parameters

If it is a dynamic component, it needs to receive parameters

  • If we are passing a numeric string, we can use the first method, if we are passing a component/class, we can use the second method, and the second method is the system specification

Will pass

And then we use the parameters in the controller

Widget. Parameter name to get the parameter

The fourth step

Let’s start with a basic page

Let’s add another button

When the number on the page needs to be increased, we define a status value

The number needs to increase, so we need to write a function to increase the number

But if you click on the button, it doesn’t work, we’re updating the data, but the view isn’t updating, so we need setState

If we don’t use setState, our view won’t refresh