Clever Geek Handbook

Flattern 1.22 Ankündigung

Hallo! Ich bin Evgeny Saturov, Flutter TeamLead bei Surf . Ich präsentiere die Übersetzung des offiziellen Artikels über das neue Flutter 1.22-Update - wie üblich, ergänzt durch meine Kommentare.



Diese Veröffentlichung ist eine der bemerkenswertesten für mich in den letzten Jahren. Wir kommen nicht nur aufgrund des Aufkommens neuer Widgets voran, die niemanden überraschen werden, sondern auch aufgrund schwerwiegender Infrastrukturänderungen sowie der betrieblichen Unterstützung neuer Betriebssysteme. Es ist nur der Anfang!



Fuhr, um sich mit der neuen Version von Flutter 1.22 vertraut zu machen.









Wir freuen uns, die neueste Version von Flutter mit umfassender Unterstützung für iOS 14 und Android 11 bekannt zu geben. Flutter 1.22 baut auf den Grundlagen früherer Versionen auf und ermöglicht Entwicklern, schnelle und schöne Benutzeroberflächen für mehrere Plattformen aus einer einzigen Codebasis zu erstellen. Unsere vierteljährlich stabilen Releases enthalten neue Funktionen, verbesserte Leistung und Fehlerbehebungen.



Kürzlich wurden neue Versionen des mobilen Betriebssystems veröffentlicht. Wir haben uns darauf konzentriert, dass Android 11 und iOS 14 in dieser Flutter-Version eine gute Leistung erbringen.



Flatter-Update für iOS 14 : Unterstützung für den neuen Xcode 12, neue Symbole und Unterstützung für App-Clips - ein Analogon zu Instant Apps für Android.



Flatter-Update für Android 11: Unterstützung für verschiedene Arten von "Pony" für Displays sowie flüssigere Animationen beim Aufrufen von Softtastaturen hinzugefügt.



Diese Veröffentlichung erscheint nur zwei Monate nach der Veröffentlichung von Version 1.20, aber selbst in dieser kurzen Zeit haben wir 3024 Ausgaben geschlossen und 1944 PRs von 197 Mitwirkenden eingefroren.



Kommentar



Übrigens: Wenn Sie schon lange Flutter-Mitarbeiter werden möchten, aber nicht wissen, wo Sie anfangen sollen, finden Sie hier einige Tipps. Filtern Sie Probleme nach dem guten ersten Beitragstag : Von Zeit zu Zeit erscheinen dort interessante Probleme , mit denen Sie Ihre Reise in Open Source beginnen können. Sie können auch eine Funktion des Traums einer Person implementieren, indem Sie Probleme nach dem neuen Feature- Tag filtern . Es gibt Rätsel auch für Anfänger. Sie können Ihren Namen in der Geschichte des Frameworks beibehalten - natürlich, wenn die Entwickler des Flutter-Teams zustimmen, dass eine solche Funktion implementiert werden sollte.





Neben der Unterstützung neuer Versionen für mobile Betriebssysteme gibt es weitere Neuigkeiten, darunter eine Vorschau auf eine der am häufigsten nachgefragten Android-Funktionen: 



  • Wiederherstellung des Staates, 

  • neues "Universum" Material der Knöpfe, 

  • neue Bibliothek zur Unterstützung der Lokalisierung und Internationalisierung in Zusammenarbeit mit Hot Reload, 

  • neuer Navigator, 

  • stabile Version für Plattformansichten (Basis für Google Maps- und WebView-Plugins),

  • Ein Schalter, den Sie Ihrem Code hinzufügen können, um das Scrollen auf Geräten mit Hochfrequenzanzeigen zu verbessern. 



Wir haben auch ein neues Tool zur Analyse der Größe von Anwendungen. Außerdem können Entwickler jetzt Plugins nur für die Plattformen erstellen, die sie benötigen, indem sie in der Plugin-Konfiguration explizit Zielplattformen angeben.



IOS 14 Zielplattform



Jedes Mal, wenn eine neue Version eines mobilen Betriebssystems angekündigt wird, testen wir sie gründlich: Wir suchen nach Inkompatibilitäten oder Änderungen, die sich auf den Betrieb von Flutter und seinen Tools auswirken können.



