🗯️ 👳 🔂 [डॉक द्वारा] स्पंदन। भाग 1. Android डेवलपर्स के लिए 👩🏿‍✈️ 👨‍🔬 💻

स्पंदन ने पहले ही कई लेख लिखे हैं। हर महीने यह अधिक लोकप्रिय हो रहा है। इसलिए मैंने एक संक्षिप्त प्रश्नोत्तर प्रारूप में आधिकारिक स्पंदन दस्तावेज की व्याख्या करने का निर्णय लिया। मुझे लगता है कि मेरे जैसे कई लोगों के पास उस ढांचे के प्रलेखन के बारे में विस्तार से अध्ययन करने के लिए पर्याप्त खाली समय नहीं है, जिसके साथ वे अभी भी काम नहीं करते हैं।

यदि आप यह समझना चाहते हैं कि यह रूपरेखा किस लिए अच्छी है, और इसका उपयोग करने के लिए आपको कितना प्रयास करना है, इसका मूल्यांकन करना है, तो बिल्ली का स्वागत है।

सामग्री:

दृश्य

प्रश्न:

स्पंदन में दृश्य के समतुल्य क्या है?

उत्तर है:

विजेट

मतभेद:

देखें - वास्तव में, स्क्रीन पर क्या होगा। परिवर्तनों को प्रदर्शित करने के लिए अमान्य () कहा जाता है।

विजेट - स्क्रीन पर क्या होगा इसका विवरण। बदलाव के लिए नए सिरे से बनाया गया है।

अतिरिक्त जानकारी:

जब एंड्रॉइड पर ही लॉन्च किया जाता है, तो दृश्य विजेट के हुड के नीचे होता है। स्पंदन में सामग्री घटक पुस्तकालय शामिल है। इसमें सामग्री डिजाइन दिशानिर्देशों को लागू करने वाले विजेट शामिल हैं ।

प्रश्न:

विगेट्स के प्रदर्शन को कैसे अपडेट करें?

उत्तर है:

StatefulWidget और उसके राज्य का उपयोग करना। स्पंदन में 2 प्रकार के विजेट हैं: स्टेटलेसविडगेट और स्टेटफुलवेट । वे उसी तरह काम करते हैं, एकमात्र अंतर प्रतिपादन राज्य में है।

मतभेद:

स्टेटलेसविजेट में एक अपरिवर्तनीय स्थिति है। पाठ, लोगो आदि प्रदर्शित करने के लिए उपयुक्त है। यानी यदि स्क्रीन पर मौजूद तत्व पूरे डिस्प्ले टाइम के दौरान नहीं बदलना चाहिए, तो यह आपको सूट करता है। इसे स्टेटफुल विजेट के लिए कंटेनर के रूप में भी इस्तेमाल किया जा सकता है।

StatefulWidget में राज्य राज्य होता है, जो वर्तमान स्थिति के बारे में जानकारी संग्रहीत करता है। यदि आप कुछ कार्रवाई करते समय स्क्रीन पर एक तत्व को बदलना चाहते हैं (सर्वर से एक प्रतिक्रिया आई, तो उपयोगकर्ता ने एक बटन पर क्लिक किया, आदि) - यह आपका विकल्प है।

एक उदाहरण:

1) स्टेटलेसविजेट - टेक्स्ट

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

2) स्टेटफुलविडग - जब आप (फ्लोटिंगएशनबटन) बटन पर क्लिक करते हैं, तो टेक्स्ट विजेट में टेक्स्ट "I लाइक फ्लटर" से "फ्लटर बहुत बढ़िया है!" में बदल जाता है।

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

प्रश्न:

विगेट्स के साथ स्क्रीन को कैसे लेआउट करें? XML लेआउट फ़ाइल कहाँ है?

उत्तर है:

फ़्लटर में स्क्रीन के लिए कोई 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), ), ), ); }

