preface

The first two articles introduced the BASIC Dart syntax and Dart object orientation of the Flutter development language. This article begins with an introduction to some of the fundamental components of Flutter.

A:FlutterThe principle of the author

1.1 FlutterwithReact NativeThe difference between

  • React Native
    • Depend on native, essence is packaging on native. The program needs to run whenJSCode is converted to native code execution. Low efficiency, wide variety of styles across platforms, high reliance on native.
  • Flutter
    • It has its own rendering engine, which includes virtual machines. High efficiency, low dependence on native, cross-platform style highly unified. However, the installation package is large.

1.2 Incremental Rendering

The core of the Flutter rendering mechanism is incremental rendering. When a component of the rendering tree is modified, it will re-render that component, not all of it. For components that do not change, const modifications are recommended, so it is efficient.

2:Hello Flutter

2.1 materialpackage

To use the basic component of Flutter, you need to import the Material package, similar to UIKit in iOS. IOS displays view controls such as UIView. All interface elements in Flutter are called widgets (note: Widgets describe the interface, not the interface). A separate opening analysis will follow.) .

import 'package:flutter/material.dart';
Copy the code

2.2 runApp

Whereas iOS requires UI controls to be added to Windows for display, Flutter gives a widget and attaches it to the screen via the runApp method. Add the Center and Text widgets to set the display and reading direction.

void main(a) {
  // Execute runApp, pass in the widget, and it will be displayed on the screen
  runApp(
    // The core of the Flutter rendering mechanism is incremental rendering, so any widget that does not change,
    // Compilers always recommend const decorations. This is why Flutter is efficient.
    const Center(
      child: Text(
        'hello flutter'.// Text reading direction from left to right,
        // This is not required in the APP, but is required when Text is added directly to the Center and displayed on the screen
        textDirection: TextDirection.ltr,
      ),
    )
  );
}
Copy the code

Run the project and Hello Flutter is displayed on the screen.

Three:Textcomponent

3.1 what isText

A Text widget is a Text string that displays a single style. Single or multiple lines can be displayed.

The style argument is optional. When omitted, the text will use the style of the recently enclosed DefaultTextStyle. If the textStyle. inherit property for a given style is true (the default), the given style will be merged with the most recent enclosed DefaultTextStyle. This merging behavior is useful for bolding text when using the default font family and size, for example.

Using the text. rich constructor, the Text Widget can display TextSpan paragraphs with different styles. The following example shows the different styles of Hello Beautiful World for each word.

3.2 the interaction

To make the Text widget react to touch events, wrap it in the GestureDetector Widget using the GestureDetector. OnTap handler.

Four: customwidget

Custom Widgets, which require a custom class that inherits the StatelessWidget or StatefulWidget, override the Build method to return the Widget.

Five: cache lock solution

Note: when Android Studio executes a Flutter project, it may cause the cache to lock. In this case, you need to delete the lockfile cache file in the Flutter SDK: Flutter -> bin -> cache -> lockfile

Stay tuned and continue to output.