सब कुछ एक विजेट है: Text, Container और Icon

Flutter के बड़े विचार, विजेट ट्री को, तीन बुनियादी बिल्डिंग ब्लॉक्स के माध्यम से समझें: Text, Container और Icon।

8 मिनट · 3 प्रश्न

Flutter में, सब कुछ एक विजेट है। एक विजेट एक इंटरफ़ेस बिल्डिंग ब्लॉक है: स्क्रीन पर जो दिखता है उसके एक हिस्से का विवरण। एक टेक्स्ट एक विजेट है, एक आइकन एक विजेट है, एक स्पेसिंग एक विजेट है... और पूरी स्क्रीन भी! किसी इंटरफ़ेस को बनाने के लिए, आप विजेट को एक-दूसरे के अंदर नेस्ट करते हैं, रूसी गुड़ियों की तरह। मिलकर वे विजेट ट्री बनाते हैं: हर विजेट का एक पैरेंट होता है (वह जो इसे रखता है) और कभी-कभी चिल्ड्रन (वे जिन्हें यह रखता है)। आइए अपने न्यूनतम प्रोग्राम पर फिर से नज़र डालें और इसके ट्री को देखें।

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(
      theme: ThemeData(useMaterial3: true),
      home: const Scaffold(
        body: Center(
          child: Text(
            "Everything is a widget!",
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

ऊपर से नीचे तक: MaterialApp पूरे ऐप (थीम, नेविगेशन) को Google की विज़ुअल भाषा Material 3 के अनुसार कॉन्फ़िगर करता है। Scaffold (शाब्दिक अर्थ "मचान") किसी स्क्रीन की संरचना प्रदान करता है: पृष्ठभूमि, एक वैकल्पिक टाइटल बार... Center अपने चाइल्ड को केंद्र में रखता है, और Text टेक्स्ट दिखाता है। Text का style पैरामीटर एक TextStyle प्राप्त करता है जो अक्षरों का आकार (fontSize), रंग, या मोटाई निर्धारित करता है। अब आइए Container की खोज करें, वह सब-कुछ-करने वाला डिब्बा: एक आयत जिसका आकार, रंग और सामग्री आप नियंत्रित करते हैं।

import 'package:flutter/material.dart';

Widget buildYellowBox() {
  return Container(
    width: 200,
    height: 100,
    color: Colors.amber,
    child: const Center(
      child: Text("I'm inside a box"),
    ),
  );
}

buildYellowBox फ़ंक्शन एक विजेट लौटाता है: अपने इंटरफ़ेस को इस तरह छोटे नामित टुकड़ों में बाँटना एक बहुत ही आम अभ्यास है। यह Container 200 पिक्सेल चौड़ा, 100 ऊँचा है, Colors रंग कैटलॉग की बदौलत खुद को एम्बर पीले रंग में रंगता है, और एक केंद्रित टेक्स्ट रखता है। तीसरा बुनियादी बिल्डिंग ब्लॉक: Icon, जो एक पिक्टोग्राम दिखाता है। Flutter Icons कैटलॉग में सैकड़ों तैयार-टू-यूज़ आइकन देता है: एक तारा, एक दिल, एक घर...

import 'package:flutter/material.dart';

Widget buildStar() {
  return const Icon(
    Icons.star,
    size: 48,
    color: Colors.orange,
  );
}

ट्री के तर्क को याद रखें: जब कोई विजेट एक ही चाइल्ड स्वीकार करता है, तो पैरामीटर को child कहा जाता है (यही स्थिति Center और Container की है)। हमारे पहले उदाहरण में, Scaffold Center का पैरेंट है, जो Text का पैरेंट है। Flutter इस ट्री पर ऊपर से नीचे चलकर स्क्रीन बनाता है। यदि आप बता सकते हैं कि किसका पैरेंट कौन है, तो आप किसी भी Flutter इंटरफ़ेस को पढ़ सकते हैं।

ज्ञान जांच

सुनिश्चित करें कि आपको इस पाठ के मुख्य बिंदु याद हैं।

1. Flutter में, एक विजेट क्या है?
   • एक इंटरफ़ेस बिल्डिंग ब्लॉक जो स्क्रीन के एक हिस्से का वर्णन करता है
   • एक प्रोजेक्ट कॉन्फ़िगरेशन फ़ाइल
   • फ़ोन में निर्मित एक डेटाबेस
2. किसी तारे जैसे पिक्टोग्राम को दिखाने के लिए आप कौन सा विजेट उपयोग करते हैं?
   • Text
   • Container
   • Icon
3. Center(child: Text("Hi")) में, कौन सा विजेट पैरेंट है?
   • Text, क्योंकि यह आख़िर में लिखा गया है
   • Center, क्योंकि यह अपने child पैरामीटर के ज़रिए Text रखता है
   • कोई नहीं: दोनों विजेट स्वतंत्र हैं