लेआउट विजेट की मूल बातें
संरचित और प्रतिक्रियाशील उपयोगकर्ता इंटरफ़ेस बनाने के लिए Row, Column, Container और Stack जैसे आवश्यक लेआउट विजेट में निपुणता प्राप्त करें।
लेआउट विजेट की मूल बातें, CoddyKit पर Flutter मोबाइल विकास का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Flutter मोबाइल विकास सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Flutter मोबाइल विकास पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
लेआउट क्यों महत्वपूर्ण हैं
फ़्लटर में हर चीज़ एक विजेट है! जटिल और सुंदर यूज़र इंटरफ़ेस बनाने के लिए आपको इन विजेट को स्क्रीन पर व्यवस्थित करना होता है।
लेआउट विजेट ऐसे विशेष विजेट होते हैं, जो अन्य विजेट को व्यवस्थित करने में मदद करते हैं और उनका आकार, स्थान तथा एक-दूसरे के साथ उनका व्यवहार निर्धारित करते हैं।
Container से परिचय
Container विजेट सबसे बहुमुखी लेआउट विजेट में से एक है। इसे एक अनुकूलन योग्य डिब्बे की तरह समझें, जिसमें एक चाइल्ड विजेट रखा जा सकता है।
आप इसका उपयोग इन कार्यों के लिए कर सकते हैं:
- पैडिंग या मार्जिन जोड़ना
- पृष्ठभूमि के रंग या सजावट सेट करना
- विशिष्ट चौड़ाई और ऊँचाई निर्धारित करना
- इसकी स्थिति या घुमाव बदलना
सरल रंगीन डिब्बा
आइए एक मूल Container बनाते हैं, जिसमें एक चाइल्ड Text विजेट हो। ध्यान दें कि हमने इसका color और padding कैसे सेट किया है।
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Container Demo')),
body: Center(
child: Container(
padding: const EdgeInsets.all(20.0),
color: Colors.blueAccent,
child: const Text(
'Hello from Container!',
style: TextStyle(color: Colors.white, fontSize: 18),
),
),
),
),
);
}
}Row के साथ क्षैतिज व्यवस्था
जब आपको कई विजेट को क्षैतिज रूप से अगल-बगल व्यवस्थित करना हो, तो Row विजेट सबसे उपयोगी होता है। इसमें विजेट की एक सूची इसके children के रूप में दी जाती है।
Row अपने चाइल्ड विजेट को क्षैतिज अक्ष पर अपने-आप व्यवस्थित करने का प्रयास करता है और आप पंक्ति के भीतर उनका संरेखण नियंत्रित कर सकते हैं।
बटनों की पंक्ति
यहाँ Row का उपयोग करके तीन बटनों को एक-दूसरे के बगल में रखने का तरीका बताया गया है। हम इनके बीच कुछ खाली स्थान भी जोड़ेंगे।
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Row Demo')),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
ElevatedButton(onPressed: () {}, child: const Text('Button 1')),
ElevatedButton(onPressed: () {}, child: const Text('Button 2')),
ElevatedButton(onPressed: () {}, child: const Text('Button 3')),
],
),
),
),
);
}
}Column के साथ ऊर्ध्वाधर व्यवस्था
जिस तरह Row विजेट को क्षैतिज रूप से व्यवस्थित करता है, उसी तरह Column विजेट उन्हें एक के नीचे एक, ऊर्ध्वाधर रूप से व्यवस्थित करता है।
यह भी children की एक सूची लेता है और आपको उनके ऊर्ध्वाधर संरेखण को नियंत्रित करने देता है।
एक के ऊपर एक TextField
आइए Column का उपयोग करके दो TextField और एक बटन को लंबवत रूप से एक के ऊपर एक रखकर लॉगिन जैसा सरल फ़ॉर्म बनाते हैं।
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Column Demo')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Padding(
padding: EdgeInsets.all(8.0),
child: TextField(
decoration: InputDecoration(labelText: 'Username'),
),
),
const Padding(
padding: EdgeInsets.all(8.0),
child: TextField(
obscureText: true,
decoration: InputDecoration(labelText: 'Password'),
),
),
ElevatedButton(onPressed: () {}, child: const Text('Login')),
],
),
),
),
);
}
}चाइल्ड विजेट का संरेखण
Row और Column, दोनों संरेखण के लिए दो महत्वपूर्ण प्रॉपर्टी का उपयोग करते हैं:
mainAxisAlignment: मुख्य अक्ष पर चाइल्ड विजेट कैसे रखे जाते हैं (Rowके लिए क्षैतिज औरColumnके लिए ऊर्ध्वाधर)। उदाहरण:start,center,end,spaceAround।crossAxisAlignment: लंबवत अक्ष पर चाइल्ड विजेट कैसे रखे जाते हैं (Rowके लिए ऊर्ध्वाधर औरColumnके लिए क्षैतिज)। उदाहरण:start,center,end,stretch।
इनकी सहायता से आप अपने लेआउट पर सूक्ष्म नियंत्रण पा सकते हैं!
Stack के साथ ओवरलैप
कभी-कभी आपको विजेट को एक-दूसरे के ऊपर रखना होता है, जैसे किसी चित्र के ऊपर टेक्स्ट। ऐसे में Stack विजेट उपयोगी होता है।
Stack कई चाइल्ड विजेट को परतों में रखने देता है। आप Positioned विजेट का उपयोग करके स्टैक के भीतर उनकी सटीक स्थिति नियंत्रित कर सकते हैं।
टेक्स्ट के ऊपर चित्र
आइए Stack का उपयोग करके किसी चित्र के ठीक ऊपर टेक्स्ट रखें। टेक्स्ट को सटीक स्थान पर रखने के लिए हम Positioned का उपयोग करेंगे।
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Stack Demo')),
body: Center(
child: SizedBox(
width: 300,
height: 200,
child: Stack(
children: <Widget>[
Image.network(
'https://picsum.photos/300/200',
fit: BoxFit.cover,
),
const Positioned(
bottom: 10,
left: 10,
child: Text(
'Beautiful Scenery',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
shadows: [
Shadow(blurRadius: 5, color: Colors.black)
],
),
),
),
],
),
),
),
),
);
}
}लेआउट चुनौती
निम्नलिखित में से कौन-से विजेट एक ही दिशा (क्षैतिज या ऊर्ध्वाधर) में कई चाइल्ड विजेट को व्यवस्थित करने के लिए मुख्य रूप से उपयोग किए जाते हैं?
लेआउट में महारत हासिल!
बहुत अच्छा! अब आपने Flutter के मूल लेआउट विजेट में महारत हासिल कर ली है:
Container: एकल चाइल्ड के लिए बहुउपयोगी बॉक्स, जो padding, margin, रंग और आकार को नियंत्रित करने की सुविधा देता है।Row: कई चाइल्ड विजेट को क्षैतिज रूप से व्यवस्थित करता है।Column: कई चाइल्ड विजेट को ऊर्ध्वाधर रूप से व्यवस्थित करता है।Stack: चाइल्ड विजेट को एक-दूसरे के ऊपर परतों में रखता है और अक्सरPositionedके साथ उपयोग किया जाता है।
किसी भी Flutter UI को बनाने के लिए इनकी समझ होना बहुत महत्वपूर्ण है!
एआई शिक्षक के साथ Dart सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 22
- पाठ
- 88
अक्सर पूछे जाने वाले प्रश्न
क्या “लेआउट विजेट की मूल बातें” पाठ निःशुल्क है?
हाँ — Flutter मोबाइल विकास अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “लेआउट विजेट की मूल बातें” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Flutter मोबाइल विकास पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“लेआउट विजेट की मूल बातें” में मैं क्या सीखूँगा?
संरचित और प्रतिक्रियाशील उपयोगकर्ता इंटरफ़ेस बनाने के लिए Row, Column, Container और Stack जैसे आवश्यक लेआउट विजेट में निपुणता प्राप्त करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Flutter मोबाइल विकास का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Flutter मोबाइल विकास शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Flutter मोबाइल विकास शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।
“लेआउट विजेट की मूल बातें” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Flutter मोबाइल विकास पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Flutter मोबाइल विकास पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- StatelessWidget बनाम StatefulWidget
- लेआउट विजेट की मूल बातें
- इंटरैक्टिव UI तत्व
- ListView से स्क्रॉल होने वाली सूचियाँ बनाना