हम एक प्रश्न-उत्तर प्रारूप में
आधिकारिक स्पंदन प्रलेखन की लैकोनिक व्याख्या जारी रखते हैं। यह तीसरा भाग है, और यह रिएक्टिव नेटिव डेवलपर्स के लिए अधिक उपयोगी होगा। इस व्याख्या में, आप अक्सर पूछे जाने वाले प्रश्नों के उत्तर पा सकते हैं, साथ ही अपने लिए निर्धारित कर सकते हैं कि एक क्रॉस-प्लेटफॉर्म फ्रेमवर्क से दूसरे में स्विच करने के लिए आपको कितना प्रयास करने की आवश्यकता है।
यदि यह जानकारी पर्याप्त नहीं है या आपके पास एक विशिष्ट मंच के लिए देशी विकास का अनुभव है, तो मैं अन्य भागों में देखने की सलाह देता हूं:
स्पंदन। भाग 1. Android डेवलपर्स के लिएस्पंदन। भाग 2. आईओएस डेवलपर्स के लिएस्पंदन। भाग 3. रिएक्टिव नेटिव डेवलपर्स के लिएस्पंदन। भाग 4. वेब डेवलपर्स के लिए
स्पंदन। भाग 5. ज़ामरीन के लिए
सामग्री:
- डार्ट के बारे में थोड़ा
- मूल बातें
- परियोजना संरचना और संसाधन
- दृश्य
- लेआउट
- stylization
- राज्य प्रबंधन
- स्थानीय भंडारण
- नेविगेशन
- इशारों और टच इवेंट हैंडलिंग
- HTTP अनुरोध
- इनपुट फॉर्म
- प्लेटफ़ॉर्म-विशिष्ट कोड
- डिबगिंग
- एनीमेशन
- घटक समकक्ष
- स्पंदन प्लगइन्स
डार्ट के बारे में थोड़ा
प्रश्न:
प्रवेश बिंदु कहां है?
उत्तर है:
समारोह
main() ।
मतभेद:
जावास्क्रिप्ट में एक पूर्वनिर्धारित प्रवेश बिंदु नहीं है, यह डेवलपर द्वारा परिभाषित कोई भी कार्य हो सकता है। डार्ट में, यह केवल
main() ।
प्रश्न:
कंसोल में आउटपुट कैसे करें?
उत्तर है:
print() फ़ंक्शन का उपयोग करना।
मतभेद:
जावास्क्रिप्ट में, कंसोल आउटपुट
console.log() का उपयोग करके किया जाता है।
एक उदाहरण:
print('Hello world!');
प्रश्न:
चर / फ़ील्ड कैसे बनाएं और असाइन करें?
उत्तर है:
डार्ट गतिशील और मजबूत टाइपिंग दोनों का समर्थन करता है। इसलिए, चर / क्षेत्र किसी भी प्रकार के टाइपिंग में बनाए जा सकते हैं जो आपके लिए सुविधाजनक है। असाइनमेंट सिंगल = के माध्यम से होता है।
मतभेद:
जावास्क्रिप्ट में मजबूत टाइपिंग समर्थित नहीं है।
अतिरिक्त जानकारी:
अधिक जानकारी यहाँ।एक उदाहरण:
String name = 'dart';
प्रश्न:
चर / क्षेत्र का डिफ़ॉल्ट मान क्या है?
उत्तर है:
nullमतभेद:
जावास्क्रिप्ट डिफ़ॉल्ट रूप से
undefined है।
अतिरिक्त जानकारी:
अधिक जानकारी यहाँ।प्रश्न:
null या 0 के लिए मान कैसे जांचें?
उत्तर है:
स्पष्ट सत्यापन का उपयोग करना
== ।
मतभेद:
जावास्क्रिप्ट में,
if जाँच के भाग के रूप में, संख्या 1 या कोई
non-null वस्तु
true बराबर होगी। डार्ट में,
true केवल एक बूलियन मूल्य
true बराबर
true ।
एक उदाहरण:
var myNull = null; if (myNull == null) { print('use "== null" to check null'); } var zero = 0; if (zero == 0) { print('use "== 0" to check zero'); }
प्रश्न:
कार्यों की घोषणा कैसे करें?
उत्तर है:
डार्ट में, फ़ील्ड्स की तरह फ़ंक्शंस, रिटर्न वैल्यू के डायनेमिक या मजबूत टाइपिंग के साथ हो सकते हैं। डायनामिक रूप से टाइप किए गए केवल फ़ंक्शन नाम और वैकल्पिक रूप से मापदंडों द्वारा घोषित किए जाते हैं, जबकि शुरुआत में दृढ़ता से टाइप किए गए लोगों के पास अभी भी एक वापसी प्रकार है।
मतभेद:
जावास्क्रिप्ट में, एक फ़ंक्शन को कीवर्ड
function साथ घोषित किया जाता है, उसके बाद एक नाम और वैकल्पिक रूप से पैरामीटर।
अतिरिक्त जानकारी:
अधिक जानकारी यहाँ।एक उदाहरण:
fn() { return true; }
प्रश्न:
वचन के समतुल्य क्या है?
उत्तर है:
भविष्यअतिरिक्त जानकारी:
डार्ट, जावास्क्रिप्ट की तरह, एकल-थ्रेडेड निष्पादन का समर्थन करता है। डार्ट में
भविष्य का वही अर्थ है जो
प्रॉमिस इन रिएक्टिव नेटिव है।
अधिक जानकारी यहाँ। ।
एक उदाहरण:
import 'dart:convert'; import 'package:http/http.dart' as http; class Example { Future<String> _getIPAddress() { final url = 'https://httpbin.org/ip'; return http.get(url).then((response) { String ip = jsonDecode(response.body)['origin']; return ip; }); } } main() { final example = new Example(); example ._getIPAddress() .then((ip) => print(ip)) .catchError((error) => print(error)); }
प्रश्न:
async और
await का एनालॉग क्या है?
उत्तर है:
async और
awaitमतभेद:
जावास्क्रिप्ट में, एसिंक्स फ़ंक्शंस
प्रॉमिस लौटाते हैं, डार्ट में, वे
भविष्य में लौटते हैं। प्रतीक्षारत रूप से एक async फ़ंक्शन कॉल करने के परिणाम की उम्मीद है।
अतिरिक्त जानकारी:
अधिक जानकारी यहाँ।एक उदाहरण:
import 'dart:convert'; import 'package:http/http.dart' as http; class Example { Future<String> _getIPAddress() async { final url = 'https://httpbin.org/ip'; final response = await http.get(url); String ip = jsonDecode(response.body)['origin']; return ip; } } main() async { final example = new Example(); try { final ip = await example._getIPAddress(); print(ip); } catch (error) { print(error); } }
मूल बातें
प्रश्न:
स्पंदन पर एक आवेदन परियोजना कैसे बनाएं?
उत्तर है:
- फ़्लटर और डार्ट प्लगइन्स के साथ आईडीई का उपयोग करके इंस्टॉल किया गया।
flutter create {projectname} का उपयोग करके flutter create {projectname} ।
मतभेद:
React Native में प्रोजेक्ट बनाने के लिए,
create-react-native-app {projectname} ।
अतिरिक्त जानकारी:
अधिक जानकारी यहाँ।प्रश्न:
आवेदन कैसे शुरू करें?
उत्तर है:
- IDE में रन फ़ंक्शन का उपयोग करके स्थापित फ़्लटर और डार्ट प्लगइन्स के साथ।
flutter run कमांड का उपयोग करना।
मतभेद:
React Native एप्लिकेशन को लॉन्च करने के लिए
npm run या
yarn run कमांड का उपयोग करता है।
प्रश्न:
विगेट्स आयात कैसे करें?
उत्तर है:
स्पंदन में, सभी विजेट पैकेज में टूट जाते हैं, इसलिए पैकेज को आयात करना इसके विजेट का उपयोग करने के लिए पर्याप्त है।
मतभेद:
रिएक्ट नेटिव में, आपको प्रत्येक विजेट आयात करना होगा।
एक उदाहरण:
import 'package:flutter/material.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/widgets.dart'; import 'package:flutter/my_widgets.dart';
प्रश्न:
विजेट ट्री बनाने के लिए विगेट्स और नेस्टिंग का उपयोग कैसे करें?
उत्तर है:
स्पंदन में, लगभग सब कुछ विगेट्स है। यहां तक कि एप्लिकेशन ऑब्जेक्ट एक विजेट है। प्रत्येक विजेट को पैरेंट में नेस्ट किया जा सकता है। विगेट्स के संयोजन से, आप एक पदानुक्रम बनाते हैं जिसे विजेट ट्री कहा जाता है। यह वह है जो बाद में स्क्रीन पर एक डिस्प्ले में बदल जाता है।
एक उदाहरण:
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Welcome to Flutter', home: Scaffold( appBar: AppBar( title: Text('Welcome to Flutter'), ), body: Center( child: Text('Hello world'), ), ), ); } }
प्रश्न:
पुन: प्रयोज्य घटकों का निर्माण कैसे करें?
उत्तर है:
स्पंदन में, आप एक विजेट वर्ग बना सकते हैं और इसका पुन: उपयोग कर सकते हैं। उपयोग किए जाने वाले पैरामीटर वर्ग क्षेत्र हैं।
मतभेद:
प्रतिक्रियाशील मूल में, पुन: उपयोग किए गए तत्व के मापदंडों को बदलने के लिए, आपको उन्हें सहारा के रूप में चिह्नित करने की आवश्यकता है।
अतिरिक्त जानकारी:
कंस्ट्रक्टर में पैरामीटर दो तरीकों से घोषित किए जा सकते हैं: नियमित रूप से गणना और वैकल्पिक द्वारा, घुंघराले ब्रेस का उपयोग करके
{} । कंस्ट्रक्टर का उपयोग करने के लिए मापदंडों का उपयोग करते समय अंतर होता है।
सामान्य गणना में, सभी मापदंडों की आवश्यकता होती है, और कंस्ट्रक्टर को कॉल करते समय, आप निर्दिष्ट नहीं कर सकते हैं कि कौन सा विशेष पैरामीटर पास किया गया है, क्योंकि वे आदेश के कारण हैं।
वैकल्पिक के साथ, आप किसी भी क्रम का उपयोग कर सकते हैं जिसमें पैरामीटर प्रेषित होते हैं, लेकिन आपको यह निर्दिष्ट करना होगा कि कौन सा विशिष्ट पैरामीटर प्रेषित है या उन्हें बिल्कुल भी प्रसारित नहीं करना है। आवश्यकतानुसार एक वैकल्पिक पैरामीटर को चिह्नित करने के लिए,
@required एनोटेशन का उपयोग करें।
एक उदाहरण:
class CustomCard extends StatelessWidget { CustomCard({@required this.index, @required this.onPress}); final index; final Function onPress; @override Widget build(BuildContext context) { return Card( child: Column( children: <Widget>[ Text('Card $index'), FlatButton( child: const Text('Press'), onPressed: this.onPress, ), ], ) ); } } ...
परियोजना संरचना और संसाधन
प्रश्न:
कोड लिखना कहाँ से शुरू करें?
उत्तर है:
{projectname}/lib/main.dart ।
प्रश्न:
एक स्पंदन परियोजना में फ़ाइल संरचना क्या है?
उत्तर है:
┬ └ projectname ┬ ├ android - Android . ├ build - iOS Android . ├ ios - iOS . ├ lib - Dart . ┬ └ src - Contains additional source files. └ main.dart - . ├ test - . └ pubspec.yaml - . package.json React Native.
प्रश्न:
संसाधनों और परिसंपत्तियों को कहाँ संग्रहीत करें और उनका उपयोग कैसे करें?
उत्तर है:
संसाधनों और परियोजना निर्भरता के लिंक को
pubspec.yaml फ़ाइल में संग्रहीत किया जाता है। वास्तव में, आप उन्हें
lib अंदर किसी भी फ़ोल्डर में रख सकते हैं, सबसे महत्वपूर्ण बात,
pubspec.yaml में उन्हें पथ निर्दिष्ट करें। आप उन्हें किसी प्रोजेक्ट में या तो विशेष विजेट्स का उपयोग कर सकते हैं, उदाहरण के लिए
AssetImage , या सीधे
AssetBundle का उपयोग
करके ।
अतिरिक्त जानकारी:
अधिक जानकारी यहाँ।एक उदाहरण:
pubspec.yaml में संपत्ति की घोषणा
flutter: assets: - assets/my_icon.png - assets/background.png
कोड में उपयोग करें
image: AssetImage('assets/background.png'),
प्रश्न:
नेटवर्क से चित्र कैसे डाउनलोड करें?
उत्तर है:
Image.network का उपयोग करना।
एक उदाहरण:
body: Image.network( 'https://flutter.io/images/owl.jpg',
प्रश्न:
थर्ड-पार्टी पैकेज और प्लगइन्स कैसे कनेक्ट करें?
उत्तर है:
pubspec.yaml में
dependencies का उपयोग करना।
मतभेद:
रिएक्टिव नेटिव
yarn add {package-name} या
npm install --save {package-name} कमांड निर्भरता जोड़ने के लिए उपयोग करता है।
अतिरिक्त जानकारी:
संकुल का उपयोग करनापैकेज और प्लगइन विकासस्पंदन के लिए लोकप्रिय प्लगइन्सएक उदाहरण:
dependencies: flutter: sdk: flutter google_sign_in: ^3.0.3
दृश्य
प्रश्न:
व्यू कंटेनर के समतुल्य क्या है?
उत्तर है:
लेआउट के लिए सभी बुनियादी विजेट, उदाहरण के लिए
कंटेनर ,
कॉलम ,
पंक्ति और
केंद्र ।
अतिरिक्त जानकारी:
अधिक जानकारी यहाँ।प्रश्न:
FlatList या
SelectionList का एनालॉग क्या है?
उत्तर है:
ListViewएक उदाहरण:
var data = [ ... ]; ListView.builder( itemCount: data.length, itemBuilder: (context, int index) { return Text( data[index], ); }, )
प्रश्न:
कैनवास का उपयोग कैसे करें?
उत्तर है:
CustomPaint और
CustomPainter कक्षाओं का उपयोग करना।
मतभेद:
रिएक्ट नेटिव में, कैनवस को बॉक्स से बाहर निकालने का कोई तरीका नहीं है। तीसरे पक्ष के प्लगइन्स हैं, उदाहरण के लिए
react-native-canvas ।
एक उदाहरण:
class MyCanvasPainter extends CustomPainter { @override void paint(Canvas canvas, Size size) { Paint paint = Paint(); paint.color = Colors.amber; canvas.drawCircle(Offset(100.0, 200.0), 40.0, paint); Paint paintRect = Paint(); paintRect.color = Colors.lightBlue; Rect rect = Rect.fromPoints(Offset(150.0, 300.0), Offset(300.0, 400.0)); canvas.drawRect(rect, paintRect); } bool shouldRepaint(MyCanvasPainter oldDelegate) => false; bool shouldRebuildSemantics(MyCanvasPainter oldDelegate) => false; } class _MyCanvasState extends State<MyCanvas> { @override Widget build(BuildContext context) { return Scaffold( body: CustomPaint( painter: MyCanvasPainter(), ), ); } }
लेआउट
प्रश्न:
लेआउट गुणों का वर्णन करने के लिए विगेट्स का उपयोग कैसे करें?
उत्तर है:
स्पंदन लेआउट गुणों के लिए विशेष विगेट्स का उपयोग करता है, उदाहरण के लिए:
कॉलम ,
रो ,
पैडिंग ,
एलाइन ,
स्टैक ।
मतभेद:
रिएक्ट नेटिव में, अक्सर
props का उपयोग करके लेआउट गुण सेट किए जा सकते हैं।
अतिरिक्त जानकारी:
विगेट्स की पूरी सूचीप्रश्न:
विजेट्स को लेआउट में कैसे रखें?
उत्तर है:
पूर्ण स्थिति के लिए,
स्टैक विजेट का उपयोग करें। रिश्तेदार के लिए - विभिन्न विगेट्स और उनके संयोजन, जो
यहां मिल सकते
हैं ।
एक उदाहरण:
Stack( alignment: const Alignment(0.6, 0.6), children: <Widget>[ CircleAvatar( backgroundImage: NetworkImage( 'https://avatars3.githubusercontent.com/u/14101776?v=4'), ), Container( decoration: BoxDecoration( color: Colors.black45, ), child: Text('Flutter'), ), ], )
stylization
प्रश्न:
कैसे घटकों को स्टाइल करने के लिए?
उत्तर है:
सबसे अधिक बार, विगेट्स की एक
style संपत्ति होती है।
मतभेद:
रिएक्टिव नेटिव स्टाइलिंग के लिए
stylesheets.create का उपयोग करता है।
एक उदाहरण:
var textStyle = TextStyle(fontSize: 32.0, color: Colors.cyan, fontWeight: FontWeight.w600); ... Center( child: Column( children: <Widget>[ Text( 'Sample text', style: textStyle, ), Padding( padding: EdgeInsets.all(20.0), child: Icon(Icons.lightbulb_outline, size: 48.0, color: Colors.redAccent) ), ], ), )
प्रश्न:
आइकन और रंगों का उपयोग कैसे करें?
उत्तर है:
प्रतीक और
रंग वर्गों का उपयोग करना।
मतभेद:
प्रतिक्रियाशील मूल निवासी बॉक्स से बाहर आइकन का समर्थन नहीं करता है।
एक उदाहरण:
प्रतीक
Icon(Icons.lightbulb_outline, color: Colors.redAccent)
रंग
class SampleApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Sample App', theme: ThemeData( primarySwatch: Colors.blue, textSelectionColor: Colors.red ), home: SampleAppPage(), ); } }
प्रश्न:
आवेदन की शैलीगत विषय को कैसे अनुकूलित करें?
उत्तर है:
ThemeData वर्ग का उपयोग करना।
मतभेद:
रिएक्ट नेटिव में, एक सामान्य विषय को
stylesheets माध्यम से कॉन्फ़िगर किया गया है।
एक उदाहरण:
@override Widget build(BuildContext context) { return Theme( data: ThemeData( primaryColor: Colors.cyan, brightness: brightness, ), child: Scaffold( backgroundColor: Theme.of(context).primaryColor, ... ... ), ); }
राज्य प्रबंधन
प्रश्न:
विगेट्स के प्रदर्शन को कैसे अपडेट करें?
उत्तर है:
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 {
स्थानीय भंडारण
प्रश्न:
एप्लिकेशन में
key-value डेटा कैसे संग्रहीत करें?
उत्तर है:
शेअर_पॉइंटर्स प्लगइन का उपयोग करना।
मतभेद:
प्रतिक्रिया मूल निवासी
AsyncStorage का उपयोग करता है।
एक उदाहरण:
कनेक्शन के आधार
dependencies: flutter: sdk: flutter shared_preferences: ^0.4.3
के उपयोग
SharedPreferences prefs = await SharedPreferences.getInstance(); _counter = prefs.getInt('counter'); prefs.setInt('counter', ++_counter); setState(() { _counter = _counter; });
प्रश्न:
जटिल डेटा कैसे स्टोर करें?
उत्तर है:
डेटाबेस प्लगइन्स का उपयोग करना, जैसे कि
sqflite या
hive ।
नेविगेशन
प्रश्न:
स्क्रीन के बीच नेविगेट कैसे करें?
उत्तर है:
स्क्रीन के बीच नेविगेट करने के लिए,
नेविगेटर और
रूट कक्षाओं का उपयोग किया जाता है।
मतभेद:
React Native
StackNavigator ,
TabNavigator और
DrawerNavigator का उपयोग करता है।
स्पंदन के दो नेविगेशन तरीके हैं:
- मार्ग नामों के साथ एक मानचित्र का वर्णन करें
- सीधे रूट पर नेविगेट करें।
नेविगेटर आपके द्वारा निर्दिष्ट मार्ग पर
पुश () या
पॉप () कर सकता है।
एक उदाहरण:
void main() { runApp(CupertinoApp( home: MyAppHome(),
प्रश्न:
टैब नेविगेशन का उपयोग कैसे करें?
उत्तर है:
कक्षाओं का उपयोग करना:
TabController ,
TabBar ,
Tab, और
TabBarView ।
मतभेद:
प्रतिक्रियाशील मूल निवासी
createBottomTabNavigator और TabNavigation का उपयोग करता है।
अतिरिक्त जानकारी:
अधिक जानकारी यहाँ। ।
एक उदाहरण:
class _NavigationHomePageState extends State<NavigationHomePage> with SingleTickerProviderStateMixin { TabController controller=TabController(length: 2, vsync: this); @override Widget build(BuildContext context) { return Scaffold( bottomNavigationBar: Material ( child: TabBar( tabs: <Tab> [ Tab(icon: Icon(Icons.person),) Tab(icon: Icon(Icons.email),), ], controller: controller, ), color: Colors.blue, ), body: TabBarView( children: <Widget> [ home.homeScreen(), tabScreen.tabScreen() ], controller: controller, ) ); } }
प्रश्न:
दराज के नेविगेशन का उपयोग कैसे करें?
उत्तर है:
दराज वर्ग का उपयोग करना।
मतभेद:
रिएक्टिव नेटिव
createDrawerNavigator और DrawerNavigation का उपयोग करता है।
एक उदाहरण:
@override Widget build(BuildContext context) { return Scaffold( drawer: Drawer( child: ListTile( leading: Icon(Icons.change_history), title: Text('Screen2'), onTap: () { Navigator.of(context).pushNamed('/b'); }, ), elevation: 20.0, ), appBar: AppBar( title: Text('Home'), ), body: Container(), ); }
इशारों और टच इवेंट हैंडलिंग
प्रश्न:
कैसे एक क्लिक संभाल करने के लिए?
उत्तर है:
यदि विजेट क्लिक का समर्थन करता है, तो
onPressed() । यदि नहीं, तो
GestureDetector विजेट का उपयोग करें।
मतभेद:
React Native इसके लिए
PanResponder या
Touchable का उपयोग करता है।
एक उदाहरण:
GestureDetector( child: Scaffold( appBar: AppBar( title: Text('Gestures'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text('Tap, Long Press, Swipe Horizontally or Vertically '), ], ) ), ), onTap: () { print('Tapped'); }, onLongPress: () { print('Long Pressed'); }, onVerticalDragEnd: (DragEndDetails value) { print('Swiped Vertically'); }, onHorizontalDragEnd: (DragEndDetails value) { print('Swiped Horizontally'); }, );
HTTP अनुरोध
प्रश्न:
एपीआई अनुरोधों से डेटा कैसे प्राप्त करें?
उत्तर है:
Http प्लगइन का उपयोग करना।
मतभेद:
रिएक्टिव नेटिव
fetch API का उपयोग करता
fetch API ।
एक उदाहरण:
प्लगइन्स कनेक्शन
dependencies: flutter: sdk: flutter http: <latest_version>
डेटा पुनर्प्राप्ति
final url = Uri.https('httpbin.org', 'ip'); final httpClient = HttpClient(); _getIPAddress() async { var request = await httpClient.getUrl(url); var response = await request.close(); var responseBody = await response.transform(utf8.decoder).join(); String ip = jsonDecode(responseBody)['origin']; setState(() { _ipAddress = ip; }); }
इनपुट फॉर्म
प्रश्न:
इनपुट के लिए क्या विजेट का उपयोग करें?
उत्तर है:
TextEditingController या
TextFormField के साथ संयोजन में
TextField ।
मतभेद:
React Native
TextInput का उपयोग करता है।
TextFormField फ़ील्ड में मूल्यों को संग्रहीत करने के लिए अपनी अंतर्निहित मान्यता और तर्क में
TextField से भिन्न होता है।
एक उदाहरण:
TextField
final TextEditingController _controller = TextEditingController(); ... TextField( controller: _controller, decoration: InputDecoration( hintText: 'Type something', labelText: 'Text Field ' ), ), RaisedButton( child: Text('Submit'), onPressed: () { showDialog( context: context, child: AlertDialog( title: Text('Alert'), content: Text('You typed ${_controller.text}'), ), ); }, ), )
TextFormField
final formKey = GlobalKey<FormState>(); ... Form( key:formKey, child: Column( children: <Widget>[ TextFormField( validator: (value) => !value.contains('@') ? 'Not a valid email.' : null, onSaved: (val) => _email = val, decoration: const InputDecoration( hintText: 'Enter your email', labelText: 'Email', ), ), RaisedButton( onPressed: _submit, child: Text('Login'), ), ], ), ) void _submit() { final form = formKey.currentState; if (form.validate()) { form.save(); showDialog( context: context, child: AlertDialog( title: Text('Alert'), content: Text('Email: $_email, password: $_password'), ) ); } }
प्लेटफ़ॉर्म-विशिष्ट कोड
प्रश्न:
यह निर्धारित करने के लिए कि कोड किस प्लेटफ़ॉर्म पर चल रहा है?
उत्तर है:
थीम या
platform क्लास में
platform फ़ील्ड क्लास का उपयोग करना।
एक उदाहरण:
प्लेटफार्म का मैदान
if (Theme.of(context).platform == TargetPlatform.iOS) { return 'iOS'; } else if (Theme.of(context).platform == TargetPlatform.android) { return 'android'; } else if (Theme.of(context).platform == TargetPlatform.fuchsia) { return 'fuchsia'; } else { return 'not recognised '; }
प्लेटफार्म क्लास
if (Platform.isIOS) { return 'iOS'; } else if (Platform.isAndroid) { return 'android'; } else if (Platform.isFuchsia) { return 'fuchsia'; } else { return 'not recognised '; }
प्रश्न:
देशी प्लेटफ़ॉर्म कोड कैसे कॉल करें?
उत्तर है:
वाया
मेथडांचल ।
अतिरिक्त जानकारी:
अधिक जानकारी यहाँ। ।
डिबगिंग
प्रश्न:
एप्लिकेशन डीबग करने के लिए कौन से टूल हैं?
उत्तर है:
DevTools ।
प्रश्न:
hot reload कैसे करें?
उत्तर है:
यदि एप्लिकेशन IntelliJ IDE या Android स्टूडियो से लॉन्च किया गया था, तो
⌘s/ctrl-s करके या
hot reload आइकन पर क्लिक करें। यदि टर्मिनल से शुरू किया गया है, तो पत्र
r दर्ज करके।
मतभेद:
IOS के लिए
⌘R/Ctrl+R नेटिव
⌘R/Ctrl+R का उपयोग करता है, Android के लिए डबल
⌘R/Ctrl+Rप्रश्न:
एप्लिकेशन में डेवलपर मेनू कैसे एक्सेस करें?
उत्तर है:
यदि लॉन्च आईडीई से था, तो आईडीई टूल का उपयोग करके। यदि कंसोल से, तो h का उपयोग करें।
मतभेद:
IOS के लिए रिएक्ट नेटिव
⌘D/Ctrl+D का उपयोग करता है और Android के लिए
⌘M/Ctrl+M ।
अतिरिक्त जानकारी:
टीमों की पूरी सूची
एनीमेशन
प्रश्न:
एनीमेशन के लिए क्या प्रयोग किया जाता है?
उत्तर है:
एनीमेशन और
एनिमेशनकंट्रोलर ।
मतभेद:
रिएक्ट नेटिव
Animation API का उपयोग करता
Animation API ।
अतिरिक्त जानकारी:
अधिक जानकारी यहाँ।प्रश्न:
एक साधारण
fade-in एनीमेशन कैसे जोड़ें?
उत्तर है:
FadeTransition का उपयोग करना।
एक उदाहरण:
import 'package:flutter/material.dart'; void main() { runApp(Center(child: LogoFade())); } class LogoFade extends StatefulWidget { _LogoFadeState createState() => _LogoFadeState(); } class _LogoFadeState extends State<LogoFade> with TickerProviderStateMixin { Animation animation; AnimationController controller; initState() { super.initState(); controller = AnimationController( duration: const Duration(milliseconds: 3000), vsync: this); final CurvedAnimation curve = CurvedAnimation(parent: controller, curve: Curves.easeIn); animation = Tween(begin: 0.0, end: 1.0).animate(curve); controller.forward(); } Widget build(BuildContext context) { return FadeTransition( opacity: animation, child: Container( height: 300.0, width: 300.0, child: FlutterLogo(), ), ); } dispose() { controller.dispose(); super.dispose(); } }
प्रश्न:
आइटमों की सूची में स्वाइप एनीमेशन कैसे जोड़ें?
उत्तर है:
अस्वीकार्य का उपयोग
करना ।
एक उदाहरण:
child: Dismissible( key: key, onDismissed: (DismissDirection dir) { cards.removeLast(); }, child: Container( ... ), ),
घटक समकक्ष
प्रश्न:
React Native की तुलना में Flutter के समतुल्य क्या हैं?
उत्तर है:
स्पंदन प्लगइन्स
प्रश्न:
GPS का उपयोग कैसे करें?
उत्तर है:
जियोलोकेटर प्लगइन का उपयोग करना।
प्रश्न:
कैमरे तक कैसे पहुंचें?
उत्तर है:
Image_picker प्लगइन का उपयोग करना।
प्रश्न:
फेसबुक के माध्यम से लॉग इन कैसे करें?
उत्तर है:
Flutter_facebook_login प्लगइन का उपयोग करना।
प्रश्न:
फायरबेस का उपयोग कैसे करें?
उत्तर है:
Firebase
फ़्लटर प्रथम पार्टी प्लगइन्स का समर्थन करता है:
यहाँ मूल सवालों के जवाब शायद हैं। मुझे आशा है कि मेरी व्याख्या आपके लिए उपयोगी थी, और यदि आप अभी तक स्पंदन पर नहीं लिख रहे हैं, तो कम से कम इसके बारे में सोचें। इसका मतलब यह है कि डेवलपर्स के स्पंदन शेल्फ के लिए एक अतिरिक्त हो सकता है, और एक साथ हम विकसित सुविधाजनक और तेज अनुप्रयोगों के प्रिज्म के माध्यम से दुनिया को एक बेहतर जगह बनाएंगे! हाँ प्रतिक्रिया आपके मूल निवासी को नहीं तोड़ेगी!