स्पंदन में सभी डिफ़ॉल्ट विजेट विजेट कैटलॉग में देखे जा सकते हैं।

प्रश्न:

एप्लिकेशन चालू करते समय लेआउट में एक घटक कैसे जोड़ें या निकालें?

उत्तर है:

एक फ़ंक्शन के माध्यम से जो राज्य के आधार पर वांछित विजेट वापस कर देगा।

मतभेद:

Android पर, आप एक ViewGroup में AddView () या removeView () कर सकते हैं। स्पंदन में, आप नहीं कर सकते विगेट्स अपरिवर्तित हैं। केवल उनकी स्थिति बदल सकती है।

एक उदाहरण:

फ़्लोटिंगएशनबटन पर क्लिक करके टेक्स्ट को बटन में कैसे बदलें।

 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> { //     bool toggle = true; void _toggle() { setState(() { toggle = !toggle; }); } _getToggleChild() { if (toggle) { return Text('Toggle One'); } else { return MaterialButton(onPressed: () {}, child: Text('Toggle Two')); } } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Sample App"), ), body: Center( child: _getToggleChild(), ), floatingActionButton: FloatingActionButton( onPressed: _toggle, tooltip: 'Update Text', child: Icon(Icons.update), ), ); } }

प्रश्न:

विजेट्स को चेतन कैसे करें?

उत्तर है:

एनिमेशनकंट्रोलर वर्ग का उपयोग करना, जो एनिमेशन <टी> सार वर्ग का वंशज है। एनीमेशन शुरू करने के अलावा, वह इसे रोक सकता है, उल्टा कर सकता है, रोक सकता है और इसे विपरीत दिशा में खेल सकता है। टिकर के साथ काम करता है, जो एक स्क्रीन redraw रिपोर्ट करता है।

मतभेद:

Android पर, आप XML या चेतन दृश्य में चेतन () का उपयोग करके एनिमेशन बना सकते हैं। स्पंदन में, एनीमेशन को एनीमेशनकंट्रोलर का उपयोग करके कोड में लिखा जाना चाहिए।

अतिरिक्त जानकारी:

आप एनीमेशन और मोशन विजेट , एनिमेशन ट्यूटोरियल और एनिमेशन अवलोकन में अधिक जान सकते हैं।

एक उदाहरण:

फ़्लटर लोगो का फीका एनीमेशन।

 import 'package:flutter/material.dart'; void main() { runApp(FadeAppTest()); } class FadeAppTest extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Fade Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyFadeTest(title: 'Fade Demo'), ); } } class MyFadeTest extends StatefulWidget { MyFadeTest({Key key, this.title}) : super(key: key); final String title; @override _MyFadeTest createState() => _MyFadeTest(); } class _MyFadeTest extends State<MyFadeTest> with TickerProviderStateMixin { AnimationController controller; CurvedAnimation curve; @override void initState() { super.initState(); controller = AnimationController(duration: const Duration(milliseconds: 2000), vsync: this); curve = CurvedAnimation(parent: controller, curve: Curves.easeIn); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Container( child: FadeTransition( opacity: curve, child: FlutterLogo( size: 100.0, )))), floatingActionButton: FloatingActionButton( tooltip: 'Fade', child: Icon(Icons.brush), onPressed: () { controller.forward(); }, ), ); } }

प्रश्न:

कैनवास का उपयोग कैसे करें?

उत्तर है:

एंड्रॉइड और स्पंदन में कैनवस के लिए समान एपीआई है, जैसा कि वे समान स्तर के स्किआ इंजन का उपयोग करते हैं।

मतभेद:

नहीं।

अतिरिक्त जानकारी:

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

प्रश्न:

कस्टम विजेट कैसे बनाएं?

उत्तर है:

विजेट को एक के अंदर (विरासत के बजाय) लिखें।

मतभेद:

