[An den Docks] Flattern. Teil 3. Für reaktive Entwickler

Wir setzen die lakonische Interpretation der offiziellen Flutter-Dokumentation in einem Frage-Antwort-Format fort. Dies ist der dritte Teil, der für React Native-Entwickler nützlicher sein wird. In dieser Interpretation finden Sie Antworten auf häufig gestellte Fragen und können selbst bestimmen, wie viel Aufwand erforderlich ist, um von einem plattformübergreifenden Framework auf ein anderes zu wechseln.



Wenn diese Informationen nicht ausreichen oder Sie Erfahrung in der nativen Entwicklung für eine bestimmte Plattform haben, empfehle ich, in anderen Teilen zu suchen:

Flattern. Teil 1. Für Android-Entwickler
Flattern. Teil 2. Für iOS-Entwickler
Flattern. Teil 3. Für reaktive Entwickler
Flattern. Teil 4. Für Webentwickler
Flattern. Teil 5. Für Xamarin.Forms-Entwickler

Inhalt:

1. Ein bisschen über Dart
   
   • Wo ist der Einstiegspunkt?
   • Wie gebe ich auf der Konsole aus?
   • Wie kann ich Variablen / Felder erstellen und zuweisen?
   • Was ist der Standardwert einer Variablen / eines Feldes?
   • Wie prüfe ich einen Wert für null oder für 0?
   • Wie deklariere ich Funktionen?
   • Was ist das Äquivalent von Versprechen?
   • Was ist das Analogon von Asynchronität und Warten?
   
   
2. Die Grundlagen
   
   • Wie erstelle ich ein Anwendungsprojekt auf Flutter?
   • Wie starte ich die Anwendung?
   • Wie importiere ich Widgets?
   • Wie verwendet man Widgets und Nesting, um einen Widget-Baum zu erstellen?
   • Wie erstelle ich wiederverwendbare Komponenten?
   
   
3. Projektstruktur und Ressourcen
   
   • Wo soll ich anfangen, Code zu schreiben?
   • Wie ist die Dateistruktur in einem Flutter-Projekt?
   • Wo werden Ressourcen und Assets gespeichert und wie werden sie verwendet?
   • Wie lade ich Bilder aus dem Netzwerk herunter?
   • Wie verbinde ich Pakete und Plugins von Drittanbietern?
   
   
4. Ansichten
   
   • Was entspricht einem View-Container?
   • Was ist das Analogon von FlatList oder SelectionList?
   • Wie benutzt man Canvas?
   
   
5. Layouts
   
   • Wie werden Widgets zum Beschreiben von Layout-Eigenschaften verwendet?
   • Wie positioniere ich Widgets im Layout?
   
   
6. Stilisierung
   
   • Wie werden Komponenten gestylt?
   • Wie benutze ich Icons und Farben?
   • Wie kann ich das Stilmotiv der Anwendung anpassen?
   
   
7. Staatsverwaltung
   
   • Wie aktualisiere ich die Anzeige von Widgets?
   
   
8. Lokale Speicherung
   
   • Wie speichere ich Schlüsselwertdaten in einer Anwendung?
   • Wie speichere ich komplexe Daten?
   
   
9. Navigation
   
   • Wie navigiere ich zwischen den Bildschirmen?
   • Wie benutze ich die Tab-Navigation?
   • Wie benutze ich die Schubladennavigation?
   
   
10. Gesten und Touch-Event-Handling
    
    • Wie gehe ich mit einem Klick um?
    
    
11. HTTP-Anfragen
    
    • Wie erhalte ich Daten aus API-Anfragen?
    
    
12. Eingabeformular
    
    • Welche Widgets für die Eingabe verwenden?
    
    
13. Plattformspezifischer Code
    
    • Wie kann festgestellt werden, auf welcher Plattform der Code ausgeführt wird?
    • Wie rufe ich nativen Plattformcode auf?
    
    
14. Debuggen
    
    • Was sind die Tools zum Debuggen der Anwendung?
    • Wie macht man ein heißes Nachladen?
    • Wie greife ich in der Anwendung auf das Entwicklermenü zu?
    
    
