Engineering structure

Opening Android Studio to create a Flutter project creates a counter project by default. Under project on the right, you can see:

Analyze several important file directories and files:

Android: contains android specific files and android subprojects build: android: contains iOS specific files and iOS subprojects lib: places the flutter code main.dart: Iml: project configuration file pubspec.lock: a file that records the actual dependency information of the current project pubspec.yaml: a file that manages third-party libraries and resourcesCopy the code

The reason for the Android and iOS subprojects is that Flutter will eventually run in its native form.

Learn how the Flutter project works from a simple demo

In the world of Flutter, everything is a widget. A widget encapsulates the visual effects of a component and is the carrier of the UI interface, which is built through the build method. Look at the code in the main.dart file

void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'You have pushed the button this many times:', ), Text( '$_counter', style: Theme.of(context).textTheme.headline4, ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: Icon(Icons.add), ), // This trailing comma makes auto-formatting nicer for build methods. ); }}Copy the code
  1. Starting with the main function, callrunAppThe MyApp method is passed in, and the APP is the home page we see.
  2. In the Build method of MyApp, the MaterialApp (also a widget) is returned with a number of configurable properties such as application topic, application name, language identifier, component routing, and so on.
  3. In the MaterialApp, you see MyHomePage (which is also a widget), but is a subclass of StatefulWidget that builds the UI not directly through the build method, but by passing it to _MyHomePageState.

Here you can see that there are two types of widgets in Flutter, the StatelessWidget and the StatefulWidget.

StatelessWidget: a StatelessWidget where the UI is built with certainty from the beginning and does not change over the lifetime of the widget.

StatefulWidget: a StatefulWidget. The setState method is called to notify the flutter framework of the data changes during the lifetime of the widget to recreate the widget.

Will re-creating and destroying widgets as data changes affect performance? How is flutter optimized?

The answer is: no. Because the framework will converge the changes of the upper UI configuration to the bottom real rendering through an intermediate layer, so as to minimize the changes of the real rendering view and improve the rendering efficiency, instead of destroying the entire rendering view tree reconstruction if the upper UI configuration changes.

conclusion

In the world of Flutter, widgets are everywhere. Everything you see on the page is a widget, such as AppBar, Center, Text, FloatingActionButton… We can configure the Text size, Text color, Text content, click events, etc. When the widget is built, we can update the UI by calling the setState method after the data changes.