पैकेज, रिपॉज़िटरी और ऐप श्रेणियाँ खोजें

पैकेज विवरणv1.0.1

coordinator_layout

एक लाइब्रेरी में घटते हुए हेडर के व्यवहार को संभालने के लिए विजेट/लेआउट होते हैं

AndroidiOSWebmacOSWindowsLinux
30-दिन डाउनलोड
73
लाइक
4
Pub अंक
150

पैकेज इंस्टॉल करें

flutter pub add coordinator_layout

पैकेज अवलोकन

सार्वजनिक जानकारी से बना चयन मार्गदर्शन। केवल संदर्भ हेतु।

coordinator_layout पैकेज एक सेट विजेट और लेआउट प्रदान करता है जो Flutter एप्लिकेशन में कॉलेप्सिंग हेडर व्यवहार को प्रबंधित करने के लिए डिज़ाइन किए गए हैं। Android के CoordinatorLayout से प्रेरित, यह हेडर और नीचे के सामग्री के बीच चिकनी, समन्वित स्क्रॉल इंटरैक्शन को सक्षम करता है। यह पुस्तकालय डायनामिक, प्रतिक्रियाशील UI बनाने के लिए आदर्श है जहां हेडर स्क्रॉल करते समय संपादित या सामग्री को दिखाते हैं। यह मोबाइल, वेब और डेस्कटॉप सहित कई प्लेटफॉर्म का समर्थन करता है, जिससे यह क्रॉस-प्लेटफॉर्म विकास के लिए लचीला बनता है। यह पैकेज मौजूदा Flutter विजेट्स के साथ बिना किसी दिक्कत के एकीकृत होता है और मूल जैसे स्क्रॉल अनुभव प्रदान करता है।

उपयोग

  • संकुचित एपी के बार को लागू करना
  • डायनामिक स्क्रॉल करने योग्य इंटरफेस बनाना
  • प्रतिक्रियाशील हेडर लेआउट बनाना
  • चिकन आवर्तन के साथ उपयोगकर्ता अनुभव में सुधार
  • जटिल स्क्रॉल व्यवहार डिज़ाइन करना

मुख्य विशेषताएँ

  • कॉलेप्सिंग हेडर एनीमेशन
  • क्रॉस-प्लेटफ़ॉर्म संगतता
  • ScrollController के साथ एकीकरण
  • नेस्टेड स्क्रॉलिंग का समर्थन
  • कस्टमाइज़ेबल लेआउट व्यवहार

इनके लिए उपयुक्त

  • Material Design ऐप्स बनाने वाले डेवलपर्स
  • उन्नत स्क्रॉल प्रभाव चाहने वाले UI डिज़ाइनर
  • गतिशील हेडर इंटरैक्शन की आवश्यकता वाले एप्स
  • क्रॉस-प्लेटफॉर्म Flutter प्रोजेक्ट्स
  • जटिल स्क्रॉलिंग यूआई पैटर्न

विचार योग्य बातें

  • स्क्रॉल कंट्रोलर की समझ आवश्यक है
  • सरल लेआउट के लिए जटिलता बढ़ सकती है
  • उन्नत UI डिजाइन के लिए सबसे उपयुक्त
  • प्रदर्शन कंटेनर निर्माण पर निर्भर करता है
  • कोर फ्लटर विजेट्स की तुलना में सीमित दस्तावेज़न

मूल README

संबंधित सोर्स रिपॉज़िटरी के मूल README का स्नैपशॉट। नवीनतम सामग्री के लिए रिपॉज़िटरी देखें।

coordinator_layout

pub package

a Library contains widget/layout to handle collapsing header behavior

Alt Text

Example

CoordinatorLayout(
    headerMaxHeight: 200,
    headerMinHeight: kToolbarHeight + MediaQuery.of(context).padding.top,
    headers: [
        SliverCollapsingHeader(
            builder: (context, offset, diff) {
                return ...;
            },
        ),
    ],
    body: Container(height: null, child: buildBody(context)),
),
Fit content
CoordinatorLayout(
    headerMaxHeight: 200,
    headerMinHeight: kToolbarHeight + MediaQuery.of(context).padding.top,
    header:[ 
        Builder(builder: (context) {
            return SliverOverlapAbsorber(
            handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
            sliver: SliverSafeArea(
                top: false,
                sliver: SliverCollapsingHeader(
                builder: (context, offset, diff) {
                    return ...;
                },
                ),
            ),
            );
        }),
    ],
    body: Container(height: null, child: buildBody(context)),
),

श्रेणियाँ

सोर्स रिपॉज़िटरी

इस पैकेज का उपयोग करने वाले प्रोजेक्ट

अभी कोई डेटा उपलब्ध नहीं है।