15. Animation
    
    • Was wird für die Animation verwendet?
    • Wie füge ich eine einfache Einblendanimation hinzu?
    • Wie füge ich eine Wischanimation zu Listenelementen hinzu?
    
    
16. Komponentenäquivalente
    
    • Was sind die Äquivalente von Flutter im Vergleich zu React Native?
    
    
17. Flutter Plugins
    
    • Wie greife ich auf GPS zu?
    • Wie greife ich auf die Kamera zu?
    • Wie melde ich mich über Facebook an?
    • Wie benutzt man Firebase?
    
    

Ein bisschen über Dart

Frage:

Wo ist der Einstiegspunkt?

Die Antwort lautet:

main() .

Unterschiede:

JavaScript hat keinen vordefinierten Einstiegspunkt, sondern kann jede vom Entwickler definierte Funktion sein. In Dart ist dies nur main() .

Frage:

Wie gebe ich auf der Konsole aus?

Die Antwort lautet:

Verwendung der Funktion print() .

Unterschiede:

In JavaScript erfolgt die Konsolenausgabe mit console.log() .

Ein Beispiel:

 print('Hello world!'); 

Frage:

Wie kann ich Variablen / Felder erstellen und zuweisen?

Die Antwort lautet:

Dart unterstützt sowohl dynamisches als auch starkes Tippen. Daher können Variablen / Felder in jeder für Sie geeigneten Schreibweise erstellt werden. Die Zuordnung erfolgt durch single =.

Unterschiede:

Starke Eingabe wird in JavaScript nicht unterstützt.

Weitere Informationen:

Weitere Details hier.

Ein Beispiel:

 String name = 'dart'; // Explicitly typed as a string. var otherName = 'Dart'; // Inferred string. // Both are acceptable in Dart. 

Frage:

Was ist der Standardwert einer Variablen / eines Feldes?

Die Antwort lautet:

null

Unterschiede:

JavaScript ist standardmäßig nicht definiert.

Weitere Informationen:

Weitere Details hier.

Frage:

Wie prüfe ich einen Wert für null oder für 0?

Die Antwort lautet:

Verwenden der expliziten Überprüfung == .

Unterschiede:

In JavaScript entspricht im Rahmen der if Prüfung die Zahl 1 oder ein beliebiges non-null Objekt der Zahl true . In Dart entspricht nur ein boolescher Wert von true true .

Ein Beispiel:

 var myNull = null; if (myNull == null) { print('use "== null" to check null'); } var zero = 0; if (zero == 0) { print('use "== 0" to check zero'); } 

Frage:

Wie deklariere ich Funktionen?

Die Antwort lautet:

In Dart können Funktionen wie Felder mit dynamischer oder starker Eingabe des Rückgabewerts ausgeführt werden. Dynamisch typisierte werden einfach durch den Funktionsnamen und optional durch Parameter deklariert, während stark typisierte am Anfang noch einen Rückgabetyp haben.

Unterschiede:

In JavaScript wird eine Funktion mit dem Schlüsselwort function deklariert, gefolgt von einem Namen und optionalen Parametern.

Weitere Informationen:

Weitere Details hier.

Ein Beispiel:

 fn() { return true; } // can also be written as bool fn() { return true; } 

Frage:

Was ist das Äquivalent von Versprechen ?

Die Antwort lautet:

Zukunft

Weitere Informationen:

Dart unterstützt wie JavaScript die Single-Thread-Ausführung. Future in Dart hat die gleiche Bedeutung wie Promise in React Native.
Weitere Details hier. .

Ein Beispiel:

 import 'dart:convert'; import 'package:http/http.dart' as http; class Example { Future<String> _getIPAddress() { final url = 'https://httpbin.org/ip'; return http.get(url).then((response) { String ip = jsonDecode(response.body)['origin']; return ip; }); } } main() { final example = new Example(); example ._getIPAddress() .then((ip) => print(ip)) .catchError((error) => print(error)); } 

Frage:

Was ist das Analogon von async und await ?

Die Antwort lautet:

async und await

Unterschiede:

In JavaScript geben asynchrone Funktionen Promise zurück , in Dart Future . wait erwartet synchron das Ergebnis des Aufrufs einer asynchronen Funktion.

Weitere Informationen:

Weitere Details hier.

Ein Beispiel:

 import 'dart:convert'; import 'package:http/http.dart' as http; class Example { Future<String> _getIPAddress() async { final url = 'https://httpbin.org/ip'; final response = await http.get(url); String ip = jsonDecode(response.body)['origin']; return ip; } } main() async { final example = new Example(); try { final ip = await example._getIPAddress(); print(ip); } catch (error) { print(error); } } 

Die Grundlagen

Frage:

Wie erstelle ich ein Anwendungsprojekt auf Flutter?

Die Antwort lautet:

1. Verwenden der IDE mit installierten Flutter- und Dart-Plugins.
2. Mit dem flutter create {projectname} .

Unterschiede:

Verwenden Sie den create-react-native-app {projectname} um ein Projekt in React Native zu create-react-native-app {projectname} .

Weitere Informationen:

Weitere Details hier.

Frage:

Wie starte ich die Anwendung?

Die Antwort lautet:

1. Verwenden der Run-Funktion in der IDE mit den installierten Flutter- und Dart-Plugins.
2. Verwenden des flutter run .

Unterschiede:

React Native startet die Anwendung mit den Befehlen npm run oder yarn run .

Frage:

Wie importiere ich Widgets?

Die Antwort lautet:

In Flutter sind alle Widgets in Pakete unterteilt, sodass das Importieren eines Pakets ausreicht, um seine Widgets zu verwenden.

Unterschiede:

In React Native müssen Sie jedes Widget importieren.

Ein Beispiel:

 import 'package:flutter/material.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/widgets.dart'; import 'package:flutter/my_widgets.dart'; 

Frage:

Wie verwendet man Widgets und Nesting, um einen Widget-Baum zu erstellen?

Die Antwort lautet:

In Flutter ist fast alles Widgets. Auch das Anwendungsobjekt ist ein Widget. Jedes Widget kann im übergeordneten Element verschachtelt werden. Durch das Kombinieren von Widgets erstellen Sie eine Hierarchie, die als Widget-Baum bezeichnet wird. Sie ist es, die sich später in eine Anzeige auf dem Bildschirm verwandelt.

Ein Beispiel:

 import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Welcome to Flutter', home: Scaffold( appBar: AppBar( title: Text('Welcome to Flutter'), ), body: Center( child: Text('Hello world'), ), ), ); } } 

Frage:

Wie erstelle ich wiederverwendbare Komponenten?

Die Antwort lautet:

In Flutter können Sie eine Widget-Klasse erstellen und wiederverwenden. Die verwendeten Parameter sind Klassenfelder.

Unterschiede:

In React Native müssen Sie die Parameter eines wiederverwendeten Elements als Requisiten markieren, um sie zu ändern.

Weitere Informationen:

Parameter im Konstruktor können auf zwei Arten deklariert werden: durch regelmäßige Aufzählung und optional mit geschweiften Klammern {} . Unterschiede treten auf, wenn Parameter zum Aufrufen des Konstruktors verwendet werden.
In der üblichen Aufzählung sind alle Parameter erforderlich, und beim Aufrufen des Konstruktors können Sie nicht angeben, welcher bestimmte Parameter übergeben wird, da sie sind auf bestellung fällig.
Mit der Option können Sie eine beliebige Reihenfolge verwenden, in der die Parameter übertragen werden. Sie müssen jedoch angeben, welcher bestimmte Parameter übertragen wird oder nicht. Verwenden Sie die Anmerkung @required um einen optionalen Parameter als erforderlich zu markieren.

Ein Beispiel:

 class CustomCard extends StatelessWidget { CustomCard({@required this.index, @required this.onPress}); final index; final Function onPress; @override Widget build(BuildContext context) { return Card( child: Column( children: <Widget>[ Text('Card $index'), FlatButton( child: const Text('Press'), onPressed: this.onPress, ), ], ) ); } } ... // Usage CustomCard( index: index, onPress: () { print('Card $index'); }, ) ... 