Im Fall von iOS 14 haben wir einige Änderungen an Flutter vorgenommen, um sicherzustellen, dass es genau so funktioniert, wie es die Entwickler wollen:



  • Xcode 12 erfordert iOS 9.0 oder höher, daher gibt unsere Standardvorlage jetzt 9.0 anstelle von Plattform 8.0 an.

  • Flutter 1.22 behebt bestimmte iOS 14-Abstürze und Probleme beim Rendern von Schriftarten.

  • Probleme mit der Bereitstellung auf physischen Geräten (die Anwendung wurde nicht auf einem Gerät ausgeführt - nur auf einem Emulator) wurden in Flutter 1.20.4 behoben.

  • , , , Flutter Flutter 1.20.4.

  • Flutter iOS 14 ( , Flutter-).



Fazit: Wenn iOS 14 die Zielplattform für Ihre Flutter-App ist, empfehlen wir dringend, sie mit Flutter 1.22 neu zu erstellen und sofort im App Store bereitzustellen, um die beste Benutzererfahrung für Benutzer mit iOS 14 zu bieten.



Weitere Informationen, einschließlich Einige Gedanken zu Add-to-App, Deep Links und Benachrichtigungen finden Sie in der iOS 14-Dokumentation unter flutter.dev .



Unabhängig davon möchten wir auf die aktualisierte Unterstützung für die neue Schriftart iOS SF Symbols eingehen , die uns dazu inspiriert hat, einige Zeit mit der Aktualisierung des Pakets cupertino_icon zu verbringen . Bestehende Anwendungsfälle CupertinoIconswerden automatisch im neuen Stil angezeigt, sobald Sie die Abhängigkeit aktualisierencupertino_iconsauf die neue Hauptversion 1.0. Wenn Sie cupertino_icons1.0 zusammen mit Flutter 1.22 verwenden, haben Sie über die CupertinoIcons-API Zugriff auf ~ 900 neue Symbole .







Eine vollständige Liste der Symbole finden Sie auf der Vorschau- Seite cupertino_icons und auf der Seite mit den Migrationsdetails unter flutter.dev .



Eine weitere Funktion, die Sie mit Flutter unter iOS 14 ausprobieren können, sind App-Clips. App Clips ist eine neue Funktion von iOS 14: Dies sind Mini-Anwendungen mit einem Gewicht von bis zu 10 MB. Sie ermöglichen dem Benutzer den Zugriff auf bestimmte Funktionen, ohne dass die gesamte Anwendung aus dem AppStore heruntergeladen werden muss. Flutter Version 1.22 kann in einer vorläufigen Implementierung mit App Clips arbeiten.





App Clips auf Flattern



Weitere Informationen zum Erstellen von App-Clips von Anwendungen mit Flutter finden Sie in der Dokumentation zu flutter.dev . Siehe auch ein einfaches Beispielprojekt .



Kommentar



Erinnerst du dich an Instant Apps für Android? Es sieht so aus, als hätte Apple beschlossen, unser Jahr 2017 zurückzubringen, und eine ähnliche Lösung eingeführt - App Clips. Darüber hinaus können Sie App-Clips auch dann implementieren, wenn Sie keine native, sondern eine plattformübergreifende Anwendung schreiben.



Vergessen Sie nicht die Einschränkungen: Wenn Ihre Assembly mehr als 10 MB wiegt, funktioniert es nicht, sie im App Clips-Format auszuführen. Bei einer Flutter-Anwendung kann dies ein sehr dringendes Problem sein. Dies erfahren Sie jedoch in der zweiten Hälfte des Artikels: Dort erfahren Sie, wie Sie die Build-Größe Ihrer Anwendung mit einem praktischen Tool überwachen können.





Android 11



Diese Version von Flutter wurde fast zeitgleich mit der Version von Android 11 veröffentlicht. Das Flutter-Framework und die Engine wurden aktualisiert, um zwei neue Funktionen zu unterstützen, die in der neuesten Version von Android eingeführt wurden.



Zunächst berücksichtigt Flutter jetzt die Position der Pony und Ausschnitte auf dem Bildschirm des Android-Telefons sowie die abgerundeten Kanten des Bildschirms.







Mit den APIs MediaQuery und SafeArea ist es jetzt einfach, eine Benutzeroberfläche zu schreiben, in der anklickbare Bereiche nicht auf die Ausschnitte und abgerundeten Kanten des Bildschirms treffen. 



Der sichtbare Bereich der Anwendung ändert die Größe nicht abrupt, sondern reibungslos. Der Anwendungsinhalt wird synchron mit der Bildschirmtastatur gescrollt. Beachten Sie die





