Geekly articles weekly

[Di dermaga] Berkibar. Bagian 3. Untuk Pengembang Asli Bereaksi

Kami melanjutkan interpretasi singkat dari dokumentasi Flutter resmi dalam format tanya-jawab. Ini adalah bagian ketiga, dan akan lebih berguna untuk Bereaksi pengembang asli. Dalam interpretasi ini, Anda dapat menemukan jawaban untuk pertanyaan yang sering diajukan, serta menentukan sendiri berapa banyak upaya yang perlu Anda lakukan untuk beralih dari satu kerangka kerja lintas platform ke yang lain.



Jika informasi ini tidak cukup atau Anda memiliki pengalaman dalam pengembangan asli untuk platform tertentu, maka saya sarankan untuk melihat bagian lain:

Bergetar. Bagian 1. Untuk pengembang Android
Bergetar. Bagian 2. Untuk pengembang iOS
Bergetar. Bagian 3. Untuk Pengembang Asli Bereaksi
Bergetar. Bagian 4. Untuk Pengembang Web
Bergetar. Bagian 5. Untuk Pengembang Xamarin

Konten:


  1. Sedikit tentang Dart

  2. Dasar-dasarnya

  3. Struktur dan Sumber Daya Proyek

  4. Tampilan

  5. Tata letak

  6. Stilisasi

  7. Manajemen negara

  8. Penyimpanan lokal

  9. Navigasi

  10. Gerakan dan penanganan acara sentuh

  11. Permintaan HTTP

  12. Formulir input

  13. Kode khusus platform

  14. Debugging

  15. Animasi

  16. Komponen Setara

  17. Flutter Plugins



Sedikit tentang Dart


Pertanyaan:


Di mana titik masuknya?

Jawabannya adalah:


Fungsi main() .

Perbedaan:


JavaScript tidak memiliki titik masuk yang telah ditentukan; JavaScript dapat berupa fungsi apa pun yang ditentukan oleh pengembang. Di Dart, ini hanya main() .

Pertanyaan:


Bagaimana cara output ke konsol?

Jawabannya adalah:


Menggunakan fungsi print() .

Perbedaan:


Dalam JavaScript, output konsol dilakukan menggunakan console.log() .

Contoh:


 print('Hello world!');

Pertanyaan:


Bagaimana cara membuat dan menetapkan variabel / bidang?

Jawabannya adalah:


Dart mendukung pengetikan yang dinamis dan kuat. Oleh karena itu, variabel / bidang dapat dibuat dalam semua jenis pengetikan yang sesuai untuk Anda. Penugasan terjadi melalui tunggal =.

Perbedaan:


Pengetikan yang kuat tidak didukung dalam JavaScript.

Informasi tambahan:


Lebih detail di sini.

Contoh:


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

Pertanyaan:


Berapa nilai default suatu variabel / bidang?

Jawabannya adalah:


null

Perbedaan:


JavaScript tidak undefined secara default.

Informasi tambahan:


Lebih detail di sini.

Pertanyaan:


Bagaimana cara memeriksa nilai untuk null atau 0?

Jawabannya adalah:


Menggunakan verifikasi eksplisit == .

Perbedaan:


Dalam JavaScript, sebagai bagian dari centang if , angka 1 atau objek non-null akan sama dengan true . Di Dart, hanya nilai boolean dari true setara dengan true .

Contoh:


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

Pertanyaan:


Bagaimana cara mendeklarasikan fungsi?

Jawabannya adalah:


Di Dart, fungsi, seperti bidang, bisa dengan pengetikan dinamis atau nilai pengembalian yang kuat. Diketik secara dinamis dideklarasikan hanya dengan nama fungsi dan secara opsional oleh parameter, sedangkan yang sangat diketik di awal masih memiliki tipe kembali.

Perbedaan:


Dalam JavaScript, suatu fungsi dideklarasikan dengan function kata kunci, diikuti oleh nama dan parameter opsional.

Informasi tambahan:


Lebih detail di sini.

Contoh:


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

Pertanyaan:


Apa yang setara dengan Janji ?

Jawabannya adalah:


Masa depan

Informasi tambahan:


Dart, seperti JavaScript, mendukung eksekusi satu utas. Future in Dart memiliki arti yang sama dengan Promise in React Native.
Lebih detail di sini. .

Contoh:


 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)); }

Pertanyaan:


Apa analog dari async dan await ?

Jawabannya adalah:


async dan await

Perbedaan:


Dalam JavaScript, fungsi async mengembalikan Promise , di Dart, mereka mengembalikan Future . menunggu dengan sinkron mengharapkan hasil memanggil fungsi async.

Informasi tambahan:


Lebih detail di sini.

Contoh:


 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); } }

Dasar-dasarnya


Pertanyaan:


Bagaimana cara membuat proyek aplikasi di Flutter?

Jawabannya adalah:


  1. Menggunakan IDE dengan plugin Flutter dan Dart diinstal.
  2. Menggunakan perintah flutter create {projectname} .

Perbedaan:


Untuk membuat proyek di React Native, gunakan perintah create-react-native-app {projectname} .

Informasi tambahan:


Lebih detail di sini.

Pertanyaan:


Bagaimana cara memulai aplikasi?

Jawabannya adalah:


  1. Menggunakan fungsi jalankan di IDE dengan plugin Flutter dan Dart diinstal.
  2. Menggunakan perintah flutter run .

Perbedaan:


React Native menggunakan npm run atau yarn run untuk meluncurkan aplikasi.

Pertanyaan:


Bagaimana cara mengimpor widget?

Jawabannya adalah:


Di Flutter, semua widget dipecah menjadi beberapa paket, jadi mengimpor paket cukup untuk menggunakan widgetnya.

Perbedaan:


Di Bereaksi Asli, Anda perlu mengimpor setiap widget.

Contoh:


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

Pertanyaan:


Bagaimana cara menggunakan widget dan bersarang untuk membangun pohon widget?

Jawabannya adalah:


Di Flutter, hampir semuanya adalah widget. Bahkan objek aplikasi adalah widget. Setiap widget dapat bersarang di induknya. Dengan menggabungkan widget, Anda membangun hierarki yang disebut pohon widget. Dialah yang kemudian berubah menjadi tampilan di layar.

Contoh:


 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'), ), ), ); } }

Pertanyaan:


Bagaimana cara membuat komponen yang dapat digunakan kembali?

Jawabannya adalah:


Di Flutter, Anda dapat membuat kelas widget dan menggunakannya kembali. Parameter yang digunakan adalah bidang kelas.

Perbedaan:


Di Bereaksi Asli, untuk mengubah parameter elemen yang digunakan kembali, Anda harus menandainya sebagai alat peraga.

Informasi tambahan:


Parameter dalam konstruktor dapat dideklarasikan dalam dua cara: dengan penghitungan reguler dan opsional, menggunakan kurung kurawal {} . Perbedaan terjadi ketika menggunakan parameter untuk memanggil konstruktor.
Dalam pencacahan biasa, semua parameter diperlukan, dan saat memanggil konstruktor, Anda tidak dapat menentukan parameter tertentu yang dilewati, karena itu karena pesanan.
Dengan opsional, Anda dapat menggunakan urutan apa pun di mana parameter dikirimkan, tetapi Anda harus menentukan parameter spesifik mana yang dikirim atau tidak untuk mengirimnya sama sekali. Untuk menandai parameter opsional sebagaimana diperlukan, gunakan anotasi @required .

Contoh:


 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'); }, ) ...

Struktur dan Sumber Daya Proyek


Pertanyaan:


Di mana harus mulai menulis kode?

Jawabannya adalah:


Di {projectname}/lib/main.dart .

Pertanyaan:


Apa struktur file dalam proyek Flutter?

Jawabannya adalah:


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

Pertanyaan:


Di mana menyimpan sumber daya dan aset dan bagaimana menggunakannya?

Jawabannya adalah:


Tautan ke sumber daya dan dependensi proyek disimpan dalam file pubspec.yaml . Bahkan, Anda dapat menempatkannya di folder apa pun di dalam lib , yang paling penting, tentukan path ke mereka di pubspec.yaml . Anda dapat menggunakannya dalam proyek baik menggunakan widget khusus, misalnya AssetImage , atau langsung menggunakan AssetBundle .