Projektstruktur und Ressourcen

Frage:

Wo soll ich anfangen, Code zu schreiben?

Die Antwort lautet:

In {projectname}/lib/main.dart .

Frage:

Wie ist die Dateistruktur in einem Flutter-Projekt?

Die Antwort lautet:

 ┬ └ projectname ┬ ├ android -   Android . ├ build - iOS  Android  . ├ ios -   iOS . ├ lib - Dart . ┬ └ src - Contains additional source files. └ main.dart -    . ├ test -  . └ pubspec.yaml -     .  package.json   React Native. 

Frage:

Wo werden Ressourcen und Assets gespeichert und wie werden sie verwendet?

Die Antwort lautet:

Links zu Ressourcen und Projektabhängigkeiten werden in der Datei pubspec.yaml gespeichert. Tatsächlich können Sie sie in einem beliebigen Ordner innerhalb von lib pubspec.yaml . pubspec.yaml vor allem den Pfad zu ihnen in pubspec.yaml . Sie können sie in einem Projekt entweder mit speziellen Widgets wie AssetImage oder direkt mit AssetBundle verwenden .

Weitere Informationen:

Weitere Details hier.

Ein Beispiel:

Aktiva in pubspec.yaml

 flutter: assets: - assets/my_icon.png - assets/background.png 

Verwenden Sie in Code

 image: AssetImage('assets/background.png'), 

Frage:

Wie lade ich Bilder aus dem Netzwerk herunter?

Die Antwort lautet:

Verwenden von Image.network .