एंड्रॉइड में, हम उस दृश्य से वारिस कर सकते हैं जिसे हम रुचि रखते हैं और अपना तर्क जोड़ते हैं। स्पंदन में, यह एक व्यूग्रुप के समान है, केवल विजेट हमेशा स्टेटलेसविजेट या स्टेटफुलवेट से विरासत में मिला है। यानी आपको एक नया विजेट बनाने और इसे विजेट्स के सेट का उपयोग करने की आवश्यकता है जो आपको पैरामीटर या फ़ील्ड के रूप में चाहिए।

एक उदाहरण:

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

इंटेंट

प्रश्न:

स्पंदन में आशय का एनालॉग क्या है?

उत्तर है:

वह वहां नहीं है। स्क्रीन के बीच नेविगेट करने से नेविगेटर और रूट कक्षाओं का उपयोग होता है।

बाहरी घटकों (उदाहरण के लिए, एक कैमरा या फ़ाइल पिकर) के साथ बातचीत करने के लिए, आप प्रत्येक मंच पर प्लगइन्स या देशी एकीकरण का उपयोग कर सकते हैं। देशी एकीकरण के बारे में अधिक जानें: संकुल और प्लगइन्स का विकास करना ।

मतभेद:

स्पंदन में एक्टिविटी और फ्रैगमेंट जैसी कोई चीज नहीं है। इसमें नेविगेटर (नेविगेटर) और रूट (रूट) हैं। स्पंदन अनुप्रयोग एक एकल-गतिविधि अनुप्रयोग जैसा दिखता है, जहाँ विभिन्न स्क्रीन अलग-अलग अंशों का प्रतिनिधित्व करते हैं, और फ्रैगमेंटमैन उन्हें नियंत्रित करता है। नेविगेटर सिद्धांत में FragmentManager के समान है। यह आपके द्वारा निर्दिष्ट मार्ग पर पुश () या पॉप () कर सकता है। रूट एक तरह का फ्रैगमेंट है, लेकिन फ़्लटर में इसे स्क्रीन या पेज से तुलना करने का रिवाज़ है।

Android में, हम उन सभी गतिविधियों का वर्णन करते हैं जिनके बीच हम AndroidManifest.xml में नेविगेट कर सकते हैं।

स्पंदन के दो तरीके हैं:

मार्ग (MaterialApp) नामक मानचित्र का वर्णन करें
रूट (WidgetApp) पर सीधे नेविगेट करें।