FAB-



Ausgabe Nr. 19279- Langjähriges Problem, bei dem die Bildschirm-Tastatur-Animation zum Ein- und Ausblenden nicht mit dem Flutter-Einschub synchronisiert wird. Dies wurde für Android 11 behoben. 



Bisher gab es Probleme aufgrund von Flutter-Plugins, als Flutter-Code in eine native Android-Anwendung eingefügt wurde. Wir haben die API für die Integration von Flutter in Android umgeschrieben und die API v2 veröffentlicht, die frei von diesen Mängeln ist. Ab Version 1.22 wird die Unterstützung für die alte API v1 eingestellt.



Wenn Sie die Android v1-API weiterhin verwenden, bedeutet dies Folgendes für Sie:



  • Neue Plugins werden ohne Unterstützung der v1-API erstellt.

  • Das Flatter-Tool-Konfigurationsflag —no-enable-android-embedding-v2wurde entfernt. Dies ist jetzt das Standardverhalten.

  • Ältere Apps, die API v1 noch verwenden, zeigen während der Erstellung eine Warnung vor Verfall an, die auf die Dokumentation zur Unterstützung neuer Android-Plugin-APIs verweist .



Wenn Sie in der Zwischenzeit noch eine Flutter-App haben, die auf API-Version 1 für Android basiert, funktioniert sie weiterhin. Möglicherweise werden jedoch neue Plugins angezeigt, die auf API v2 abzielen. Sie können nicht von der Android API v1 verwendet werden. Weitere Informationen finden Sie in der Dokumentation zum Brechen von Änderungen .







, Flutter , . 1.22 , — . App Clips, ( ) , . Android, , , — . .





«»



Die vorhandenen Flutter-Schaltflächen sehen gut aus, können jedoch schwierig zu verwenden sein , insbesondere wenn Sie benutzerdefinierte Themen benötigen. Darüber hinaus wurde die Materialspezifikation um neue Schaltflächen mit neuen Stilen erweitert.



Um mit den Materialrichtlinien Schritt zu halten, führen wir in Flutter 1.22 ein neues "Universum" von Schaltflächen ein.





Neues "Universum" von Materialdesign-Schaltflächen



Neue Widgets und Themen haben neue Klassennamen. Wir haben die Klassen in Flutter umbenannt, um sie an die Materialdesign-Spezifikation anzupassen .







Die neuen Themen folgen dem "normalisierten" Muster, das Flutter kürzlich für neue Material-Widgets übernommen hat. Demo - Version auf DartPad



Dies ist kein Bruch zu ändern, weil die Semantik FlatButton, OutlineButton,RaisedButton, ButtonBar, ButtonBarThemeUnd ButtonThemewird sich nicht ändern. Sie können alte Schaltflächen mit neuen kombinieren. 



Neue Unterstützung für Internationalisierung und Lokalisierung



Die Kernfunktionalität, die Sie zur Internationalisierung (i18n) und Lokalisierung (l10n) Ihrer Anwendungen benötigen, ist von Anfang an in Flutter verfügbar. In dieser Version haben wir Hot Reload-Unterstützung bereitgestellt, um Ihre Anwendung zu aktualisieren, wenn neue l10n-Informationen hinzugefügt werden.







Wenn Sie weitere Informationen zur Flutter l10n-Unterstützung benötigen, einschließlich lokalisierter Nachrichten, Nachrichten mit Parametern, Datumsangaben, Zahlen und Währungen, lesen Sie das Flutter Internationalization-Benutzerhandbuch .



Wenn Sie an i18n und l10n interessiert sind, müssen Sie möglicherweise Zeichenfolgen mit Zeichen verwenden, die nicht in einfaches altes ASCII passen - wie Unicode und Emoji. Das Dart-Team hat kürzlich das Charakterpaket veröffentlichtDies hilft Entwicklern bei der Arbeit mit (erweiterten) Unicode-Graphemclustern. Dieses Paket hilft bei der Lösung von Problemen wie dem korrekten Kürzen einer Zeichenfolge wie "Ein [britischer Flaggen-Emoji] -Text in Englisch" auf die ersten 15 Zeichen. Bei Verwendung der Klasse Stringwäre diese Abkürzung "A [British Flag Emoji] Text in", was nur 12 Zeichen sind, die vom Benutzer gelesen werden können. Auf der anderen Seite charactersergibt die Verwendung des Pakets die korrekte Abkürzung "A [British Flag Emoji] Text in Eng".



