Ինչ եք իմանում Flutter-ի ներքին կառուցվածքի մասին?

Flutter-ի միջուկը բաղկացած է շարժականից, շրջանակից և տեսժետներից:

• Flutter շարժականը: Գրված է C++-ով և տրամադրում է ցածր մակարդակի API՝ ռենդերինգի, տեքստի աշխատանքի, հոսքերի և պլագինների համար: Այն անմիջապես շփվում է պլատֆորմի (iOS, Android, Web, Desktop) և գրաֆիկական API-ների (օրինակ, Skia) հետ: Շարժականը կառավարում է ռենդերինգը, ասինխրոն գործառույթները և հավելվածի կյանքի ցիկլը:

• Flutter շրջանակը (Framework): Գրված է Dart-ով և տրամադրում է վերևի շերտ՝ շարժականից: Այն ներառում է բազմաթիվ պատրաստի կոմպոնենտներ:

  • Foundation: Հիմնական դասեր և օգնական ֆունկցիաներ:
  • Rendering: Շերտ՝ ռենդերային ծառի կառավարման և նրա նկարագրման համար:
  • Widgets: UI-ի հիմնական կառուցվածքային տարրեր, որոնք ձևավորում են տեսժետների ծառը:
  • Material Design և Cupertino: Տեսժետների հավաքածուներ՝ իրականացնելով Material Design-ի ոճը և iOS-ի դիզայնը:

• Տեսժետներ: Flutter-ում ամեն ինչ տեսժետ է: Նրանք նկարագրում են UI-ի կոնֆիգուրացիան: Կան երկու հիմնական տեսակ.

  • StatelessWidget: Տեսժետ՝ առանց ներքին փոփոխական վիճակի: Նրա UI-ն կախված է միայն նրա մուտքային պարամետրերից (properties).
  • StatefulWidget: Տեսժետ, որը կարող է ունենալ փոփոխական վիճակ: Այն բաղկացած է տեսժետից և State օբյեկտից, որտեղ պահվում է վիճակը և UI կառուցելու տրամաբանությունը (build մեթոդ):

Ռենդերային գործընթացը:

1. Build: Ֆրեյմվորկը կանչում է build() մեթոդը տեսժետի, որը վերադարձնում է այլ տեսժետների ծառ:
2. Element Tree: Տեսժետների ծառի հիման վրա ստեղծվում է տարրերի ծառ (Element Tree), որը ներկայացնում է UI-ի կառուցվածքը: Տարրերը կապում են տեսժետները համապատասխան ռենդերային օբյեկտների հետ:
3. Render Object Tree: Տարրերը ստեղծում և կառավարում են ռենդերային օբյեկտների ծառ (Render Object Tree). Ռենդեր օբյեկտները պատասխանատու են չափման, գույնի և հիթ-տեստի համար:
4. Painting: Մոտոր Skia (մոբայլ և դեսկտոպ) կամ CanvasKit (վեբ) օգտագործում է ռենդերային օբյեկտների նկարազարդումը էկրանին:

Ռեակտիվ ծրագրավորում:

Flutter-ը օգտագործում է ռեակտիվ մոտեցում UI կառուցելու համար: Երբ փոփոխվում է հավելվածի վիճակը, ֆրեյմվորկը վերականգնում է այն մասերը տեսժետների ծառի, որոնք կախված են այդ վիճակից: Դա կատարվում է ավտոմատ և արդյունավետ՝ diffing մեխանիզմի և տեսժետների արագ ստեղծման և ոչնչացման շնորհիվ:

Հատուկ վերնագրեր (Hot Reload) և Հատուկ վերագործարկում (Hot Restart):

• Hot Reload: Թարմացված Dart կոդը ներդրվում է աշխատող հավելվածում՝ առանց վիճակի կորուստի: Իդեալական է արագ UI- ի վերարտադրման համար:
• Hot Restart: Հավելվածը վերագործարկվում է սկզբից՝ թարմացված կոդով և մաքրված վիճակով: Օգտագործվում է, երբ Hot Reload-ը չի աշխատում, օրինակ՝ initState-ի փոփոխությունների դեպքում:

Պլատֆորմ-специֆիկ կոդ:

Flutter-ը թույլ է տալիս շփվել նատիվ API-ների հետ՝ պլատֆորմային ալիքների (Platform Channels) միջոցով: Դա թույլ է տալիս կանչել նատիվ կոդի մեթոդներ (Java/Kotlin Android- ում, Swift/Objective-C iOS- ում) և ստանալ արդյունքները Dart- ի հետ:

// Օրինակ՝ պլատֆորմային ալիք օգտագործելու
import 'package:flutter/services.dart';

static const platform = MethodChannel('samples.flutter.dev/battery');

Future<void> getBatteryLevel() async {
  String batteryLevel;
  try {
    final int result = await platform.invokeMethod('getBatteryLevel');
    batteryLevel = 'Բատարիայի մակարդակը: $result %.';
  } on PlatformException catch (e) {
    batteryLevel = "Չհաջողվեց ստանալ բատարիայի մակարդակը: '${e.message}'.";
  }
  // UI-ի թարմացում
}