Informasi tambahan:


Lebih detail di sini.

Contoh:


Mendeklarasikan aset di pubspec.yaml

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

Gunakan dalam kode

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

Pertanyaan:


Bagaimana cara mengunduh gambar dari jaringan?

Jawabannya adalah:


Menggunakan Image.network .

Contoh:


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

Pertanyaan:


Bagaimana cara menghubungkan paket dan plugin pihak ketiga?

Jawabannya adalah:


Menggunakan dependencies di pubspec.yaml .

Perbedaan:


Bereaksi Asli menggunakan yarn add {package-name} atau npm install --save {package-name} perintah untuk menambahkan dependensi.

Informasi tambahan:


Menggunakan Paket
Pengembangan paket dan plugin
Plugin populer untuk Flutter

Contoh:


 dependencies: flutter: sdk: flutter google_sign_in: ^3.0.3

Tampilan


Pertanyaan:


Apa yang setara dengan wadah Tampilan ?

Jawabannya adalah:


Semua widget dasar untuk tata letak, misalnya Wadah , Kolom , Baris , dan Tengah .

Informasi tambahan:


Lebih detail di sini.

Pertanyaan:


Apa yang dimaksud dengan analog dari FlatList atau SelectionList ?

Jawabannya adalah:


Tampilan daftar

Contoh:


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

Pertanyaan:


Bagaimana cara menggunakan Canvas?

Jawabannya adalah:


Menggunakan kelas CustomPaint dan CustomPainter .

Perbedaan:


Di Bereaksi Asli, tidak ada cara untuk menggambar menggunakan Kanvas di luar kotak. Ada plugin pihak ketiga, misalnya react-native-canvas .

Contoh:


 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(), ), ); } }

Tata letak


Pertanyaan:


Bagaimana cara menggunakan widget untuk menggambarkan properti tata letak?

Jawabannya adalah:


Flutter menggunakan widget khusus untuk properti tata letak, misalnya:
Kolom , Baris , Padding , Align , Stack .

Perbedaan:


Dalam Bereaksi Asli, properti tata letak yang paling sering dapat diatur menggunakan props .

Informasi tambahan:


Daftar lengkap widget

Pertanyaan:


Bagaimana cara memposisikan widget dalam tata letak?

Jawabannya adalah:


Untuk penentuan posisi absolut, gunakan widget Stack . Untuk relatif - berbagai widget dan kombinasinya, dapat ditemukan di sini .

Contoh:


 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'), ), ], )

Stilisasi


Pertanyaan:


Bagaimana cara mendesain komponen?

Jawabannya adalah:


Paling sering, widget memiliki properti style .

Perbedaan:


Bereaksi Asli menggunakan stylesheets.create untuk penataan.

Contoh:


 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) ), ], ), )

Pertanyaan:


Bagaimana cara menggunakan ikon dan warna?

Jawabannya adalah:


Menggunakan kelas Ikon dan Warna .

Perbedaan:


Bereaksi Asli tidak memiliki ikon dukungan di luar kotak.

Contoh:


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

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

Pertanyaan:


Bagaimana cara menyesuaikan tema gaya aplikasi?

Jawabannya adalah:


Menggunakan kelas ThemeData .

Perbedaan:


Dalam Bereaksi Asli, tema umum dikonfigurasi melalui stylesheets .

Contoh:

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

Manajemen negara


Pertanyaan:


Bagaimana cara memperbarui tampilan widget?

Jawabannya adalah:


Menggunakan StatefulWidget dan State -nya. Flutter memiliki 2 jenis widget: StatelessWidget dan StatefulWidget . Mereka bekerja dengan cara yang sama, satu-satunya perbedaan adalah dalam kondisi rendering.

Perbedaan:


StatelessWidget memiliki status yang tidak dapat diubah. Cocok untuk menampilkan teks, logo, dll. Yaitu jika elemen pada layar tidak boleh berubah selama seluruh waktu tampilan, maka itu cocok untuk Anda. Ini juga dapat digunakan sebagai wadah untuk widget stateful.

