First of all, unify a concept. Whether it is component (component), widget (control), module (android module), within my understanding ability, it is all in order to extract a certain code block of a specific function, accept parameters externally, and implement functions internally.
It is a granulated entity that is relative to the steel bars, cement, and bricks of the building. They have characteristics, are independent of each other, and each has their own characteristics, and at the same time provide a certain external interface that can be cohesive and integrated. component (component) and widget (control) are collectively referred to as components. Friends who have different understandings of component and widget hope to receive your insights and suggestions in the comment area.
In front-end development, vue, react, jquery, native (html, js, css combination) provides or encapsulate components. Then they all have common features. Only after a simple understanding and abstracting this general concept can we easily realize the functions we want in different frameworks and languages.
So why do you record flutter component development today? Because I need to use flutter to implement a component. flutter is a ui framework that I am not familiar with. Those component concepts that have been abstracted need to be implemented using flutter framework and dart language features.
Those who are familiar with vue and react can have some concepts about components:
1. The component must accept prop
2. The component must have a default prop
3. There are variables that are maintained within the component
4. The component's prop is optional
5. The component's prop has a specific value. If the attribute value that does not match is invalid (enumeration)
6. Different values of the same prop attribute of the component will have different styles (for example, the type of antd button)
7. Multiple props of the component will form different styles, such as the type and status of the antd button (warn, danger, loading)
8. There is a prop that must be passed on to the components
9. Components have optional props without default values
Then, let's use flutter to implement the above functions step by step
【3, there are variables that are maintained by themselves within the component]
So this component is a component with its own state, so you must inherit StatefulWidget
【1, the component must accept prop】
【2, the component must have a default prop;】
The code is as follows:
class Button extends StatefulWidget {
double height = 48;//Default propState<Button> createState() => _ButtonState();
}
class _ButtonState extends State<Button>{}【8, the component must be passed prop】, the text parameter must be passed
class Button extends StatefulWidget {
final String text;
Button(
{
,
required
});
State<Button> createState() => _ButtonState();
}
class _ButtonState extends State<Button>{}【9, the component has optional prop without default value】, okTxt is optional
【4, component prop optional】
class Button extends StatefulWidget {
final String? okTxt;
Button(
{
,
});
State<Button> createState() => _ButtonState();
}
class _ButtonState extends State<Button>{}Oktext can use the truth to determine whether it is null
[6. Different values of the same prop attribute of the component will have different styles (for example, the type of antd button)]
[7. Multiple props of the component will form different styles, such as the type and status of the antd button (warn, dangerous, loading)]
These two are more internal logic, which reassign the values of other variables in the internal state according to a specific prop. These two variables are generally passed in the outside by enumeration.
//Button type: default, border, dangerous, textenum Type { primary, dashed, warn, text }
//Button status: default, loading, disable, clickingenum Status { primary, loading, disabled }
class Button extends StatefulWidget {
Type type = ;
Status status = ;
Color color =;
Button(
{,
= ,
= ,
required }
);
}
class _ButtonState extends State<Button>{
@override
void initState() {
();
//Maintain the value of another variable according to type switch () {
case :
= ;
break;
default:
break;
}
}
}The last question? _What does ButtonState do? How does it access the variables declared in Button?
_ButtonState is a class that provides access to the life cycle of the component and implements the content of the component's specific page rendering, not just state management. But the name looks like vuex or react state, and it is also possible that the page rendering dom is also considered a state in StatefulWidget.
Through widget[variable name] (for example), you can access the variable (prop) internally declared by Button class (for example).
So far, if you can understand the above concept, you can use flutter to write a basic component that meets the needs of daily work.
Added one more content: If the component needs to use animation, it needs to use mix-in. It is easy to understand that children's shoes that have used vue. flutter uses width statement to mix other functions, code:
class _ButtonState extends State<Button> with SingleTickerProviderStateMixin {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->This is the end of this article about the complete explanation of the Flutter component development process. For more related Flutter component content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!