Flutter

The Flutter Engine is responsible for thread management, Dart VM state management, and Dart code loading. The Framework implemented by the Dart code is the primary API that the business touches, and concepts such as widgets are part of the Framework at the Dart level.

The frame structure of Flutter below illustrates how it is rendered and implemented

Flutter was designed from the very beginning for pure Flutter applications, which had only one FlutterView and Root Isolate throughout their entire lifecycle. The interface jump can be realized in FlutterView by the Route of the Flutter Framework

  • One FlutterView corresponds to one FlutterEngine instance;

  • One FlutterEngine instance corresponds to one Dart Isolate instance.

  • Only one Dart VM is available for a process.

  • Dart Isolate instances exist on a Dart VM. The Isolate is the execution environment for Dart code.

The essential differences between Flutter and other cross-platform solutions:

  • Frameworks such as React Native simply invoke system components through JavaScript VIRTUAL machine extensions, and render components by Android and iOS systems.
    • The upper layer is JS language, through the middle layer bridge, and then by Android and iOS system for component rendering
    • There will be some differences between different platforms, which cannot be unified
  • Flutter completes its own loop of component rendering
    • Different platforms don’t need to write different component rendering interfaces for iOS or Android
    • Performance is faster with less overhead of mid-tier Bridges

Initialization – Configuration

Take the ios development model as an example

  • Visual Studio Code

  • MacOs 10.13 above

  • Xcdoe

    • After the configuration is complete, run the open-a Simulator command to open the iOS Simulator

  • The Flutter SDK installation package

    • Edit the ~/.bash_profile file,export PATH="$PATH:pwd/flutter/bin"Append the execution PATH of the flutter command to the environment variable PATH

  • create the app

Flutter command

cd flutter_app
export PATH="$PATH:`pwd`/flutter/bin"
echo $PATH
which flutter
open -a Simulator
flutter create my_app
cd my_app
flutter run

Copy the code

Hello Word

widget

The concepts of Flutter, including the application, view, view controller, layout, etc., are all built on top of the widgets. In the build method, we usually configure the UI corresponding to the underlying widgets. Or you can customize the UI by combining basic widgets. For example, in MyApp, I set the application homepage (MyHomePage) through the MaterialApp App App framework of the Flutter App. Of course, [MaterialApp] (API. Flutter. Dev/flutter/mat… Also a Widget that allows you to design different styles by referring to the API.

In addition to the static configuration passed in when the parent Widget is initialized, the display of a StatefulWidget (such as Image or Checkbox) also needs to handle user interaction (such as a user clicking a button) or changes to its internal data (such as network data packet return). And it’s reflected in the UI.

StatelessWidget stateless components such as Text, Container, Row, Column, etc.) do not depend on any information other than the configuration parameters obtained through the parent widget’s initialization.

hello word

MyApp is a running instance of the Flutter application. The entry to the application is implemented by calling the runApp function in the main function. The home page of the app is MyHomePage, a StatefulWidget with the _MyHomePageState state. _MyHomePageState creates a page view with navigation, text, and buttons by calling the Build method and configuring the data accordingly.

The official website demo interpretation is as follows:

Gesture – Gesture code

  • Pointer to the event
  • Gesture recognition

Finger touch screen PointerDownEvent, finger move screen PointerMoveEvent, finger lift PointerUpEvent, and touch cancel PointerCancelEvent

Gesture for semantic manipulation, such as clicking onTap, double-clicking onDoubleTap, long-pressing onLongPress, dragging onPanUpdate, zooming onScaleUpdate, etc

Flutter provides a Listener Widget that listens for the original pointer events of its child widgets and an Arena that identifies which gestures should respond to user events.

The main.dart file is as follows