Bei dieser PR verwendet Flutter ein Zeichenpaket, um diese komplexen Zeichen korrekt zu behandeln. Bei Verwendung TextFieldmit einer Einschränkung maxLengthwerden beispielsweise Zeichen wie ‍‍ [dreiköpfige Emoji-Familie] jetzt korrekt als ein Zeichen gezählt. Auch mit dieser PRDas Symbolpaket ist in Flutter-Projekten automatisch verfügbar, ohne dass es manuell hinzugefügt werden muss. Hoffentlich erleichtert dies die Arbeit mit Zeichenfolgen aller Art aus allen Ländereinstellungen. Weitere Informationen zum Symbolpaket finden Sie im hervorragenden Artikel " Proper String Manipulation in Dart ".



Google Maps- und WebView-Plugins können in Produktionsanwendungen verwendet werden



Im Flutter-Team sind wir oft vorsichtig, etwas als „produktionsbereit“ zu kennzeichnen, bis wir es selbst getestet haben. Bei den Plugins google_maps_flutter und webview_flutter lag der Hauptgrund für die Verzögerung in der zugrunde liegenden Implementierung von Platform Views , mit der Sie native UI-Komponenten von Android und iOS in einer Flutter-App hosten können. In dieser Version von Flutter freuen wir uns, Ihnen mitteilen zu können, dass wir die Infrastruktur ausreichend gehärtet haben, um diese beiden Plugins für einsatzbereit zu erklären.





webview_flutter-Plugin zur Anzeige von flutter.dev



In Flutter 1.22 haben wir eine alternative Implementierung von Platform Views hinzugefügt, mit der alle bekannten entfernt werdenTastaturprobleme und Probleme mit der Barrierefreiheit in Android-Ansichten . Dies funktioniert mit Android API Level 19 und höher (zuvor erforderliches Level 20). Wir haben auch Verbesserungen an iOS-Streams vorgenommen, die die Plattformansichten effizienter und zuverlässiger machen (und nicht mehr erfordern io.flutter.embedded_views_preview, dass Ihrem iOS ein Flag hinzugefügt wird Info.plist).



Das Plugin webview_flutterunterstützt den neuen Android Platform Views-Modus, muss jedoch derzeit manuell aktiviert werden . Wenn es in der Community weiter verbreitet wird, aktivieren wir es standardmäßig.



Google Maps- und WebView-Plugins haben bereits von Verbesserungen der Plattformansichten profitiert.



Wenn Sie Plattformansichten verwenden möchten, um benutzerdefinierte Benutzeroberflächenelemente in iOS und Android zu hosten, lesen Sie mehr darübernative Android- und iOS-Ansichten in der Flutter-App .



Kommentar



Ein weiteres angenehmes Ereignis, das keine revolutionären Veränderungen im Leben des Entwicklers mit sich bringt. Wir verwenden diese beiden Plugins seit langer Zeit in der Produktion und haben keine Probleme. Wir hoffen, dass der Eintritt in die Phase "Produktionsbereitschaft" diese Situation nicht ändert. Wir würden uns sehr über das offizielle Plug-In für den Yandex MapKit-Support freuen. Bis dahin müssen nur noch Lösungen von Drittanbietern verwendet werden .




Navigator 2.0



Wenn Sie zuvor in Ihren Flutter-Apps die Navigation verwendet haben, haben Sie möglicherweise festgestellt, dass die Hauptdatenstruktur, der Seitenstapel, auf dem der Benutzer navigiert, vor Ihnen verborgen ist. Um dies zu steuern, rufen Sie stattdessen Navigator.pop()oder an Navigator.push(). 



Angenommen, Sie möchten eine Liste von Widgets auf Ihrer Startseite anzeigen und dem Benutzer erlauben, auf eines davon zu klicken, um zur Detailseite dieser bestimmten Farbe zu gelangen.







Zwei Bildschirme können folgendermaßen implementiert werden: 



class ColorListScreen extends StatelessWidget {
 final List<Color> colors;
 final void Function(Color color) onTapped;
 ColorListScreen({this.colors, this.onTapped});
 
 @override
 Widget build(BuildContext context) => Scaffold(
       appBar: AppBar(title: Text('Colors')),
       body: Column(
         children: [
           // you can see and decide on every color in this list
           for (final color in colors)
             Expanded(
               child: GestureDetector(
                 child: Container(color: color),
                 onTap: () => onTapped(color),
               ),
             )
         ],
       ),
     );
}
 