StatefulWidget memiliki status Negara , yang menyimpan informasi tentang keadaan saat ini. Jika Anda ingin mengubah elemen di layar saat melakukan beberapa tindakan (respons datang dari server, pengguna mengklik tombol, dll.) - ini adalah pilihan Anda.

Contoh:


1) StatelessWidget - Teks

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

2) StatefulWidget - ketika Anda mengklik tombol (FloatingActionButton), teks dalam widget Teks berubah dari I Like Flutter ke 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), ), ); } }

Penyimpanan lokal


Pertanyaan:


Bagaimana cara menyimpan data key-value dalam suatu aplikasi?

Jawabannya adalah:


Menggunakan plugin shared_preferences .

Perbedaan:


Bereaksi Asli menggunakan AsyncStorage .

Contoh:


Kecanduan

 dependencies: flutter: sdk: flutter shared_preferences: ^0.4.3

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

Pertanyaan:


Bagaimana cara menyimpan data yang kompleks?

Jawabannya adalah:


Menggunakan plugin basis data, mis. Sqflite atau sarang .

Navigasi


Pertanyaan:


Bagaimana cara menavigasi antar layar?

Jawabannya adalah:


Menavigasi antar layar menggunakan kelas Navigator dan Rute .

Perbedaan:


Bereaksi Asli menggunakan StackNavigator , TabNavigator, dan DrawerNavigator .

Flutter memiliki dua metode navigasi:

  1. Jelaskan Peta dengan nama Rute
  2. Navigasi langsung ke Rute .

Navigator dapat melakukan push () atau pop () ke rute yang Anda tentukan.

Contoh:


 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');

Pertanyaan:


Bagaimana cara menggunakan navigasi tab?

Jawabannya adalah:


Menggunakan kelas: TabController , TabBar , Tab, dan TabBarView .

Perbedaan:


Bereaksi Asli menggunakan createBottomTabNavigator dan TabNavigation .

Informasi tambahan:



Lebih detail di sini. .

Contoh:


 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, ) ); } }

Pertanyaan:


Bagaimana cara menggunakan navigasi laci?

Jawabannya adalah:


Menggunakan kelas Drawer .

Perbedaan:


Bereaksi Asli menggunakan createDrawerNavigator dan DrawerNavigation .

Contoh:


 @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(), ); }

Gerakan dan penanganan acara sentuh


Pertanyaan:


Bagaimana cara menangani klik?

Jawabannya adalah:


Jika widget mendukung klik, maka dalam onPressed() . Jika tidak, gunakan widget GestureDetector .

Perbedaan:


React Native menggunakan PanResponder atau Touchable untuk ini.

Contoh:


 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'); }, );

Permintaan HTTP


Pertanyaan:


Bagaimana cara mendapatkan data dari permintaan API?

Jawabannya adalah:


Menggunakan plugin http .

Perbedaan:


Bereaksi Asli menggunakan fetch API .

Contoh:


Koneksi plugin

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

Pengambilan data

 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; }); }

Formulir input


Pertanyaan:


Widget apa yang digunakan untuk input?

Jawabannya adalah:


TextField bersama dengan TextEditingController atau TextFormField .

Perbedaan:


Bereaksi Asli menggunakan TextInput .
TextFormField berbeda dari TextField dalam validasi dan logika bawaannya untuk menyimpan nilai dalam bidang.

Contoh:


Bidang teks

 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'), ) ); } }

Kode khusus platform


Pertanyaan:


Bagaimana cara menentukan platform yang menjalankan kode?

Jawabannya adalah:


Menggunakan kelas bidang platform di Tema atau kelas Platform .

Contoh:


Bidang platform

 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 '; }

Kelas Platform

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

Pertanyaan:


Bagaimana cara memanggil kode platform asli?

Jawabannya adalah:


Melalui MethodChannel .

Informasi tambahan:


Lebih detail di sini. .

Debugging


Pertanyaan:


Apa alat untuk debugging aplikasi?