import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page')); } } class MyHomePage extends StatelessWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override Widget build(BuildContext context) {returnDefaultTabController( length: 3, child: Scaffold( body: TabBarView( physics: NeverScrollableScrollPhysics(), children: [ListenerWidget(), // Flutter provides a ListenerWidget, You can listen to the original pointer event of its child Widget DragWidget(), // drag DoubleGestureWidget(), // double click gesture],), bottomNavigationBar: TabBar(tabs: [ Tab(icon: Icon(Icons.home),text:"Pointer event",),
            Tab(icon: Icon(Icons.rss_feed),text: "Gesture",),
            Tab(icon: Icon(Icons.perm_identity),text: "Gesture conflict",)
          ],
          unselectedLabelColor: Colors.blueGrey,
          labelColor: Colors.blue,
          indicatorSize: TabBarIndicatorSize.label,
          indicatorColor: Colors.red,
        ),
      ),
    );
  }
}


class ListenerWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Listener(
        child: Container(
          color: Colors.red,
          width: 300,
          height: 300,
        ),
        onPointerDown: (event) => print("down $event"),
        onPointerMove:  (event) => print("move $event"),
        onPointerUp:  (event) => print("up $event"))); } } class DragWidget extends StatefulWidget { @override _DragState createState() => new _DragState(); } class _DragState extends State<DragWidget> {double _top = 0.0; // Offset from top double _left = 0.0; Override Widget Build (BuildContext context) {return Scaffold(
      appBar: AppBar(title: Text("demo"21.),), body: Stack(children: <Widget>[toy (top: _top, left: _left, child: GestureDetector) Container(color: Colors.red,width: 50,height: 50), onTap: ()=>print("Tap"),
              onDoubleTap: ()=>print("Double Tap"),
              onLongPress: ()=>print("Long Press"),
              onPanUpdate: (e) {
                setState(() {// Trigger State update _left += e.delta.dx; _top += e.delta.dy; }); },),)],); } } class DoubleGestureWidget extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement buildreturn Scaffold(
      body: RawGestureDetector(
        gestures: {
          MultipleTapGestureRecognizer: GestureRecognizerFactoryWithHandlers<
              MultipleTapGestureRecognizer>(
                () => MultipleTapGestureRecognizer(),
                (MultipleTapGestureRecognizer instance) {
              instance.onTap = () => print('parent tapped '); PinkAccent (color: Colors. PinkAccent, Child: Center(Child: GestureDetector(onTap: () =>print('Child tapped'(color: Colors. BlueAccent, width: 200.0, height: 200.0,),)); } } class MultipleTapGestureRecognizer extends TapGestureRecognizer { @override void rejectGesture(int pointer) { acceptGesture(pointer); }}Copy the code

Related to ios gesture password development

  • Dots in the gesture code

  • Gesture drawing View

  • The UI

  • GesturesViewController: This controller is used to display the UI, and you can replace it with your own controller,

  • GesturesView: used for dot button initialization and layout,

  • PointView: dot gesture button.

Plugin calls the native function – camera

  • Pubspec.yaml adds the required dependencies.
    • flutter
    • sdk: flutter
    • Camera: “> = 0.5.7”
    • Path_provider: ^ 0.5.0
dependencies:
flutter:
  sdk: flutter
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.Cupertino_icons: ^ 0.1.2 camera:"0.5.7"
  # path_provider: "/Users/Documents/ppt/pic/"
  # path: "/Users/Documents/ppt/pic/"
  #  path: "../"Path_provider: ^0.5.0 // flutter pub getCopy the code

flutter pub get error

Ios configuration info. Plist

<key>NSCameraUsageDescription</key> <string>Can I use the camera please? </string> <key>NSMicrophoneUsageDescription</key> <string>Can I use the mic please? </string>Copy the code
  • Gets a list of available cameras.
  • Create and initialize the CameraController.
  • CameraPreview displays the camera source.
  • The CameraController CameraController takes photos.
  • Display images using the Image Widget.

Community problems

  • New projects can be tried directly
  • How old project Flutter co-exists with Native, data state management (Ali, Byte Mobilization)
  • performance
    • Instead of destroying the entire RenderObject tree rebuild, the Element layer inside Flutter minimizes modifications to the real rendered view and improves rendering efficiency. However, the destruction and reconstruction of a large number of Widget objects is unavoidable. If the rebuilding of a child Widget involves some time-consuming operation, the rendering performance of the page will decrease dramatically.
    • Rational use of StatefulWidget stateful component StatelessWidget stateless component

reference

flutter camera camera