class ColorScreen extends StatelessWidget {
 final Color color;
 const ColorScreen({this.color});
 
 @override
 Widget build(BuildContext context) => Scaffold(
       appBar: AppBar(title: Text('Color')),
       body: Container(color: color),
     );
}


Mit dem einfachsten Stil Navigator 1.0 können Sie zwischen den beiden Bildschirmen navigieren. Es sieht ziemlich einfach aus: 



class _ColorAppState extends State<ColorApp> {
 List<Color> _colors = [Colors.red, Colors.green, Colors.blue];
 
 @override
 Widget build(BuildContext context) => MaterialApp(
       title: 'Color App',
       home: Builder(
         builder: (context) => ColorListScreen(
           colors: _colors,
           // the Navigator manages the list of pages itself; you can only push and pop
           onTapped: (color) => Navigator.push(
             context,
             MaterialPageRoute(builder: (context) => ColorScreen(color: color)),
           ),
         ),
       ),
     );
}


Ein Aufruf Navigator.push()genügt, um eine weitere Seite über die erste zu legen und einen Stapel von zwei Seiten zu erstellen. Im Gegensatz zur Liste der in der Erstellungsmethode erstellten Container ColorListScreenist dieser Stapel jedoch vor Ihnen verborgen. Und weil es versteckt ist, ist es schwierig, es in anderen Szenarien zu verwalten, z. B. bei der Verarbeitung von Deep-Links für die anfängliche Route, die beispielsweise durch native Einbettung oder eine URL aus dem Internet oder eine Absicht von Android bereitgestellt werden. Es ist auch äußerst schwierig, verschachteltes Routing zwischen verschiedenen Strukturen derselben Seite zu verwalten.



Navigator 2.0 behebt diese und andere Probleme, indem der Seitenstapel sichtbar gemacht wird. Hier ist ein aktualisiertes Beispiel für einen Übergang zwischen demselben ColorListScreenund ColorScreen: 



class _ColorAppState extends State<ColorApp> {
 Color _selectedColor;
 List<Color> _colors = [Colors.red, Colors.green, Colors.blue];
 
 @override
 Widget build(BuildContext context) => MaterialApp(
       title: 'Color App',
       home: Navigator(
           // you can see and decide on every page in this list
         pages: [
           MaterialPage(
             child: ColorListScreen(
               colors: _colors,
               onTapped: (color) => setState(() => _selectedColor = color),
             ),
           ),
           if (_selectedColor != null) MaterialPage(child: ColorScreen(color: _selectedColor)),
         ],
         onPopPage: (route, result) {
           if (!route.didPop(result)) return false;
           setState(() => _selectedColor = null);
           return true;
         },
       ),
     );
}


Die Anwendung erstellt explizit Navigatoreine Liste mit Seiten, die den gesamten Stapel darstellen, und stellt sie bereit. Wir erstellen leer, _selectedColorum anzuzeigen, dass die Farbe noch nicht ausgewählt wurde. Daher wird sie zunächst nicht angezeigt ColorScreen. Wenn der Benutzer eine Farbe auswählt, rufen wir setState()wie gewohnt auf, um Flutter mitzuteilen, dass Sie die Methode erneut aufrufen möchten. Dadurch build()wird oben ein Stapel erstellt ColorScreen.



Sie aktualisieren Ihren Status im Rückruf OnPopPage: Wenn der Benutzer beispielsweise wieder auf dem Bildschirm angezeigt wird, bedeutet dies, dass er die aktuelle Farbe "abgewählt" hat und wir diese Seite nicht mehr anzeigen möchten.



Wenn Navigator 2.0 wie der Rest von Flutter aussieht, ist es absichtlich: Es ist deklarativ im Gegensatz zum imperativen Navigator 1.0. Die Idee war, Navigationsmodelle und den Rest von Flutter zu kombinieren und gleichzeitig viele Fehler zu beheben und Funktionen hinzuzufügen. Tatsächlich kratzt dieses kleine Beispiel nur die Oberfläche von Navigator 2.0. Für Details empfehle ich den Artikel über deklarative Navigation und Routing in Flutter .



Sie können Navigator 1.0 weiterhin verwenden: Es funktioniert genauso wie zuvor. Wir werden es in Kürze nicht mehr löschen. Wir glauben jedoch, dass Sie es lieben werden, wenn Sie Navigator 2.0 ausprobieren.