Ein Beispiel:

 body: Image.network( 'https://flutter.io/images/owl.jpg', 

Frage:

Wie verbinde ich Pakete und Plugins von Drittanbietern?

Die Antwort lautet:

dependencies in pubspec.yaml .

Unterschiede:

React Native verwendet die Befehle yarn add {package-name} oder npm install --save {package-name} , um Abhängigkeiten hinzuzufügen.

Weitere Informationen:

Verwenden von Paketen
Paket- und Plugin-Entwicklung
Beliebte Plugins für Flutter

Ein Beispiel:

 dependencies: flutter: sdk: flutter google_sign_in: ^3.0.3 

Ansichten

Frage:

Was entspricht einem View- Container?

Die Antwort lautet:

Alle grundlegenden Widgets für das Layout, z. B. Container , Spalte , Zeile und Mitte .

Weitere Informationen:

Weitere Details hier.

Frage:

Was ist das Analogon von FlatList oder SelectionList ?

Die Antwort lautet:

Listenansicht

Ein Beispiel:

 var data = [ ... ]; ListView.builder( itemCount: data.length, itemBuilder: (context, int index) { return Text( data[index], ); }, ) 

Frage:

Wie benutzt man Canvas?

Die Antwort lautet:

Verwenden der CustomPaint- und CustomPainter-Klassen .

Unterschiede:

In React Native gibt es keine Möglichkeit, standardmäßig mit Canvas zu zeichnen. Es gibt Plugins von Drittanbietern, zum Beispiel react-native-canvas .

Ein Beispiel:

 class MyCanvasPainter extends CustomPainter { @override void paint(Canvas canvas, Size size) { Paint paint = Paint(); paint.color = Colors.amber; canvas.drawCircle(Offset(100.0, 200.0), 40.0, paint); Paint paintRect = Paint(); paintRect.color = Colors.lightBlue; Rect rect = Rect.fromPoints(Offset(150.0, 300.0), Offset(300.0, 400.0)); canvas.drawRect(rect, paintRect); } bool shouldRepaint(MyCanvasPainter oldDelegate) => false; bool shouldRebuildSemantics(MyCanvasPainter oldDelegate) => false; } class _MyCanvasState extends State<MyCanvas> { @override Widget build(BuildContext context) { return Scaffold( body: CustomPaint( painter: MyCanvasPainter(), ), ); } } 

Layouts

Frage:

Wie werden Widgets zum Beschreiben von Layout-Eigenschaften verwendet?

Die Antwort lautet:

Flutter verwendet spezielle Widgets für Layout-Eigenschaften, zum Beispiel:
Spalte , Reihe , Auffüllen , Ausrichten , Stapel .

Unterschiede:

In React Native können Layout-Eigenschaften am häufigsten mithilfe von props .

Weitere Informationen:

Vollständige Liste der Widgets

Frage:

Wie positioniere ich Widgets im Layout?

Die Antwort lautet:

Verwenden Sie zur absoluten Positionierung das Stack- Widget. Für den Verwandten - verschiedene Widgets und deren Kombinationen, die hier zu finden sind .

Ein Beispiel:

 Stack( alignment: const Alignment(0.6, 0.6), children: <Widget>[ CircleAvatar( backgroundImage: NetworkImage( 'https://avatars3.githubusercontent.com/u/14101776?v=4'), ), Container( decoration: BoxDecoration( color: Colors.black45, ), child: Text('Flutter'), ), ], ) 

Stilisierung

Frage:

Wie werden Komponenten gestylt?

Die Antwort lautet:

Widgets haben meist eine Stileigenschaft.

Unterschiede:

React Native verwendet stylesheets.create zum Stylen.

Ein Beispiel:

 var textStyle = TextStyle(fontSize: 32.0, color: Colors.cyan, fontWeight: FontWeight.w600); ... Center( child: Column( children: <Widget>[ Text( 'Sample text', style: textStyle, ), Padding( padding: EdgeInsets.all(20.0), child: Icon(Icons.lightbulb_outline, size: 48.0, color: Colors.redAccent) ), ], ), ) 

Frage:

Wie benutze ich Icons und Farben?

Die Antwort lautet:

Verwenden der Klassen " Icons" und " Colors" .

Unterschiede:

React Native bietet standardmäßig keine Symbolunterstützung.

Ein Beispiel:

Icons

 Icon(Icons.lightbulb_outline, color: Colors.redAccent) 

Farben

 class SampleApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Sample App', theme: ThemeData( primarySwatch: Colors.blue, textSelectionColor: Colors.red ), home: SampleAppPage(), ); } } 

Frage:

Wie kann ich das Stilmotiv der Anwendung anpassen?

Die Antwort lautet:

Verwenden der ThemeData- Klasse.

Unterschiede:

In React Native wird ein allgemeines Thema über stylesheets konfiguriert.

Ein Beispiel:

 @override Widget build(BuildContext context) { return Theme( data: ThemeData( primaryColor: Colors.cyan, brightness: brightness, ), child: Scaffold( backgroundColor: Theme.of(context).primaryColor, ... ... ), ); } 

Staatsverwaltung

Frage:

Wie aktualisiere ich die Anzeige von Widgets?

Die Antwort lautet:

Verwenden von StatefulWidget und seines Status . Flutter hat zwei Arten von Widgets: StatelessWidget und StatefulWidget . Sie funktionieren auf die gleiche Weise, der einzige Unterschied liegt im Rendering-Status.

Unterschiede:

StatelessWidget hat einen unveränderlichen Status. Geeignet zum Anzeigen von Text, Logo usw. Das heißt Sollte sich das Element auf dem Bildschirm während der gesamten Anzeigezeit nicht ändern, passt es zu Ihnen. Es kann auch als Container für Stateful Widgets verwendet werden.

StatefulWidget verfügt über den Status State , in dem Informationen zum aktuellen Status gespeichert werden . Wenn Sie ein Element auf dem Bildschirm ändern möchten, während Sie eine Aktion ausführen (eine Antwort kam vom Server, der Benutzer hat auf eine Schaltfläche geklickt usw.), ist dies Ihre Option.

Ein Beispiel:

1) StatelessWidget - Text

 Text( 'I like Flutter!', style: TextStyle(fontWeight: FontWeight.bold), ); 