एक उदाहरण:

 void main() { runApp(MaterialApp( 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');

प्रश्न:

अन्य एप्लिकेशन से आने वाले इंटेंट्स को कैसे प्रोसेस करें?

उत्तर है:

MethodChannel के माध्यम से एप्लिकेशन की Android परत के साथ सहभागिता।

एक उदाहरण:

हम 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>

हम मंशा में इरादे को संसाधित करते हैं और कोड को फ़्लटर से 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); // Handle text being sent } } new MethodChannel(getFlutterView(), "app.channel.shared.data").setMethodCallHandler( new MethodCallHandler() { @Override public void onMethodCall(MethodCall call, MethodChannel.Result result) { if (call.method.contentEquals("getSharedText")) { result.success(sharedText); sharedText = null; } } }); } void handleSendText(Intent intent) { sharedText = intent.getStringExtra(Intent.EXTRA_TEXT); } }

हम डेटा का अनुरोध करते हैं जब विजेट तैयार किया जाना शुरू होता है:

 import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; void main() { runApp(SampleApp()); } class SampleApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Sample Shared App Handler', 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> { static const platform = const MethodChannel('app.channel.shared.data'); String dataShared = "No data"; @override void initState() { super.initState(); getSharedText(); } @override Widget build(BuildContext context) { return Scaffold(body: Center(child: Text(dataShared))); } getSharedText() async { var sharedData = await platform.invokeMethod("getSharedText"); if (sharedData != null) { setState(() { dataShared = sharedData; }); } } }

प्रश्न:

StartActivityForResult () का एनालॉग क्या है?

उत्तर है:

प्रतीक्षित कीवर्ड और भविष्य वर्ग का परिणाम है।

मतभेद:

Android में startActivityForResult () को कॉल करने के बाद, हमें onActivityResult () में प्रसंस्करण को लागू करने की आवश्यकता है। स्पंदन को कुछ भी लागू करने की आवश्यकता नहीं है, क्योंकि नेविगेटर विधि पुश () फ्यूचर ऑब्जेक्ट लौटाता है।

एक उदाहरण:

 Map coordinates = await Navigator.of(context).pushNamed('/location');

और जब हमें '/' स्थान स्क्रीन पर निर्देशांक मिला, तो पॉप करें ():

 Navigator.of(context).pop({"lat":43.821757,"long":-79.226392});

एसिंक्स यूआई

प्रश्न:

फ़्लटर में runOnUiThread () का एनालॉग क्या है?

उत्तर है:

डार्ट आइसोलेट्स पर चलने वाले एकल-थ्रेडेड निष्पादन मॉडल को लागू करता है। एसिंक्रोनस निष्पादन के लिए एसिंक्स / वेट का उपयोग किया जाता है, जिसे आप C #, जावास्क्रिप्ट, या कोटलिन कोरटाइन से परिचित हो सकते हैं।

एक उदाहरण:

अनुरोध को पूरा करने और UI को अपडेट करने के लिए परिणाम वापस करना:

 loadData() async { String dataURL = "https://jsonplaceholder.typicode.com/posts"; http.Response response = await http.get(dataURL); setState(() { widgets = json.decode(response.body); }); }

जब अनुरोध की प्रतिक्रिया प्राप्त होती है, तो आपको नए डेटा के साथ विजेट ट्री को फिर से शुरू करने के लिए सेटस्टेट () विधि को कॉल करना होगा ।

एक उदाहरण:

सूची में डेटा लोड करना और अपडेट करना:

 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 () लागू करने की आवश्यकता है। स्पंदन "आउट ऑफ द बॉक्स" में आपको बस एसिंक्स / वेट का उपयोग करने की आवश्यकता है, डार्ट बाकी का ध्यान रखेगा।

एक उदाहरण:

यहाँ dataLoader () विधि अलग-थलग है। अलगाव में, आप भारी ऑपरेशन चला सकते हैं जैसे कि बड़े JSONs, एन्क्रिप्शन, इमेज प्रोसेसिंग आदि को पार्स करना।

 loadData() async { ReceivePort receivePort = ReceivePort(); await Isolate.spawn(dataLoader, receivePort.sendPort); // The 'echo' isolate sends its SendPort as the first message SendPort sendPort = await receivePort.first; List msg = await sendReceive(sendPort, "https://jsonplaceholder.typicode.com/posts"); setState(() { widgets = msg; }); } // The entry point for the isolate static dataLoader(SendPort sendPort) async { // Open the ReceivePort for incoming messages. ReceivePort port = ReceivePort(); // Notify any other isolates what port this isolate listens to. sendPort.send(port.sendPort); await for (var msg in port) { String data = msg[0]; SendPort replyTo = msg[1]; String dataURL = data; http.Response response = await http.get(dataURL); // Lots of JSON to parse replyTo.send(json.decode(response.body)); } } Future sendReceive(SendPort port, msg) { ReceivePort response = ReceivePort(); port.send([msg, response.sendPort]); return response.first; }   : import 'dart:convert'; import 'package:flutter/material.dart'; import 'package:http/http.dart' as http; import 'dart:async'; import 'dart:isolate'; 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() { if (widgets.length == 0) { return true; } return false; } 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 { ReceivePort receivePort = ReceivePort(); await Isolate.spawn(dataLoader, receivePort.sendPort); // The 'echo' isolate sends its SendPort as the first message SendPort sendPort = await receivePort.first; List msg = await sendReceive(sendPort, "https://jsonplaceholder.typicode.com/posts"); setState(() { widgets = msg; }); } // the entry point for the isolate static dataLoader(SendPort sendPort) async { // Open the ReceivePort for incoming messages. ReceivePort port = ReceivePort(); // Notify any other isolates what port this isolate listens to. sendPort.send(port.sendPort); await for (var msg in port) { String data = msg[0]; SendPort replyTo = msg[1]; String dataURL = data; http.Response response = await http.get(dataURL); // Lots of JSON to parse replyTo.send(json.decode(response.body)); } } Future sendReceive(SendPort port, msg) { ReceivePort response = ReceivePort(); port.send([msg, response.sendPort]); return response.first; } }

प्रश्न:

OkHttp का स्पंदन समतुल्य है?

उत्तर है:

स्पंदन का अपना HTTP पैकेज है ।

अतिरिक्त जानकारी:

अब तक, HTTP पैकेज में सभी OkHttp सुविधाओं को लागू नहीं किया गया है, इसलिए कई अनुपलब्ध विशेषताएं सार हैं और आप उन्हें आवश्यकतानुसार स्वयं कार्यान्वित कर सकते हैं।

एक उदाहरण:

HTTP पैकेज का उपयोग करने के लिए, इसे pubspec.yaml में निर्भरता के रूप में जोड़ें:

 dependencies: ... http: ^0.11.3+16

अनुरोध को निष्पादित करने के लिए, async फ़ंक्शन में कॉल का इंतजार करें 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); }); } }