. , . , , , , . .



, . — Flutter. Navigator 2.0 . Remi Rousselet Twitter, . , . — Surf. , , GitHub: , , , .







: Android



Eine neue Funktion, mit der Sie in dieser Version experimentieren können, ist die Unterstützung der Statuswiederherstellung unter Android . Dies ist eine unserer begehrtesten Funktionen mit 217 Bewertungen!



Für diejenigen, die mit der Notwendigkeit der Wiederherstellung des Status nicht vertraut sind, können mobile Betriebssysteme Anwendungen im Hintergrund beenden, um Ressourcen für vorrangige Anwendungen freizugeben. In diesem Fall benachrichtigt das Betriebssystem die Anwendung, dass sie "beendet" werden soll: Die Anwendung speichert schnell den Status der Benutzeroberfläche, um sie wiederherzustellen, wenn der Benutzer zur Anwendung zurückkehrt. 



Bei korrekter Implementierung ist die Benutzererfahrung nahtlos und die Ressourcen des Geräts werden effizienter genutzt. Bis jetzt hat Flutter die Wiederherstellung des Staates nicht unterstützt, und ohne Framework-Unterstützung war es sehr schwierig, dies richtig zu machen. Daher freuen wir uns sehr, eine grundlegende Implementierung dieser Funktion für Android anbieten zu können.



Hier ist ein sehr einfaches Beispiel für die Wiederherstellung des Status der Standardanwendung für den Flatterzähler: 



class CounterState extends State<RestorableCounter> with RestorationMixin {
  @override
  String get restorationId => widget.restorationId;

  RestorableInt _counter = RestorableInt(0);

  @override
  void restoreState(RestorationBucket oldBucket) => registerForRestoration(_counter, 'count');

  void _incrementCounter() => setState(() => _counter.value++);

  @override
  Widget build(BuildContext context) => Scaffold(
      body: Center(child: Text('${_counter.value}')),
      floatingActionButton: FloatingActionButton(onPressed: _incrementCounter),
    );
}


Kurz gesagt, jedes Widget erhält ein Speichersegment, das mit einer eindeutigen Kennung bei RestorationMixin registriert wird. Durch die Verwendung einer RestorableProperty ( RestorableIntwie hier) zum Speichern von UI-spezifischen Daten und zum Registrieren dieser Daten bei der Statuswiederherstellungsfunktion werden die Daten automatisch gespeichert, bevor Android die Anwendung beendet und wiederhergestellt, wenn sie wieder zum Leben erweckt werden. Und das ist alles. Alle Daten in einer Art gespeichert Restoration*, zum Beispiel RestorableInt, RestorableStringund RestorableTextEditingController(wir einige von ihnen haben), werden wiederhergestellt. Wenn wir nicht alle Typen behandelt haben, die Sie wiederherstellen möchten, können Sie durch Erweitern eigene Typen erstellenRestorableProperty.



Um die Statuswiederherstellung automatisch zu testen, haben wir WidgetTester eine neue restartAndRestore-API hinzugefügt . Und für manuelle Tests ist das einfachste:



  • Führen Sie die Flutter-App mit aktivierter Statuswiederherstellung auf dem Android-Gerät aus. 

  • Aktivieren Sie die Option "Aktionen nicht speichern" in den Android-Entwicklereinstellungen. 

  • Flutter App starten, 

  • stell es in den Hintergrund,

  • kehre dorthin zurück. 



Android wird Ihre Anwendung "töten" und wiederherstellen, und Sie werden sehen, ob alles wie erwartet funktioniert.







Diese Version der staatlichen Wiederherstellung ist vorläufig: Es gibt noch etwas zu tun. Beispielsweise ist die Wiederherstellung des Status nicht nur eine Funktion für Android, sondern auch iOS-Apps können davon profitieren. Wir sind auch damit beschäftigt, unsere eigenen Widgets zu aktualisieren, um ihren Status während der Wiederherstellung beizubehalten. Wir haben Klassen Scrollablewie ListViewund SingleChildScrollView(zum Speichern der Bildlaufposition des Benutzers) und TextFields(zum Wiederherstellen des eingegebenen Textes) unterstützt und planen, diese auf andere Widgets auszudehnen.



