Flutter Widget Code Tutorial in Hindi
Flutter एक UI toolkit है जिसका उपयोग मोबाइल, वेब और डेस्कटॉप एप्लिकेशन बनाने के लिए किया जाता है। Flutter में सबसे महत्वपूर्ण चीज़ जो आपको समझनी होती है, वह है Widgets। सभी UI तत्व जैसे बटन, टेक्स्ट, इमेज आदि Flutter में Widgets के रूप में होते हैं। इस ट्यूटोरियल में हम Flutter Widgets के बारे में जानेंगे और एक सिंपल Flutter एप्लिकेशन बनाकर उसे समझेंगे।
1. Flutter में Widgets क्या होते हैं?
Widgets Flutter का आधार होते हैं। एक Widget UI को बनाने का तरीका है। जब हम Flutter एप्लिकेशन बनाते हैं, तो हर UI घटक को एक Widget के रूप में व्यक्त किया जाता है। Flutter में दो प्रकार के Widgets होते हैं:
Stateful Widgets: जिनका State बदल सकता है।
Stateless Widgets: जिनका State स्थिर होता है, यानी इनका State कभी नहीं बदलता।
2. Stateless Widget का उदाहरण
Stateless Widget वह होता है जिसका UI या State कभी बदलता नहीं। उदाहरण के लिए, अगर आप एक Text Widget दिखा रहे हैं, और उसका कंटेंट नहीं बदल रहा है, तो यह Stateless Widget होगा।
कोड:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Tutorial',
home: Scaffold(
appBar: AppBar(
title: Text('Stateless Widget Example'),
),
body: Center(
child: Text(
'नमस्ते, Flutter!',
style: TextStyle(fontSize: 30),
),
),
),
);
}
}
कोड समझना:
1. MyApp एक Stateless Widget है।
2. build method में UI तैयार किया जाता है।
3. MaterialApp एक wrapper है जो एप्लिकेशन के विभिन्न स्क्रीन और थीम को सेट करता है।
4. Scaffold बेसिक UI संरचना प्रदान करता है, जिसमें AppBar और body होता है।
5. Text widget स्क्रीन पर टेक्स्ट दिखाता है।
3. Stateful Widget का उदाहरण
Stateful Widget वह होता है जिसका State बदल सकता है। उदाहरण के लिए, अगर आप एक बटन दबाने पर कुछ बदलते हैं, तो वह Stateful Widget होगा।
कोड:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Tutorial',
home: CounterPage(),
);
}
}
class CounterPage extends StatefulWidget {
@override
_CounterPageState createState() => _CounterPageState();
}
class _CounterPageState extends State<CounterPage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Stateful Widget Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'आपने बटन ${_counter} बार दबाया है',
style: TextStyle(fontSize: 30),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: _incrementCounter,
child: Text('काउंट बढ़ाएं'),
),
],
),
),
);
}
}
कोड समझना:
1. CounterPage एक Stateful Widget है।
2. createState method एक _CounterPageState ऑब्जेक्ट रिटर्न करता है, जो Widget का State रखता है।
3. _incrementCounter method के द्वारा हम State बदलते हैं और UI को अपडेट करते हैं।
4. setState method के माध्यम से UI को री-रेन्डर किया जाता है।
4. Flutter में Common Widgets
Text Widget: किसी टेक्स्ट को स्क्रीन पर दिखाने के लिए।
Container Widget: UI को सजाने और लेआउट करने के लिए।
Column/Row Widgets: कई Widgets को क्रम में रखने के लिए।
Button Widgets: जैसे ElevatedButton, FlatButton, आदि।
Image Widget: इमेज़ को स्क्रीन पर दिखाने के लिए।
5. Flutter Layouts
Flutter में विभिन्न लेआउट Widgets होते हैं, जिनका उपयोग हम UI को व्यवस्थित करने के लिए करते हैं:
Column: वर्टिकल लेआउट के लिए।
Row: होरिजेंटल लेआउट के लिए।
Stack: एक के ऊपर एक लेआउट के लिए।
GridView: ग्रिड के रूप में items दिखाने के लिए।
Column और Row Example:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Tutorial',
home: Scaffold(
appBar: AppBar(
title: Text('Column and Row Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('यह एक Column है'),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('यह एक '),
Text('Row'),
],
),
],
),
),
),
);
}
}
6. Flutter Widgets का उपयोग करने के टिप्स
Flutter में सभी UI तत्व Widgets होते हैं, इसलिए UI का डिज़ाइन करते समय Widgets का सही चयन करें।
Stateful Widgets का इस्तेमाल तब करें जब आपको UI को अपडेट करने की आवश्यकता हो।
Stateless Widgets का इस्तेमाल तब करें जब UI स्थिर हो।
Layouts को सही से व्यवस्थित करने के लिए Column, Row, और Stack जैसे लेआउट Widgets का उपयोग करें।
निष्कर्ष
Flutter Widgets को समझना बहुत महत्वपूर्ण है क्योंकि ये ही Flutter एप्लिकेशन की हड्डी होते हैं। ऊपर दिए गए उदाहरणों में हमने Stateless और Stateful Widgets का उपयोग किया है, और कुछ सामान्य लेआउट Widgets का उदाहरण भी देखा है। Flutter में Widgets की सहायता से आप अपने एप्लिकेशन की UI आसानी से बना सकते हैं।
0 comments:
Post a Comment