परियोजना संरचना और संसाधन

प्रश्न:

विभिन्न प्रस्तावों के संसाधनों को कहाँ संग्रहीत करें?

उत्तर है:

संपत्ति में।

मतभेद:

एंड्रॉइड में, संसाधनों में एक रिस फ़ोल्डर होता है और संपत्ति होती है। स्पंदन में केवल संपत्ति होती है। संपत्ति फ़ोल्डर को परियोजना में कहीं भी स्थित किया जा सकता है, सबसे महत्वपूर्ण बात यह है कि pubspec.yaml फ़ाइल में इसे पथ लिखें।

अतिरिक्त जानकारी:

एंड्रॉइड और स्पंदन में ग्राफिक संसाधनों के आकार की तुलना।

Android घनत्व क्वालीफायर	स्पंदन पिक्सेल अनुपात
ldpi	0.75x
mdpi	1.0x
hdpi	1.5x
xhdpi	2.0x
xxhdpi	3.0x
xxxhdpi	4.0x

स्पंदन कोड में संसाधनों का उपयोग करने के लिए एसेट के साथ शुरू होने वाले एसेटमैनगर या विशेष वर्गों का उपयोग करता है।

एक उदाहरण:

AssetManager:

 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)

प्रश्न:

ग्रेड फ़ाइल का एनालॉग क्या है निर्भरता कैसे जोड़ें?

उत्तर है:

pubspec.yaml।

अतिरिक्त जानकारी:

स्पंदन देशी Android और iOS बिल्डरों के लिए विधानसभा को दर्शाता है। पब में फ़्लटर के लिए सभी लोकप्रिय पुस्तकालयों की सूची देखें।

क्रियाएँ और टुकड़े

प्रश्न:

स्पंदन में गतिविधि और फ्रैगमेंट के बराबर क्या है?

उत्तर है:

स्पंदन में सब कुछ विगेट्स है। UI के साथ काम करने के लिए गतिविधि और टुकड़े की भूमिका विगेट्स द्वारा निभाई जाती है। और नेविगेशन की भूमिका, जैसा कि नेविगेशन में पैराग्राफ में उल्लिखित है, नेविगेटर और रूट है।

अतिरिक्त जानकारी:

एंड्रॉइड डेवलपर्स के लिए फ़्लटर: फ़्लटर में एक गतिविधि यूआई कैसे डिज़ाइन करें ।

प्रश्न:

जीवन चक्र की घटनाओं को कैसे संभालें?

उत्तर है:

WidgetsBinding और didChangeAppLifecycleState () विधि का उपयोग करना।

अतिरिक्त जानकारी:

स्पंदन मूल कोड में FlutterActivity का उपयोग करता है, और स्पंदन इंजन प्रसंस्करण स्थिति को यथासंभव असंगत बनाता है। लेकिन अगर आपको अभी भी राज्य के आधार पर कुछ काम करने की आवश्यकता है, तो जीवन चक्र थोड़ा अलग है:

निष्क्रिय - यह विधि केवल iOS में है, एंड्रॉइड में कोई एनालॉग नहीं है;
रोका गया - Android में onPause () के समान;
फिर से शुरू - Android में onPostResume () के समान;
निलंबित - Android में onStop के समान, 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 का एनालॉग क्या है?

उत्तर है:

क्षैतिज के लिए पंक्ति , ऊर्ध्वाधर के लिए कॉलम ।

अतिरिक्त जानकारी:

एंड्रॉइड डेवलपर्स के लिए फ़्लटर: फ़्लटर में लिनेरलॉयआउट कैसे डिज़ाइन करें?

एक उदाहरण:

 @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

प्रश्न:

स्क्रॉलव्यू का एनालॉग क्या है?

उत्तर है:

विजेट्स के साथ देखें।

एक उदाहरण:

 @override Widget build(BuildContext context) { return ListView( children: <Widget>[ Text('Row One'), Text('Row Two'), Text('Row Three'), Text('Row Four'), ], ); }

प्रश्न:

पोर्ट्रेट और लैंडस्केप के बीच बदलाव को कैसे संभालें?

उत्तर है:

AndroidManifest.xml में फ़्लटर व्यू फ़्लिप हो जाता है
Android: configChanges = "अभिविन्यास | स्क्रीनाइज़ करें"

इशारों और टच इवेंट हैंडलिंग

प्रश्न:

Flutter में विजेट के लिए onClick श्रोता कैसे जोड़ें?

उत्तर है:

यदि विजेट क्लिक का समर्थन करता है, तो ऑनप्रेस्ड () में। यदि नहीं, तो onTap () में।

एक उदाहरण:

OnPressed () में:

 @override Widget build(BuildContext context) { return RaisedButton( onPressed: () { print("click"); }, child: Text("Button")); }

ऑनटैप () में:

 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

लंबी प्रेस

onLongPress

लंबवत खींचें

क्षैतिज खींचें

एक उदाहरण:

प्रसंस्करण डबलडैप:

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

सूची और एडेप्टर

प्रश्न:

स्पंदन में ListView का एनालॉग क्या है?

उत्तर है:

ListView ।

मतभेद:

स्पंदन को आइटम को साफ करने और पुन: उपयोग करने के बारे में सोचने की ज़रूरत नहीं है (जो ViewHolder पैटर्न का उपयोग करके Android में ListView / RecyclerView करता है)।