Zwar haben wir noch keine wichtige Funktion hinzugefügt - die Navigationsunterstützung (1.0 oder 2.0), weshalb wir diese Version als "vorläufig" bezeichnen. Das heißt, die Anwendung wird nicht an derselben Stelle geöffnet, an der sich der Benutzer befand. Diese Funktion wird in Kürze in der Beta und in der nächsten stabilen Version von Flutter verfügbar sein.







— . Flutter- UX. — , (, — -), State . Restorable-, RestorationMixin.



, . : , - , , .





:



In Zusammenarbeit mit unseren internen Partnern bei Google hat das Flutter-Team die Bildlaufleistung erheblich verbessert, wenn die Eingabe- und Anzeigeraten nicht übereinstimmen. Beispielsweise arbeitet der Eingang des Pixel 4 mit 120 Hz und das Display mit 90 Hz. Diese Inkonsistenz kann zu einer schlechten Bildlaufleistung führen. Mit der neuen Flagge können resamplingEnabledSie dieses Problem lösen: 



void main() {
  GestureBinding.instance.resamplingEnabled = true;
  run(MyApp());
}


Abhängig von den fraglichen Frequenzdiskrepanzen können Sie bis zu 97% weniger Bildlauflatenz feststellen, wenn Sie dieses Flag aktivieren. In zukünftigen Builds planen wir, dieses Flag standardmäßig zu aktivieren.



Das neue einheitliche Dart-Entwicklertool



Wie immer betrifft das Flutter-Update nicht nur die Engine und das Framework, sondern auch die Tools. Flutter 1.22 enthält eine neue Version von Dart (2.10) sowie ein neues Befehlszeilenprogramm, dartdas Sie möglicherweise ebenfalls nützlich finden.



In der Vergangenheit hatte Dart viele kleine Entwicklertools (wie dartfmtFormatierung und dartanalyzerCodeanalyse). Dart 2.10 verfügt über ein einheitliches Entwicklungstool, das dem Tool dartsehr ähnlich ist flutter.







Beginnend mit dem Flutter 1.22 SDK enthält der Ordner <flutter-sdk>/bin(in dem Sie sich wahrscheinlich befinden PATH) die Befehle flutterund dart. Weitere Informationen finden Sie im Dart 2.10-Blogbeitrag .



Tool zur Analyse der Anwendungsgröße



Zu den im Rahmen von Flutter 1.22 veröffentlichten Tools gehört ein neues Dienstprogramm zur Analyse der Build-Größe. Mit diesem Tool können Sie diagnostizieren, ob die Größe Ihrer Anwendung im Laufe der Zeit aufgebläht ist.



Mit diesem Tool können Sie Daten für die Analyse erfassen. Übergeben Sie die Flagge mit --analysis-sizeeinem der folgenden Befehle:



  • flutter build apk

  • flutter build appbundle

  • flutter build ios

  • flutter build linux

  • flutter build macos

  • flutter build windows



Verwenden dieses Flags beim Erstellen des Ausgabe-Artefakts Flutter bietet eine Zusammenfassung der Größe und Zusammensetzung des Artefakts. Es enthält nativen Code, Ressourcen und sogar eine Aufschlüsselung des kompilierten Dart-Codes auf Paketebene.





Beispielversion APK Flutter Gallery-Aufschlüsselung



Diese Zusammenfassung ist nützlich, um schnell die Größe eines Builds zu analysieren und zu verstehen, warum es zu groß ist. Darüber hinaus sind die gesammelten Daten auch als JSON-Datei verfügbar, die in den Dart DevTools angezeigt werden kann. Auf diese Weise können Sie den Inhalt Ihrer Anwendung genauer untersuchen, Größenprobleme identifizieren und Änderungen zwischen zwei verschiedenen JSON-Dateien anzeigen, indem Sie den Anweisungen auf flutter.dev folgen . Nach dem Hochladen der JSON-Datei verfügen Sie über eine Benutzeroberfläche, auf der eine Baumkarte der Größe Ihrer Anwendung angezeigt wird.





Ein Beispiel für eine APK-Aufschlüsselung in der Dart DevTools-



Dokumentation für das Tool zur Analyse der Anwendungsgröße auf flutter.dev



Kommentar



Was Android Studio schon lange alleine kann, kann jetzt über Dev Tools analysiert werden. Dies ist noch flexibler. Jetzt können Sie Berichte in Json direkt in CI bereitstellen und Änderungen der Baugruppengröße im Laufe der Zeit überwachen.



Vorschau: Aktualisierte Netzwerkseite in DevTools



