🙈 👦 📍 [डॉक द्वारा] स्पंदन। भाग 2. आईओएस डेवलपर्स के लिए 🛄 🚔 🏥

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

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

स्पंदन। भाग 1. Android डेवलपर्स के लिए
स्पंदन। भाग 2. आईओएस डेवलपर्स के लिए
स्पंदन। भाग 3. रिएक्टिव नेटिव डेवलपर्स के लिए
स्पंदन। भाग 4. वेब डेवलपर्स के लिए
स्पंदन। भाग 5. ज़ामरीन के लिए

सामग्री:

दृश्य

प्रश्न:

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

उत्तर है:

विजेट

मतभेद:

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

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

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

स्पंदन में क्यूपर्टिनो विजेट लाइब्रेरी शामिल है। इसमें वे विजेट्स हैं जो Apple Design दिशानिर्देशों को लागू करते हैं ।

प्रश्न:

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

उत्तर है:

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

मतभेद:

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

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

एक उदाहरण:

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

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

2) StatefulWidget - जब आप (FloatingActionButton) बटन पर क्लिक करते हैं, तो टेक्स्ट विजेट में टेक्स्ट 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), ), ); } }

प्रश्न:

विगेट्स के साथ स्क्रीन को कैसे लेआउट करें? स्टोरीबोर्ड कहां है?

उत्तर है:

स्पंदन में कोई स्टोरीबोर्ड नहीं है। विजेट ट्री में सब कुछ सीधे कोड में टाइप करता है।

एक उदाहरण:

 @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Sample App"), ), body: Center( child: CupertinoButton( onPressed: () { setState(() { _pressedCount += 1; }); }, child: Text('Hello'), padding: EdgeInsets.only(left: 10.0, right: 10.0), ), ), ); }

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

प्रश्न:

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

उत्तर है:

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

मतभेद:

IOS पर, आप addSubview () या removeFromSuperview () कर सकते हैं। स्पंदन में, आप नहीं कर सकते विगेट्स अपरिवर्तित हैं। केवल उनकी स्थिति बदल सकती है।

एक उदाहरण:

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

 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> { // Default value for toggle bool toggle = true; void _toggle() { setState(() { toggle = !toggle; }); } _getToggleChild() { if (toggle) { return Text('Toggle One'); } else { return CupertinoButton( 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 रिपोर्ट करता है।

मतभेद:

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

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

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

एक उदाहरण:

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

 class SampleApp 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() { 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(); }, ), ); } @override dispose() { controller.dispose(); super.dispose(); } }

प्रश्न:

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

उत्तर है:

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

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

फ़्लटर में कैनवस पर ड्राइंग के लिए दो वर्ग हैं: कस्टमपेंट और कस्टमपैन्टर । दूसरा आपके रेंडरिंग एल्गोरिथ्म को लागू करता है।

यहाँ और अधिक पढ़ें: StackOverflow

एक उदाहरण:

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

प्रश्न:

विगेट्स की पारदर्शिता कैसे बदलें?

उत्तर है:

अपारदर्शिता विजेट में लपेटें।

मतभेद:

IOS पर, सभी दृश्यों में .opacity या .alpha है। स्पंदन में, यह विकल्प आवरण विजेट को प्रतिस्थापित करता है।

प्रश्न:

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

उत्तर है:

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

मतभेद:

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

एक उदाहरण:

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

नेविगेशन

प्रश्न:

फ़्लटर में स्क्रीन के बीच नेविगेशन कैसे लागू करें?

उत्तर है:

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

मतभेद:

स्पंदन में UIViewController और UINavigationController जैसी कोई अवधारणा नहीं है। इसमें नेविगेटर (नेविगेटर) और रूट (रूट) हैं। नेविगेटर सिद्धांत में UINavigationController के समान है। यह आपके द्वारा निर्दिष्ट मार्ग पर पुश () या पॉप () कर सकता है। रूट एक प्रकार का UIViewController है, लेकिन फ़्लटर में इसे स्क्रीन या पृष्ठ के साथ तुलना करने के लिए प्रथागत है।

स्पंदन के दो नेविगेशन तरीके हैं:

मार्ग नामों के साथ एक मानचित्र का वर्णन करें
सीधे रूट पर नेविगेट करें।

एक उदाहरण:

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

प्रश्न:

तृतीय-पक्ष एप्लिकेशन पर नेविगेट कैसे करें?

उत्तर है:

या तो MethodChannel के माध्यम से एप्लिकेशन के iOS लेयर के साथ इंटरैक्ट कर रहा है, या URL लॉन्चर प्लगइन का उपयोग कर रहा है।

प्रश्न:

IOS ViewController में पॉप वापस कैसे करें?

उत्तर है:

SystemNavigator.pop () पर कॉल करके।

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

Dart कोड से SystemNavigator.pop () iOS में निम्नलिखित कोड कहता है:

 UIViewController* viewController = [UIApplication sharedApplication].keyWindow.rootViewController; if ([viewController isKindOfClass:[UINavigationController class]]) { [((UINavigationController*)viewController) popViewControllerAnimated:NO]; }

यदि यह वह नहीं है जिसकी आपको आवश्यकता है, तो आप MethodChannel के माध्यम से अपना कार्यान्वयन कर सकते हैं।

थ्रेडिंग और अतुल्यकालिकता

प्रश्न:

स्पंदन में अतुल्यकालिक कोड कैसे लिखें?

उत्तर है:

डार्ट आइसोलेट्स पर चलने वाले एकल-थ्रेडेड निष्पादन मॉडल को लागू करता है। एसिंक्रोनस निष्पादन के लिए एसिंक्स / वेट का उपयोग किया जाता है, जिसे आप 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); }); } }

प्रश्न:

बैकग्राउंड थ्रेड में कोड को कैसे निष्पादित करें?

उत्तर है:

जैसा कि ऊपर उल्लेख किया गया है - एसिंक्स / वेट और आइसोलेशन (आइसोलेट) का उपयोग करना।

मतभेद:

IOS पर बॉक्स से बाहर, आप विधियों के संभावित पुन: निर्धारण के साथ ऑपरेशन का उपयोग कर सकते हैं। स्पंदन "आउट ऑफ द बॉक्स" में आपको बस एसिंक्स / वेट का उपयोग करने की आवश्यकता है, डार्ट बाकी का ध्यान रखेगा।

एक उदाहरण:

यहाँ 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; } }

प्रश्न:

स्पंदन में नेटवर्क अनुरोध कैसे करें?

उत्तर है:

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

एक उदाहरण:

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

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

प्रश्न:

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

उत्तर है:

संपत्ति में।

मतभेद:

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

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

आईओएस और फ्लटर में ग्राफिक संसाधनों के आकार समान हैं और घनत्व-आधारित प्रारूप का पालन करते हैं।

संसाधन स्थान:

 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.png

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)

प्रश्न:

CocoaPods के लिए समकक्ष क्या है? निर्भरता कैसे जोड़ें?

उत्तर है:

pubspec.yaml।

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

स्पंदन निर्माण को देशी एंड्रॉइड और आईओएस बिल्डरों को सौंपता है। पब में फ़्लटर के लिए सभी लोकप्रिय पुस्तकालयों की सूची देखें।

ViewControllers

प्रश्न:

स्पंदन में ViewController के बराबर क्या है?

उत्तर है:

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

प्रश्न:

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

उत्तर है:

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

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

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

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

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

लेआउट

प्रश्न:

UITableView और UICollectionView के बराबर क्या है?

उत्तर है:

ListView ।

एक उदाहरण:

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

प्रश्न:

मुझे कैसे पता चलेगा कि किस सूची आइटम पर क्लिक किया गया था?

उत्तर है:

विजेट, जो सूची का एक तत्व है, उस पर क्लिक को संभालना चाहिए।

मतभेद:

IOS में, अलग-अलग तालिका दृश्य: didSelectRowAtIndexPath: विधि इसके लिए जिम्मेदार है। स्पंदन में, सूची आइटम को एक विजेट में लपेटा जाना चाहिए जो क्लिक को संभालता है, जैसे कि GestureDetector ।

प्रश्न:

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

उत्तर है:

डेटा सूची को ताज़ा करें और setState () को कॉल करें।

मतभेद:

IOS पर, आपको डेटा को अपडेट करने और पुनः लोड करने की विधि को कॉल करने की आवश्यकता है। फ़्लटर में, 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 = []; @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 = []; @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'); }); }, ); } }

प्रश्न:

UIScrollView के समतुल्य क्या है?

उत्तर है:

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

एक उदाहरण:

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

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

अधिक जानकारी यहाँ ।

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

प्रश्न:

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

आवेदन स्टाइल

प्रश्न:

ऐप में थीम (थीम) का उपयोग कैसे करें?

उत्तर है:

आवेदन में रूट के रूप में MaterialApp विजेट या विजेट का उपयोग करना।

एक उदाहरण:

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

प्रश्न:

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

उत्तर है:

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

इनपुट फॉर्म

प्रश्न:

उपयोगकर्ता इनपुट परिणाम कैसे प्राप्त करें?

उत्तर है:

TextEditingController का उपयोग करना।

एक उदाहरण:

 class _MyFormState extends State<MyForm> { // Create a text controller and use it to retrieve the current value. // of the TextField! final myController = TextEditingController(); @override void dispose() { // Clean up the controller when disposing of the Widget. myController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Retrieve Text Input'), ), body: Padding( padding: const EdgeInsets.all(16.0), child: TextField( controller: myController, ), ), floatingActionButton: FloatingActionButton( // When the user presses the button, show an alert dialog with the // text the user has typed into our text field. onPressed: () { return showDialog( context: context, builder: (context) { return AlertDialog( // Retrieve the text the user has typed in using our // TextEditingController content: Text(myController.text), ); }, ); }, tooltip: 'Show me the value!', child: Icon(Icons.text_fields), ), ); } }

: Retrieve the value of a text field .

:

hint TextInput ?

:

InputDecoration , .

एक उदाहरण:

 body: Center( child: TextField( decoration: InputDecoration(hintText: "This is a hint"), ), )

:

— InputDecoration .

एक उदाहरण:

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

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 .

:

UserDefault?

:

Shared_Preferences plugin ( Shared Preferences Android ).

एक उदाहरण:

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

:

Core Data ?

:

SQFlite .

:

push-?

:

Firebase_Messaging .

निष्कर्ष

. , , . « » . «-» . , ? 2016 Kotlin, - 2017. , , . , .
2016 Flutter Dart. , 2018 . . ! , , , . ( Google Fuchsia , , , Flutter ). — ! , — . . Apple Store!