एक उदाहरण:

 import 'package:flutter/material.dart'; void main() { runApp(SampleApp()); } class SampleApp extends StatelessWidget { // This widget is the root of your application. @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> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Sample App"), ), body: ListView(children: _getListData()), ); } _getListData() { List<Widget> widgets = []; for (int i = 0; i < 100; i++) { widgets.add(Padding(padding: EdgeInsets.all(10.0), child: Text("Row $i"))); } return widgets; } }

प्रश्न:

कैसे पता करें कि किस तत्व पर क्लिक किया गया था?

उत्तर है:

एक GestureDetector में एक आइटम लपेटना ।

एक उदाहरण:

 import 'package:flutter/material.dart'; void main() { runApp(SampleApp()); } class SampleApp extends StatelessWidget { // This widget is the root of your application. @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> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Sample App"), ), body: ListView(children: _getListData()), ); } _getListData() { List<Widget> widgets = []; for (int i = 0; i < 100; i++) { widgets.add(GestureDetector( child: Padding( padding: EdgeInsets.all(10.0), child: Text("Row $i")), onTap: () { print('row tapped'); }, )); } return widgets; } }

प्रश्न:

लिस्ट व्यू को गतिशील रूप से कैसे अपडेट करें ?

उत्तर है:

यदि आपके पास एक छोटा डेटा सेट है, तो यह setState () के माध्यम से किया जा सकता है । यदि डेटा सेट बड़ा है, तो ListView.Builder के माध्यम से , जो RecyclerView का एक एनालॉग है ।

एक उदाहरण:

SetState का उपयोग कर () :

 import 'package:flutter/material.dart'; void main() { runApp(SampleApp()); } class SampleApp extends StatelessWidget { // This widget is the root of your application. @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 = <Widget>[]; @override void initState() { super.initState(); for (int i = 0; i < 100; i++) { widgets.add(getRow(i)); } } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Sample App"), ), body: ListView(children: widgets), ); } Widget getRow(int i) { return GestureDetector( child: Padding( padding: EdgeInsets.all(10.0), child: Text("Row $i")), onTap: () { setState(() { widgets = List.from(widgets); widgets.add(getRow(widgets.length + 1)); print('row $i'); }); }, ); } }

ListView.Builder का उपयोग करना :

 import 'package:flutter/material.dart'; void main() { runApp(SampleApp()); } class SampleApp extends StatelessWidget { // This widget is the root of your application. @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 = <Widget>[]; @override void initState() { super.initState(); for (int i = 0; i < 100; i++) { widgets.add(getRow(i)); } } @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 GestureDetector( child: Padding( padding: EdgeInsets.all(10.0), child: Text("Row $i")), onTap: () { setState(() { widgets.add(getRow(widgets.length + 1)); print('row $i'); }); }, ); } }

पाठ के साथ काम करें

प्रश्न:

कस्टम फोंट का उपयोग कैसे करें?

उत्तर है:

आपको बस फॉन्ट फाइल को फोल्डर में रखने की जरूरत है (खुद के नाम पर सोचें) और 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'), ), ), ); }

प्रश्न:

टेक्स्ट विजेट कैसे स्टाइल करें?

उत्तर है:

मापदंडों का उपयोग:

रंग;
सजावट;
decorationColor;
decorationStyle;
FontFamily;
fONTSIZE;
fontStyle;
fontWeight;
hashCode;
ऊंचाई;
वारिस;
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 { // This widget is the root of your application. @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 _errorText; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Sample App"), ), body: Center( child: TextField( onSubmitted: (String text) { setState(() { if (!isEmail(text)) { _errorText = 'Error: This is not an email'; } else { _errorText = null; } }); }, decoration: InputDecoration(hintText: "This is a hint", errorText: _getErrorText()), ), ), ); } _getErrorText() { return _errorText; } bool isEmail(String em) { String emailRegexp = r'^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$'; RegExp regExp = RegExp(emailRegexp); return regExp.hasMatch(em); } }

Flutter

:

GPS?

उत्तर है:

geolocator .

:

उत्तर है:

image_picker .

:

Facebook?

उत्तर है:

flutter_facebook_login .

:

Firebase?

उत्तर है:

Firebase Flutter first party plugins .

firebase_admob Firebase AdMob.
firebase_analytics Firebase Analytics.
firebase_auth Firebase Auth.
firebase_database Firebase RTDB.
firebase_storage Firebase Cloud Storage.
firebase_messaging Firebase Messaging (FCM).
flutter_firebase_ui Firebase Auth (Facebook, Google, Twitter and e-mail).
cloud_firestore Firebase Cloud Firestore.

:

() ?

उत्तर है:

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!