Eine weitere vorläufige Funktion von DevTools in dieser Version: Der Anforderungshauptteil wird jetzt auf der Registerkarte Netzwerk angezeigt.







Um diese Funktion zu aktivieren, stellen Sie sicher, dass Sie sich über flutter channel devund auf dem Flutter-Entwicklungskanal befinden flutter channel upgrade.



Darüber hinaus haben wir für Anwendungen mit einem großen Netzwerkverkehrsvolumen die Möglichkeit zum Suchen und Filtern bereitgestellt.







Eine Dokumentation auf der Registerkarte Netzwerk finden Sie im Abschnitt Verwenden der Netzwerkansicht auf flutter.dev .



Gehostete Registerkarte DevTools Inspector in IntelliJ



Seit einiger Zeit pflegen wir zwei Kopien einiger unserer Flutter-Tools: zum Beispiel das Inspector- Bedienfeld in IntelliJ und die Registerkarte Inspector in Dart DevTools. Dies verlangsamt unsere Arbeit: Wir müssen zwei Codebasen pflegen. Außerdem sind einige Funktionen noch nicht Teil des IntelliJ-Plugins - beispielsweise der Layout-Explorer. Um diese Probleme zu beheben , haben wir die Möglichkeit aktiviert, die Registerkarte " Inspektor" von Dart DevTools direkt in IntelliJ zu hosten.







Um diese Option zu aktivieren, gehen Sie zu Einstellungen > Sprachen & Frameworks > Flattern > Integrierten DevTools-Inspektor aktivieren .







, . Flutter Dev Podcast Android Studio VS Code.



, … . , IDE. . , Android Studio. .



Visual Studio Code



Eine häufige Aktion, mit der alle Flutter-Entwickler konfrontiert sind, besteht darin, die Fehlerverfolgung im Terminal an die Stelle im Quellcode zu verschieben, an der der Fehler aufgetreten ist. In der neuesten Version der Flutter-Erweiterung für Visual Studio-Code werden diese Links jetzt korrekt analysiert: Sie können darauf klicken und an die gewünschte Stelle im Code gehen, an der der Absturz aufgetreten ist.







Es klingt nach einer kleinen Sache, aber das erste Feedback zu dieser Funktion ist bereits sehr positiv.



Wie immer gibt es hier zu viele Tool-Änderungsprotokolle, aber ich empfehle, die folgenden Ankündigungen zu lesen:





Kundenorientierung: EasyA



EasyA ist eine abonnementbasierte App, in der Schüler mit brillanten Tutoren über Instant Messaging lernen. Die Anwendung ist in Flutter geschrieben. Apple hat es kürzlich als App des Tages gekennzeichnet .







„Als die Schulen Anfang dieses Jahres auf Fernunterricht umstellten, hatten wir die Aufgabe, schnell eine Anwendung zu starten, um den Schülern zu helfen. Dank der hohen Entwicklungsgeschwindigkeit von Flutter konnten wir eine Anwendung für iOS und Android erstellen. Und sie haben es geschafft, sie in den Läden zu veröffentlichen - pünktlich zum Beginn der Sperrung! Unter normalen Umständen wäre dies praktisch unmöglich. Da Flutter es uns jedoch ermöglicht, mit allen drei Plattformen gleichzeitig zu arbeiten, konnten wir den Code effektiv wiederverwenden. Unser kleines Entwicklungsteam hat hart gearbeitet. "



Phil Kwok, Mitbegründer von EasyA



Änderungen brechen



Wie immer versuchen wir, die Anzahl der Änderungen auf ein Minimum zu beschränken. Hier ist eine Liste aus Flutter 1.22:



  • 56413 Verhindern, dass viewport.showOnScreen durch das Ansichtsfenster scrollt, wenn das angegebene Rechteck bereits angezeigt wird .

  • 62395 [gen_l10n] Standardmäßige Erzeugung synthetischer Pakete.

  • 62588 Erstellen Sie Routen noch weniger.



    • Die stabile Version von Flutter 1.22 ist nach der Veröffentlichung von 1.20 möglicherweise sehr schnell erschienen, aber es steckt so viel Gutes darin, dass wir hier nicht alles erwähnen konnten. Wir hoffen, dass Sie mit dieser Version fantastische iOS- und Android-Apps erstellen können, und wir können es kaum erwarten, zu sehen, was in den Läden erhältlich ist! Vielen Dank für Ihre Unterstützung: Wir bauen Flutter für Sie.


More articles:


All Articles