2) StatefulWidget - Wenn Sie auf die Schaltfläche (FloatingActionButton) klicken, ändert sich der Text im Text-Widget von I Like Flutter zu Flutter is Awesome!

 import 'package:flutter/material.dart'; void main() { runApp(SampleApp()); } class SampleApp extends StatelessWidget { //     . @override Widget build(BuildContext context) { return MaterialApp( title: 'Sample App', theme: ThemeData( primarySwatch: Colors.blue, ), home: SampleAppPage(), ); } } class SampleAppPage extends StatefulWidget { SampleAppPage({Key key}) : super(key: key); @override _SampleAppPageState createState() => _SampleAppPageState(); } class _SampleAppPageState extends State<SampleAppPage> { //   String textToShow = "  Flutter"; void _updateText() { setState(() { //   textToShow = "Flutter !"; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Sample App"), ), body: Center(child: Text(textToShow)), floatingActionButton: FloatingActionButton( onPressed: _updateText, tooltip: ' ', child: Icon(Icons.update), ), ); } } 

Lokale Speicherung

Frage:

Wie speichere ich key-value in einer Anwendung?

Die Antwort lautet:

Verwendung des shared_preferences- Plugins.

Unterschiede:

React Native verwendet AsyncStorage .

Ein Beispiel:

Sucht

 dependencies: flutter: sdk: flutter shared_preferences: ^0.4.3 

Verwenden Sie

 SharedPreferences prefs = await SharedPreferences.getInstance(); _counter = prefs.getInt('counter'); prefs.setInt('counter', ++_counter); setState(() { _counter = _counter; }); 

Frage:

Wie speichere ich komplexe Daten?

Die Antwort lautet:

Verwenden von Datenbank-Plugins, z. B. sqflite oder hive .

Navigation

Frage:

Wie navigiere ich zwischen den Bildschirmen?

Die Antwort lautet:

Zum Navigieren zwischen Bildschirmen werden die Klassen Navigator und Route verwendet.

Unterschiede:

React Native verwendet StackNavigator , TabNavigator und DrawerNavigator .

Flutter hat zwei Navigationsmethoden:

1. Beschreiben Sie eine Karte mit Routennamen
2. Navigieren Sie direkt zur Route .

Navigator kann die angegebene Route mit push () oder pop () ansteuern.

Ein Beispiel:

 void main() { runApp(CupertinoApp( home: MyAppHome(), // becomes the route named '/' routes: <String, WidgetBuilder> { '/a': (BuildContext context) => MyPage(title: 'page A'), '/b': (BuildContext context) => MyPage(title: 'page B'), '/c': (BuildContext context) => MyPage(title: 'page C'), }, )); } Navigator.of(context).pushNamed('/b'); 

Frage:

Wie benutze ich die Tab-Navigation?

Die Antwort lautet:

Klassen verwenden: TabController , TabBar , Tab und TabBarView .

Unterschiede:

React Native verwendet createBottomTabNavigator und TabNavigation .

Weitere Informationen:

• TabController koordiniert TabBar und TabBarView ;
• TabBar zeigt eine horizontale Liste von Registerkarten an.
• Registerkarte zeigt eine Registerkarte an.
• TabBarView zeigt den Inhalt der ausgewählten Registerkarte an.

Weitere Details hier. .

Ein Beispiel:

 class _NavigationHomePageState extends State<NavigationHomePage> with SingleTickerProviderStateMixin { TabController controller=TabController(length: 2, vsync: this); @override Widget build(BuildContext context) { return Scaffold( bottomNavigationBar: Material ( child: TabBar( tabs: <Tab> [ Tab(icon: Icon(Icons.person),) Tab(icon: Icon(Icons.email),), ], controller: controller, ), color: Colors.blue, ), body: TabBarView( children: <Widget> [ home.homeScreen(), tabScreen.tabScreen() ], controller: controller, ) ); } } 

Frage:

Wie benutze ich die Schubladennavigation?

Die Antwort lautet:

Verwenden der Drawer- Klasse.

Unterschiede:

React Native verwendet createDrawerNavigator und DrawerNavigation .

Ein Beispiel:

 @override Widget build(BuildContext context) { return Scaffold( drawer: Drawer( child: ListTile( leading: Icon(Icons.change_history), title: Text('Screen2'), onTap: () { Navigator.of(context).pushNamed('/b'); }, ), elevation: 20.0, ), appBar: AppBar( title: Text('Home'), ), body: Container(), ); } 

Gesten und Touch-Event-Handling

Frage:

Wie gehe ich mit einem Klick um?

Die Antwort lautet:

Wenn das Widget Klicks unterstützt, dann in onPressed() . Wenn nicht, verwenden Sie das GestureDetector- Widget.

Unterschiede:

React Native verwendet dazu entweder PanResponder oder Touchable .

Ein Beispiel:

 GestureDetector( child: Scaffold( appBar: AppBar( title: Text('Gestures'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text('Tap, Long Press, Swipe Horizontally or Vertically '), ], ) ), ), onTap: () { print('Tapped'); }, onLongPress: () { print('Long Pressed'); }, onVerticalDragEnd: (DragEndDetails value) { print('Swiped Vertically'); }, onHorizontalDragEnd: (DragEndDetails value) { print('Swiped Horizontally'); }, ); 

HTTP-Anfragen

Frage:

Wie erhalte ich Daten aus API-Anfragen?

Die Antwort lautet:

Verwendung eines http-Plugins .

Unterschiede:

React Native verwendet die fetch API .

Ein Beispiel:

Plugin-Verbindung

 dependencies: flutter: sdk: flutter http: <latest_version> 

Datenabruf

 final url = Uri.https('httpbin.org', 'ip'); final httpClient = HttpClient(); _getIPAddress() async { var request = await httpClient.getUrl(url); var response = await request.close(); var responseBody = await response.transform(utf8.decoder).join(); String ip = jsonDecode(responseBody)['origin']; setState(() { _ipAddress = ip; }); } 

Eingabeformular

Frage:

Welche Widgets für die Eingabe verwenden?

Die Antwort lautet:

TextField in Verbindung mit TextEditingController oder TextFormField .

Unterschiede:

React Native verwendet TextInput .
TextFormField unterscheidet sich von TextField durch die integrierte Validierung und Logik zum Speichern von Werten in Feldern.

Ein Beispiel:

Textfeld

 final TextEditingController _controller = TextEditingController(); ... TextField( controller: _controller, decoration: InputDecoration( hintText: 'Type something', labelText: 'Text Field ' ), ), RaisedButton( child: Text('Submit'), onPressed: () { showDialog( context: context, child: AlertDialog( title: Text('Alert'), content: Text('You typed ${_controller.text}'), ), ); }, ), ) 

TextFormField

 final formKey = GlobalKey<FormState>(); ... Form( key:formKey, child: Column( children: <Widget>[ TextFormField( validator: (value) => !value.contains('@') ? 'Not a valid email.' : null, onSaved: (val) => _email = val, decoration: const InputDecoration( hintText: 'Enter your email', labelText: 'Email', ), ), RaisedButton( onPressed: _submit, child: Text('Login'), ), ], ), ) void _submit() { final form = formKey.currentState; if (form.validate()) { form.save(); showDialog( context: context, child: AlertDialog( title: Text('Alert'), content: Text('Email: $_email, password: $_password'), ) ); } } 

Plattformspezifischer Code

Frage:

Wie kann festgestellt werden, auf welcher Plattform der Code ausgeführt wird?

Die Antwort lautet:

Verwenden der platform -Feldklasse in Theme oder der Platform- Klasse.

Ein Beispiel:

Plattformfeld

 if (Theme.of(context).platform == TargetPlatform.iOS) { return 'iOS'; } else if (Theme.of(context).platform == TargetPlatform.android) { return 'android'; } else if (Theme.of(context).platform == TargetPlatform.fuchsia) { return 'fuchsia'; } else { return 'not recognised '; } 

Plattform-Klasse

 if (Platform.isIOS) { return 'iOS'; } else if (Platform.isAndroid) { return 'android'; } else if (Platform.isFuchsia) { return 'fuchsia'; } else { return 'not recognised '; } 

Frage:

Wie rufe ich nativen Plattformcode auf?

Die Antwort lautet:

Über MethodChannel .

Weitere Informationen:

Weitere Details hier. .

Debuggen

Frage:

Was sind die Tools zum Debuggen der Anwendung?

Die Antwort lautet:

DevTools

Frage:

Wie macht man ein hot reload ?

Die Antwort lautet:

Wenn die Anwendung über IntelliJ IDE oder Android Studio gestartet wurde, ⌘s/ctrl-s oder klicken Sie auf das hot reload Symbol. Wenn vom Terminal aus gestartet, geben Sie den Buchstaben r .

Unterschiede:

React Native verwendet ⌘R/Ctrl+R für iOS-Emulatoren, double R für Android.

Frage:

Wie greife ich in der Anwendung auf das Entwicklermenü zu?

Die Antwort lautet:

Wenn der Start über die IDE erfolgte, verwenden Sie die IDE-Tools. Wenn von der Konsole aus, dann verwenden Sie h.

Unterschiede:

React Native verwendet ⌘D/Ctrl+D für iOS-Emulatoren und ⌘M/Ctrl+M für Android.

Weitere Informationen:

Vollständige Liste der Mannschaften

Animation

Frage:

Was wird für die Animation verwendet?

Die Antwort lautet:

Animation und AnimationController .

Unterschiede:

React Native verwendet die Animation API .

Weitere Informationen:

Weitere Details hier.

Frage:

Wie füge ich eine einfache fade-in ?

Die Antwort lautet:

Verwenden von FadeTransition .

Ein Beispiel:

 import 'package:flutter/material.dart'; void main() { runApp(Center(child: LogoFade())); } class LogoFade extends StatefulWidget { _LogoFadeState createState() => _LogoFadeState(); } class _LogoFadeState extends State<LogoFade> with TickerProviderStateMixin { Animation animation; AnimationController controller; initState() { super.initState(); controller = AnimationController( duration: const Duration(milliseconds: 3000), vsync: this); final CurvedAnimation curve = CurvedAnimation(parent: controller, curve: Curves.easeIn); animation = Tween(begin: 0.0, end: 1.0).animate(curve); controller.forward(); } Widget build(BuildContext context) { return FadeTransition( opacity: animation, child: Container( height: 300.0, width: 300.0, child: FlutterLogo(), ), ); } dispose() { controller.dispose(); super.dispose(); } } 

Frage:

Wie füge ich eine Wischanimation zu Listenelementen hinzu?

Die Antwort lautet:

Verwendung von Dismissible .

Ein Beispiel:

 child: Dismissible( key: key, onDismissed: (DismissDirection dir) { cards.removeLast(); }, child: Container( ... ), ), 

Komponentenäquivalente

Frage:

Was sind die Äquivalente von Flutter im Vergleich zu React Native?

Die Antwort lautet:

Flutter Plugins

Frage:

Wie greife ich auf GPS zu?

Die Antwort lautet:

Verwenden des Geolocator- Plugins.

Frage:

Wie greife ich auf die Kamera zu?

Die Antwort lautet:

Verwendung des image_picker Plugins.

Frage:

Wie melde ich mich über Facebook an?

Die Antwort lautet:

Verwendung des flutter_facebook_login Plugins.

Frage:

Wie benutzt man Firebase?

Die Antwort lautet:

Firebase unterstützt Flutter First-Party-Plugins :

• firebase_admob für Firebase AdMob;
• firebase_analytics für Firebase Analytics;
• firebase_auth für Firebase Auth;
• firebase_database für Firebase RTDB;
• firebase_storage für Firebase Cloud Storage;
• firebase_messaging für Firebase Messaging (FCM);
• flutter_firebase_ui für die schnelle Integration von Firebase Auth (Facebook, Google, Twitter und E-Mail);
• cloud_firestore für Firebase Cloud Firestore.

Hier sind vielleicht die Antworten auf die grundlegenden Fragen. Ich hoffe, meine Interpretation hat Ihnen geholfen, und wenn Sie noch nicht über Flutter schreiben, dann denken Sie zumindest darüber nach. Dies bedeutet, dass das Flutter-Regal der Entwickler möglicherweise erweitert wird, und gemeinsam werden wir die Welt durch das Prisma der entwickelten praktischen und schnellen Anwendungen zu einem besseren Ort machen! Ja, die Reaktion wird deine Eingeborene nicht brechen!