Jawabannya adalah:


DevTools

Pertanyaan:


Bagaimana cara melakukan hot reload ?

Jawabannya adalah:


Jika aplikasi diluncurkan dari IntelliJ IDE atau Android Studio, maka ⌘s/ctrl-s atau mengklik ikon hot reload . Jika dimulai dari terminal, maka dengan memasukkan huruf r .

Perbedaan:


Bereaksi Asli menggunakan ⌘R/Ctrl+R untuk emulator iOS, double R untuk Android.

Pertanyaan:


Bagaimana cara mengakses menu pengembang di aplikasi?

Jawabannya adalah:


Jika peluncuran berasal dari IDE, maka gunakan alat IDE. Jika dari konsol, gunakan h.

Perbedaan:


Bereaksi Asli menggunakan ⌘D/Ctrl+D untuk emulator iOS dan ⌘M/Ctrl+M untuk Android.

Informasi tambahan:


Daftar lengkap tim

AksiTim dalam terminalFungsi dan Bidang
Hirarki widgetwdebugDumpApp ()
Render pohontdebugDumpRenderTree ()
LayersL.debugDumpLayerTree ()
AksesibilitasS (urutan traversal) atau U (urutan uji hit terbalik)debugDumpSemantics ()
Inspektur widgetsayaWidgetsApp.showWidgetInspectorOverride
Tampilkan garis konstruksihaldebugPaintSizeEnabled
Simulasi berbagai OSodefaultTargetPlatform
PerformaPWidgetsApp. showPerformanceOverlay
Tangkapan layar flutter.pngs
Aplikasi ditutupq

Animasi


Pertanyaan:


Apa yang digunakan untuk animasi?

Jawabannya adalah:


Animasi dan AnimationController .

Perbedaan:


Bereaksi Asli menggunakan Animation API .

Informasi tambahan:


Lebih detail di sini.

Pertanyaan:


Bagaimana cara menambahkan animasi fade-in sederhana?

Jawabannya adalah:


Menggunakan FadeTransition .

Contoh:


 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(); } }

Pertanyaan:


Bagaimana cara menambahkan animasi gesek ke daftar item?

Jawabannya adalah:


Menggunakan Dismissible .

Contoh:


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

Komponen Setara


Pertanyaan:


Apa yang setara dengan Flutter dibandingkan dengan React Native?

Jawabannya adalah:


Bereaksi asliBergetar
TombolTombol diangkat
TombolFlatbutton
ScrollviewTampilan daftar
Daftar datarListView.builder ()
GambarGambar
ModalModaloute
ActivityIndicatorIndikator Kemajuan Lingkaran
ActivityIndicatorLinearProgressIndicator
Perbarui kontrolRefreshindikator
LihatWadah
LihatKolom
LihatBaris
LihatPusat
LihatPadding
Kapasitas terjamahGesturedetector
Masukan teksMasukan teks
TeksTeks
BeralihBeralih
SliderSlider

Flutter Plugins


Pertanyaan:


Bagaimana cara mengakses GPS?

Jawabannya adalah:


Menggunakan plugin geolocator .

Pertanyaan:


Bagaimana cara mengakses kamera?

Jawabannya adalah:


Menggunakan plugin image_picker .

Pertanyaan:


Bagaimana cara masuk melalui Facebook?

Jawabannya adalah:


Menggunakan plugin flutter_facebook_login .

Pertanyaan:


Bagaimana cara menggunakan firebase?

Jawabannya adalah:


Firebase mendukung plugin Flutter pihak pertama :


Ini mungkin jawaban untuk pertanyaan dasar. Saya harap interpretasi saya bermanfaat bagi Anda, dan jika Anda belum menulis di Flutter, maka setidaknya pikirkanlah. Ini berarti bahwa mungkin ada tambahan pada rak pengembang Flutter, dan bersama-sama kita akan membuat dunia menjadi tempat yang lebih baik melalui prisma aplikasi yang dikembangkan dengan mudah dan cepat! Ya Bereaksi tidak akan merusak Asli Anda!

Source: https://habr.com/ru/post/id484284/

More articles:


All Articles