Everything about Flutter is a component. There are more than 350 subclasses of widgets and indirect subclasses alone. This collection of Flutter component inheritance diagrams can help you better understand how to learn about Flutter. Do you really need to learn 350 + components?

There is a famous 80/20 rule in economics

The 80/20 rule was discovered by the Italian economist Pareto. Pareto thought that the most important part of any set of things was only a small part about 20%, and the other 80%, though majority, was secondary.

And we learn Flutter Yu Erba are also applicable to the law, most of the components is rarely used at ordinary times, so as a beginner, just learn the 20% commonly used components, the commonly used components and case address: laomengit.com/guide/intro…

In addition to common components, summed up the more than 300 other components to the detailed usage, these components can be used as a manual, when used in reference to, address: laomengit.com/flutter/wid…

The component tree

When Flutter creates an App, all the components will eventually generate a component tree, as shown in the following code:

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
      ),
      home: Scaffold(
        body: Text('the old meng'),),); }}Copy the code

The main function is where the application starts, running the MyApp component. The generated component tree is as follows:

Center the Text component as follows:

Scaffold(
  body: Center(
    child: Text('the old meng'),),)Copy the code

The generated component tree is as follows:

Add an AppBar to your application:

Scaffold(
  appBar: AppBar(),
  body: Center(
    child: Text('the old meng'),),)Copy the code

The generated component tree is as follows:

StatefulWidget vs StatelessWidget

The components of Flutter are classified into stateless widgets and stateful widgets. The only difference is how the component is reloaded at run time. The StatelessWidget component reloads to create an instance of the current component, while the StatefulWidget component reloads not to create the instance but to re-execute the build function.

How the StatelessWidget component is created:

class StatelessWidgetDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    returnContainer(); }}Copy the code

The build function returns the current component, which is immutable once created and can only be executed once. If you want to redraw this component, you can only recreate a new instance of the component.

How StatefulWidget components are created:

class StatefulWidgetDemo extends StatefulWidget {
  @override
  _StatefulWidgetDemoState createState() => _StatefulWidgetDemoState();
}

class _StatefulWidgetDemoState extends State<StatefulWidgetDemo> {
  @override
  Widget build(BuildContext context) {
    returnContainer(); }}Copy the code

The StatefulWidget component is created differently from the StatelessWidget in that the build function in State<> returns the current component, and a stateful component can be redrawn multiple times over its lifetime by calling the Build function multiple times instead of creating a new instance.

The setState method is called to redraw the StatefulWidget component. Setstate will redraw itself and its child components. Therefore, try to encapsulate the StatefulWidget component to avoid invalid reconstruction and redrawing, which may affect performance.

Quick writing tips: You can quickly create StatelessWidget components by typing STL in Android Studio and VS Code and hitting Enter. Similarly, you can quickly create StatefulWidget components by typing STF and hitting Enter. This is what the editor Live Templates does.

Material vs Cupertino

There are two styles of Flutter components: Material and Cupertino. Cupertino is an ios-style component named with the Cupertino prefix. Like cupertino oslider and CupertinoDatePicker, Material Design was created by Google to provide a more consistent and extensive “look and feel” for mobile phones, tablets, desktops and “other platforms.”

Flutter uses a set of codes to behave consistently across platforms. It does not draw different shapes for different platforms, such as using AlertDialog to pop up warning boxes. Flutter works equally well on Android and iOS.

But there are some features that Flutter distinguishes platforms. For example, the ListView slides to the bottom, and Android has a light blue (by default) arch at the bottom that iOS does not. This is because Flutter distinguishes platforms in code when it encapsulates this component. Therefore, if you look at the Flutter source code, you will often see that different processes are made for different platforms.

communication

Old Meng Flutter blog address (330 controls usage) : laomengit.com