وقد كتب رفرفة بالفعل العديد من المقالات. كل شهر أصبح أكثر شعبية. لذلك قررت أن أفسر الوثائق الرسمية للرفرفة في شكل موجز وجواب. أعتقد أن الكثيرين ، مثلي ، ليس لديهم وقت فراغ كاف لدراسة تفاصيل الإطار الذي لا يزالون لا يعملون فيه.
إذا كنت تريد أن تفهم ماهية هذا الإطار الجيد ، ولتقييم مقدار الجهد الذي عليك القيام به من أجل استخدامه ، مرحبًا بك في كات.
المحتويات:
- المشاهدات
- النوايا
- متزامن واجهة المستخدم
- هيكل المشروع والموارد
- الأنشطة و الشظايا
- تخطيطات
- الإيماءات والتعامل مع الحدث اللمس.
- Listviews ومحولات
- العمل مع النص
- شكل الإدخال
- الإضافات الرفرفة
- المواضيع
- قواعد البيانات والتخزين المحلي
- الإخطارات
المشاهدات
سؤال:
ما هو ما يعادل
عرض في رفرفة؟
الجواب هو:
القطعةالاختلافات:
عرض - في الواقع ، ماذا سيكون على الشاشة. يسمى Invalidate () لعرض التغييرات.
القطعة - وصف لما سيكون على الشاشة. من أجل التغيير يتم إنشاؤه من جديد.
معلومات اضافية:
عند تشغيله على Android نفسه ، يكون View تحت غطاء Widget. يتضمن الرفرفة مكتبة
مكونات المواد . أنه يحتوي على عناصر واجهة تعامل تطبيق
إرشادات تصميم المواد .
سؤال:
كيفية تحديث عرض الحاجيات؟
الجواب هو:
باستخدام
StatefulWidget وحالتها . يحتوي Flutter على نوعين من الحاجيات:
StatelessWidget و
StatefulWidget . أنها تعمل بنفس الطريقة ، والفرق الوحيد هو في حالة التقديم.
الاختلافات:
StatelessWidget لديه حالة غير قابلة للتغيير. مناسب لعرض النص والشعار ، إلخ. أي إذا كان يجب عدم تغيير العنصر على الشاشة خلال وقت العرض بالكامل ، فهذا يناسبك. كما يمكن استخدامه كحاوية لعناصر واجهة المستخدم.
يحتوي StatefulWidget على حالة الولاية ، التي تخزّن معلومات حول الحالة الحالية. إذا كنت ترغب في تغيير عنصر على الشاشة عند إجراء بعض الإجراءات (جاءت استجابة من الخادم ، فقد نقر المستخدم على زر ، وما إلى ذلك) - هذا هو خيارك.
مثال:
1) StatelessWidget - النص
Text( 'I like Flutter!', style: TextStyle(fontWeight: FontWeight.bold), );
2) StatefulWidget - عند النقر فوق الزر (FloatingActionButton) ، يتغير النص الموجود في عنصر واجهة المستخدم Text من "I Like Flutter" إلى "Flutter is Awesome!".
import 'package:flutter/material.dart'; void main() { runApp(SampleApp()); } class SampleApp extends StatelessWidget {
سؤال:
كيفية تخطيط الشاشة مع الحاجيات؟ أين هو ملف تخطيط XML؟
الجواب هو:
لا يحتوي Flutter على تنسيق XML للشاشات. كل شيء تنضيد في شجرة القطعة مباشرة في التعليمات البرمجية.
مثال:
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Sample App"), ), body: Center( child: MaterialButton( onPressed: () {}, child: Text('Hello'), padding: EdgeInsets.only(left: 10.0, right: 10.0), ), ), ); }
يمكن الاطلاع على جميع الحاجيات الافتراضية في Flutter في
كتالوج عنصر واجهة المستخدم .
سؤال:
كيفية إضافة أو إزالة مكون في التخطيط أثناء تشغيل التطبيق؟
الجواب هو:
من خلال وظيفة من شأنها أن ترجع القطعة المطلوبة اعتمادا على الدولة.
الاختلافات:
على Android ، يمكنك إضافة addView () أو removeView () في ViewGroup. في الرفرفة ، لا يمكن ذلك بسبب الحاجيات لم تتغير. فقط حالتهم يمكن أن تتغير.
مثال:
كيفية تغيير النص إلى زر بالنقر فوق FloatingActionButton.
import 'package:flutter/material.dart'; void main() { runApp(SampleApp()); } class SampleApp extends StatelessWidget {
سؤال:
كيفية تحريك الحاجيات؟
الجواب هو:
باستخدام فئة
AnimationController ، وهو سليل فئة الملخص
<T> المتحركة . بالإضافة إلى بدء تشغيل الرسوم المتحركة ، يمكنه إيقافها مؤقتًا والرجوع إليها والتوقف عنها وتشغيلها في الاتجاه المعاكس. يعمل مع
تكر ، الذي يبلغ عن إعادة رسم الشاشة.
الاختلافات:
على Android ، يمكنك إنشاء رسوم متحركة في XML أو تحريك العرض باستخدام animate (). في Flutter ، يجب كتابة الرسوم المتحركة في التعليمات البرمجية باستخدام AnimationController.
معلومات اضافية:
يمكنك معرفة المزيد في عناصر
الرسوم المتحركة والحركة ، والبرنامج
التعليمي للرسوم المتحركة ، والنظرة العامة للرسوم المتحركة .
مثال:
تتلاشى الرسوم المتحركة لشعار الرفرفة.
import 'package:flutter/material.dart'; void main() { runApp(FadeAppTest()); } class FadeAppTest extends StatelessWidget {
سؤال:
كيفية استخدام
قماش ؟
الجواب هو:
Android و Flutter لديهم نفس واجهة برمجة التطبيقات لـ Canvas ، مثل يستخدمون نفس محرك
Skia ذو المستوى
المنخفض .
الاختلافات:
رقم
معلومات اضافية:
يحتوي
Flutter على فئتين للرسم على Canvas -
CustomPaint و
CustomPainter . الثاني ينفذ خوارزمية التقديم.
اقرأ المزيد هنا:
StackOverflowمثال:
import 'package:flutter/material.dart'; void main() => runApp(MaterialApp(home: DemoApp())); class DemoApp extends StatelessWidget { Widget build(BuildContext context) => Scaffold(body: Signature()); } class Signature extends StatefulWidget { SignatureState createState() => SignatureState(); } class SignatureState extends State<Signature> { List<Offset> _points = <Offset>[]; Widget build(BuildContext context) { return GestureDetector( onPanUpdate: (DragUpdateDetails details) { setState(() { RenderBox referenceBox = context.findRenderObject(); Offset localPosition = referenceBox.globalToLocal(details.globalPosition); _points = List.from(_points)..add(localPosition); }); }, onPanEnd: (DragEndDetails details) => _points.add(null), child: CustomPaint(painter: SignaturePainter(_points), size: Size.infinite), ); } } class SignaturePainter extends CustomPainter { SignaturePainter(this.points); final List<Offset> points; void paint(Canvas canvas, Size size) { var paint = Paint() ..color = Colors.black ..strokeCap = StrokeCap.round ..strokeWidth = 5.0; for (int i = 0; i < points.length - 1; i++) { if (points[i] != null && points[i + 1] != null) canvas.drawLine(points[i], points[i + 1], paint); } } bool shouldRepaint(SignaturePainter other) => other.points != points; }
سؤال:
كيفية إنشاء الحاجيات المخصصة؟
الجواب هو:
إنشاء الحاجيات داخل واحد (بدلا من الميراث).
الاختلافات:
في Android ، يمكننا أن نرث من طريقة العرض التي نهتم بها ونضيف منطقنا الخاص. في Flutter ، يشبه هذا ViewGroup ، حيث يتم توارث عنصر واجهة المستخدم فقط دائمًا من StatelessWidget أو StatefulWidget. أي تحتاج إلى إنشاء عنصر واجهة مستخدم جديد واستخدامه في مجموعة عناصر واجهة المستخدم التي تحتاج إليها كمعلمات أو حقول.
مثال:
class CustomButton extends StatelessWidget { final String label; CustomButton(this.label); @override Widget build(BuildContext context) { return RaisedButton(onPressed: () {}, child: Text(label)); } } @override Widget build(BuildContext context) { return Center( child: CustomButton("Hello"), ); }
النوايا
سؤال:
ما هو
التماثل في
النوايا في الرفرفة؟
الجواب هو:
هو ليس هناك. التنقل بين الشاشات يستخدم فئتي
Navigator و
Route .
للتفاعل مع المكونات الخارجية (على سبيل المثال ، الكاميرا أو منتقي الملفات) ، يمكنك استخدام
المكونات الإضافية أو التكامل الأصلي على كل منصة. تعرف على المزيد حول التكامل الأصلي:
تطوير الحزم والإضافات .
الاختلافات:
لا يوجد رفرف مثل "النشاط والجزء". هناك المستكشف (المستكشف) والطرق (الطرق). يشبه تطبيق Flutter تطبيق أحادي النشاط ، حيث تمثل الشاشات المختلفة شظايا مختلفة ، ويتحكم FragmentManager فيها. Navigator يشبه FragmentManager من حيث المبدأ. يمكنه القيام
بالدفع () أو
pop () إلى المسار الذي تحدده. الطريق هو نوع من التشرذم ، لكن في Flutter ، من المعتاد مقارنة ذلك بشاشة أو صفحة.
في Android ، نصف جميع الأنشطة التي يمكننا التنقل بينها في AndroidManifest.xml.
رفرفة لها طريقتان:
- وصف خريطة اسمها المسار (MaterialApp)
- انتقل مباشرة إلى الطريق (WidgetApp).
مثال:
void main() { runApp(MaterialApp( home: MyAppHome(),
سؤال:
كيفية معالجة النوايا القادمة من التطبيقات الأخرى؟
الجواب هو:
التفاعل مع طبقة Android للتطبيق من خلال
MethodChannel .
مثال:
نكتب intent-filter في AndroidManifest.xml:
<activity android:name=".MainActivity" android:launchMode="singleTop" android:theme="@style/LaunchTheme" android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection" android:hardwareAccelerated="true" android:windowSoftInputMode="adjustResize"> <intent-filter> <action android:name="android.intent.action.SEND" /> <category android:name="android.intent.category.DEFAULT" /> <data android:mimeType="text/plain" /> </intent-filter> </activity>
نقوم بمعالجة النية في MainActivity وندعو الكود من الرفرفة عبر MethodChannel:
package com.example.shared; import android.content.Intent; import android.os.Bundle; import java.nio.ByteBuffer; import io.flutter.app.FlutterActivity; import io.flutter.plugin.common.ActivityLifecycleListener; import io.flutter.plugin.common.MethodCall; import io.flutter.plugin.common.MethodChannel; import io.flutter.plugins.GeneratedPluginRegistrant; public class MainActivity extends FlutterActivity { private String sharedText; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); GeneratedPluginRegistrant.registerWith(this); Intent intent = getIntent(); String action = intent.getAction(); String type = intent.getType(); if (Intent.ACTION_SEND.equals(action) && type != null) { if ("text/plain".equals(type)) { handleSendText(intent);
نطلب البيانات عند بدء رسم الأداة:
import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; void main() { runApp(SampleApp()); } class SampleApp extends StatelessWidget {
سؤال:
ما هو التناظرية
startActivityForResult () ؟
الجواب هو:
الكلمة المفتاحية المنتظرة ونتائج
فئة المستقبل .
الاختلافات:
بعد استدعاء startActivityForResult () في Android ، نحتاج إلى تنفيذ المعالجة في onActivityResult (). رفرفة لا تحتاج إلى تنفيذ أي شيء ، لأنه طريقة navigator push () تقوم بإرجاع كائن Future.
مثال:
Map coordinates = await Navigator.of(context).pushNamed('/location');
وعندما نحصل على الإحداثيات على شاشة "/ الموقع" ، قم بعمل pop ():
Navigator.of(context).pop({"lat":43.821757,"long":-79.226392});
متزامن واجهة المستخدم
سؤال:
ما هو التناظرية من
runOnUiThread () في الرفرفة؟
الجواب هو:
تقوم Dart بتنفيذ نموذج تنفيذ أحادي الترابط يتم تشغيله على
Isolates . يستخدم التنفيذ غير المتزامن async / await ، والذي قد تكون على دراية به من coroutines C # أو JavaScript أو Kotlin.
مثال:
تلبية الطلب وإرجاع النتيجة لتحديث واجهة المستخدم:
loadData() async { String dataURL = "https://jsonplaceholder.typicode.com/posts"; http.Response response = await http.get(dataURL); setState(() { widgets = json.decode(response.body); }); }
عند تلقي استجابة الطلب ، تحتاج إلى استدعاء الأسلوب
setState () لإعادة رسم شجرة القطعة باستخدام البيانات الجديدة.
مثال:
تحميل وتحديث البيانات في
ListView :
import 'dart:convert'; import 'package:flutter/material.dart'; import 'package:http/http.dart' as http; 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> { List widgets = []; @override void initState() { super.initState(); loadData(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Sample App"), ), body: ListView.builder( itemCount: widgets.length, itemBuilder: (BuildContext context, int position) { return getRow(position); })); } Widget getRow(int i) { return Padding( padding: EdgeInsets.all(10.0), child: Text("Row ${widgets[i]["title"]}") ); } loadData() async { String dataURL = "https://jsonplaceholder.typicode.com/posts"; http.Response response = await http.get(dataURL); setState(() { widgets = json.decode(response.body); }); } }
سؤال:
كيفية تنفيذ التعليمات البرمجية في موضوع الخلفية؟
الجواب هو:
كما ذكر أعلاه - استخدام المتزامن / انتظار والعزلة (عزل).
الاختلافات:
من خارج منطقة الجزاء على Android ، يمكنك استخدام AsyncTask. تحتاج إلى تطبيق
onPreExecute () ،
doInBackground () ،
onPostExecute () فيه . في Flutter "خارج الصندوق" ، تحتاج فقط إلى استخدام المزامنة / الانتظار ، وسيتولى دارت الاهتمام بالباقي.
مثال:
هنا يتم عزل أسلوب dataLoader (). بمعزل ، يمكنك تشغيل عمليات ثقيلة مثل تحليل JSONs الكبيرة والتشفير ومعالجة الصور ، إلخ.
loadData() async { ReceivePort receivePort = ReceivePort(); await Isolate.spawn(dataLoader, receivePort.sendPort);
سؤال:
ما هو رفرفة
OkHttp المكافئة؟
الجواب هو:
لدى Flutter
حزمة HTTP الخاصة بها.
معلومات اضافية:
حتى الآن ، لم يتم تطبيق جميع ميزات OkHttp في حزمة HTTP ، لذلك يتم استخراج العديد من الميزات المفقودة ويمكنك تنفيذها بنفسك حسب الحاجة.
مثال:
لاستخدام حزمة HTTP ، أضفها كتبعية في pubspec.yaml:
dependencies: ... http: ^0.11.3+16
لتنفيذ الطلب ، يرجى الانتظار في وظيفة المتزامن http.get ():
import 'dart:convert'; import 'package:flutter/material.dart'; import 'package:http/http.dart' as http; [...] loadData() async { String dataURL = "https://jsonplaceholder.typicode.com/posts"; http.Response response = await http.get(dataURL); setState(() { widgets = json.decode(response.body); }); } }
سؤال:
كيف تظهر التقدم؟
الجواب هو:
باستخدام أداة
ProgressIndicator .
مثال:
import 'dart:convert'; import 'package:flutter/material.dart'; import 'package:http/http.dart' as http; 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> { List widgets = []; @override void initState() { super.initState(); loadData(); } showLoadingDialog() { return widgets.length == 0; } getBody() { if (showLoadingDialog()) { return getProgressDialog(); } else { return getListView(); } } getProgressDialog() { return Center(child: CircularProgressIndicator()); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Sample App"), ), body: getBody()); } ListView getListView() => ListView.builder( itemCount: widgets.length, itemBuilder: (BuildContext context, int position) { return getRow(position); }); Widget getRow(int i) { return Padding(padding: EdgeInsets.all(10.0), child: Text("Row ${widgets[i]["title"]}")); } loadData() async { String dataURL = "https://jsonplaceholder.typicode.com/posts"; http.Response response = await http.get(dataURL); setState(() { widgets = json.decode(response.body); }); } }
هيكل المشروع والموارد
سؤال:
حيث لتخزين الموارد من قرارات مختلفة؟
الجواب هو:
في الأصول.
الاختلافات:
في Android ، تحتوي الموارد على مجلد res ولديها أصول. رفرفة لديها الأصول فقط. يمكن أن يوجد مجلد الأصول في أي مكان في المشروع ، والأهم من ذلك ، اكتب المسار إليه في ملف pubspec.yaml.
معلومات اضافية:
مقارنة أحجام الموارد الرسومية في Android و Flutter.
يستخدم Flutter AssetManager أو فصول متخصصة تبدأ من Asset لاستخدام الموارد في التعليمات البرمجية.
مثال:
مدير الأصول:
val flutterAssetStream = assetManager.open("flutter_assets/assets/my_flutter_asset.png")
موقع المورد:
images/my_icon.png // Base: 1.0x image images/2.0x/my_icon.png // 2.0x image images/3.0x/my_icon.png // 3.0x image
المسار في ملف pubspec.yaml:
assets: - images/my_icon.jpeg
باستخدام
AssetImage :
return AssetImage("images/a_dot_burr.jpeg");
باستخدام الأصول مباشرة:
@override Widget build(BuildContext context) { return Image.asset("images/my_image.png"); }
سؤال:
حيث لتخزين السلاسل؟ كيفية توطينهم؟
الجواب هو:
تخزينها في الحقول الثابتة. توطين باستخدام
حزمة intl .
مثال:
class Strings { static String welcomeMessage = "Welcome To Flutter"; } Text(Strings.welcomeMessage)
سؤال:
ما هو التماثلية لملف gradle؟ كيفية إضافة التبعيات؟
الجواب هو:
pubspec.yaml.
معلومات اضافية:
يقوم Flutter بتفويض التجميع إلى منشئي Android و iOS الأصليين. انظر قائمة بجميع المكتبات الشعبية لـ Flutter في
Pub .
الأنشطة و الشظايا
سؤال:
ما هو المكافئ للنشاط والشظايا في الرفرفة؟
الجواب هو:
كل شيء في رفرفة هو الحاجيات. يتم لعب دور النشاط وشظايا العمل مع واجهة المستخدم بواسطة عناصر واجهة المستخدم. ودور الملاحة ، كما ذكر في الفقرة على الملاحة ، هو Navigator و Route.
معلومات اضافية:
رفرفة لمطوري Android: كيفية تصميم واجهة مستخدم نشاط في الرفرفة .
سؤال:
كيفية التعامل مع أحداث دورة الحياة؟
الجواب هو:
باستخدام الأسلوب
WidgetsBinding و
didChangeAppLifecycleState () .
معلومات اضافية:
يستخدم Flutter FlutterActivity في الكود الأصلي ، ويجعل محرك Flutter تغييرات في حالة المعالجة غير واضحة قدر الإمكان. ولكن إذا كنت لا تزال بحاجة إلى القيام ببعض الأعمال حسب الحالة ، فدورة الحياة تختلف قليلاً:
- غير نشط - هذه الطريقة موجودة فقط في نظام التشغيل iOS ، ولا يوجد في نظام أندرويد التناظرية ؛
- متوقف مؤقتًا - يشبه onPause () في Android ؛
- استئناف - على غرار onPostResume () في Android ؛
- تعليق - على غرار onStop في Android ، في نظام iOS لا يوجد نظير.
تم توضيح ذلك بمزيد من التفاصيل في
وثائق AppLifecycleStatus .
مثال:
import 'package:flutter/widgets.dart'; class LifecycleWatcher extends StatefulWidget { @override _LifecycleWatcherState createState() => _LifecycleWatcherState(); } class _LifecycleWatcherState extends State<LifecycleWatcher> with WidgetsBindingObserver { AppLifecycleState _lastLifecycleState; @override void initState() { super.initState(); WidgetsBinding.instance.addObserver(this); } @override void dispose() { WidgetsBinding.instance.removeObserver(this); super.dispose(); } @override void didChangeAppLifecycleState(AppLifecycleState state) { setState(() { _lastLifecycleState = state; }); } @override Widget build(BuildContext context) { if (_lastLifecycleState == null) return Text('This widget has not observed any lifecycle changes.', textDirection: TextDirection.ltr); return Text('The most recent lifecycle state this widget observed was: $_lastLifecycleState.', textDirection: TextDirection.ltr); } } void main() { runApp(Center(child: LifecycleWatcher())); }
تخطيطات
سؤال:
ما هو التناظرية
LinearLayout ؟
الجواب هو:
صف للأفقي ،
العمود الرأسي.
معلومات اضافية:
رفرفة للمطورين أندرويد: كيفية تصميم LinearLayout في رفرفة؟مثال:
@override Widget build(BuildContext context) { return Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text('Row One'), Text('Row Two'), Text('Row Three'), Text('Row Four'), ], ); } @override Widget build(BuildContext context) { return Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text('Column One'), Text('Column Two'), Text('Column Three'), Text('Column Four'), ], ); }
سؤال:
ما هو ما يعادل
RelativeLayout ؟
الجواب هو:
القطعة
المكدس .
مزيد من التفاصيل:
Stackoverflowسؤال:
ما هو التناظرية من
ScrollView ؟
الجواب هو:
ListView مع الحاجيات.
مثال:
@override Widget build(BuildContext context) { return ListView( children: <Widget>[ Text('Row One'), Text('Row Two'), Text('Row Three'), Text('Row Four'), ], ); }
سؤال:
كيفية التعامل مع التحولات بين صورة والمناظر الطبيعية؟
الجواب هو:
يتعامل FlutterView مع التقلبات إذا كان AndroidManifest.xml يحتوي على
android: configChanges = "direction | screenSize"
الإيماءات والتعامل مع الحدث اللمس
سؤال:
كيفية إضافة onClick المستمع لعنصر واجهة المستخدم في رفرفة؟
الجواب هو:
إذا كانت القطعة تدعم النقرات ، فحينها onPressed (). إن لم يكن ، ثم في onTap ().
مثال:
في onPressed ():
@override Widget build(BuildContext context) { return RaisedButton( onPressed: () { print("click"); }, child: Text("Button")); }
في onTap ():
class SampleApp extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Center( child: GestureDetector( child: FlutterLogo( size: 200.0, ), onTap: () { print("tap"); }, ), )); } }
سؤال:
كيفية التعامل مع الإيماءات الأخرى على الحاجيات؟
الجواب هو:
باستخدام
GestureDetector . يمكنهم التعامل مع الإجراءات التالية:
اضغط
انقر نقرا مزدوجا
الضغط لفترة طويلة
السحب الرأسي
السحب الأفقي
مثال:
معالجة onDoubleTap:
AnimationController controller; CurvedAnimation curve; @override void initState() { controller = AnimationController(duration: const Duration(milliseconds: 2000), vsync: this); curve = CurvedAnimation(parent: controller, curve: Curves.easeIn); } class SampleApp extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Center( child: GestureDetector( child: RotationTransition( turns: curve, child: FlutterLogo( size: 200.0, )), onDoubleTap: () { if (controller.isCompleted) { controller.reverse(); } else { controller.forward(); } }, ), )); } }
Listviews ومحولات
سؤال:
ما هو التناظرية من
ListView في رفرفة؟
الجواب هو:
ListViewالاختلافات:
لا يتعين على Flutter التفكير في تنظيف العناصر وإعادة استخدامها (وهو ما يفعله ListView / RecyclerView في Android ، باستخدام نمط ViewHolder).
مثال:
import 'package:flutter/material.dart'; void main() { runApp(SampleApp()); } class SampleApp extends StatelessWidget {
:
?
الجواب هو:
GestureDetector .
مثال:
import 'package:flutter/material.dart'; void main() { runApp(SampleApp()); } class SampleApp extends StatelessWidget {
:
ListView ?
الجواب هو:
,
setState() . ,
ListView.Builder ,
RecyclerView .
مثال:
setState() :
import 'package:flutter/material.dart'; void main() { runApp(SampleApp()); } class SampleApp extends StatelessWidget {
ListView.Builder :
import 'package:flutter/material.dart'; void main() { runApp(SampleApp()); } class SampleApp extends StatelessWidget {
:
?
الجواب هو:
( ) pubspec.yaml.
مثال:
fonts: - family: MyCustomFont fonts: - asset: fonts/MyCustomFont.ttf - style: italic
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Sample App"), ), body: Center( child: Text( 'This is a custom font text', style: TextStyle(fontFamily: 'MyCustomFont'), ), ), ); }
:
?
الجواب هو:
:
- color;
- decoration;
- decorationColor;
- decorationStyle;
- fontFamily;
- fontSize;
- fontStyle;
- fontWeight;
- hashCode;
- height;
- inherit;
- letterSpacing;
- textBaseline;
- wordSpacing.
:
Retrieve the value of a text field .
:
hint
TextInput ?
الجواب هو:
InputDecoration , .
مثال:
body: Center( child: TextField( decoration: InputDecoration(hintText: "This is a hint"), ) )
:
?
الجواب هو:
—
InputDecoration .
مثال:
import 'package:flutter/material.dart'; void main() { runApp(SampleApp()); } class SampleApp extends StatelessWidget {
Flutter
:
GPS?
الجواب هو:
geolocator .
:
?
الجواب هو:
image_picker .
:
Facebook?
الجواب هو:
flutter_facebook_login .
:
Firebase?
الجواب هو:
Firebase
Flutter first party plugins .
:
() ?
الجواب هو:
Flutter EventBus . :
developing packages and plugins .
:
NDK?
الجواب هو:
NDK- Flutter. Flutter .
Themes
:
(Theme) ?
الجواب هو:
MaterialApp WidgetApp .
مثال:
class SampleApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Sample App', theme: ThemeData( primarySwatch: Colors.blue, textSelectionColor: Colors.red ), home: SampleAppPage(), ); } }
:
Shared Preferences?
الجواب هو:
Shared_Preferences plugin ( NSUserDefaults iOS ).
مثال:
import 'package:flutter/material.dart'; import 'package:shared_preferences/shared_preferences.dart'; void main() { runApp( MaterialApp( home: Scaffold( body: Center( child: RaisedButton( onPressed: _incrementCounter, child: Text('Increment Counter'), ), ), ), ), ); } _incrementCounter() async { SharedPreferences prefs = await SharedPreferences.getInstance(); int counter = (prefs.getInt('counter') ?? 0) + 1; print('Pressed $counter times.'); prefs.setInt('counter', counter); }
:
SQLite Flutter?
الجواب هو:
SQFlite .
:
push-?
الجواب هو:
Firebase_Messaging .
استنتاج
. , , . « » . «-» . , ? 2016 Kotlin, - 2017. , , . , .
2016 Flutter Dart. , 2018 . . ! , , , . ( Google Fuchsia , , , Flutter ). — ! , — . هذا كل شيء بالنسبة لي. Google Play!