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

ducafecatFlutter इकोसिस्टम गाइड
curved_labeled_navigation_bar कवर
पैकेज विवरणv2.0.6

curved_labeled_navigation_bar

दमदार एनिमेटिंग वक्र आकृति नेविगेशन बार। रंग, पृष्ठभूमि रंग, एनिमेशन कर्व, एनिमेशन अवधि समायोज्य।

AndroidiOSmacOSWindowsLinux
pub.dev API दस्तावेज़ सोर्स कोड
30-दिन डाउनलोड
2.3 हज़ार
लाइक
145
Pub अंक
160

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

flutter pub add curved_labeled_navigation_bar

पैकेज अवलोकन

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

फ्लटर ऐप्स के लिए एक दृश्य रूप से आकर्षक, एनिमेटिंग वक्र नेविगेशन बार। इसमें कस्टमाइज़ेबल रंगों, पृष्ठभूमि छाया, एनिमेशन कर्व और अवधि सेटिंग्स के साथ स्मूथ ट्रांज़िशन हैं। आकर्षक उपयोगकर्ता अनुभव और उपयोगकर्ता भागीदारी को प्राथमिकता देने वाले आधुनिक UI के लिए आदर्श। यह पैकेज Android, iOS, macOS, Windows और Linux जैसे कई प्लेटफॉर्म का समर्थन करता है, जिससे डिवाइसों के बीच एक समान डिज़ाइन सुनिश्चित होता है। इसकी गतिशील एनिमेशन उपयोगकर्ता अनुभव को बढ़ाती है जबकि कार्यान्वयन में सरलता बनाए रखती है।

उपयोग

  • आधुनिक ऐप इंटरफेस
  • मोबाइल और डेस्कटॉप एप्लिकेशन
  • इंटरैक्टिव यूआई घटक
  • कस्टम बॉटम नेविगेशन बार
  • सुधारित उपयोगकर्ता अनुभव

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

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

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

  • डिज़ाइन-केंद्रित विकासकर्ता
  • दृश्य आकर्षण की आवश्यकता वाले ऐप्स
  • UI/UX डिजाइनर्स
  • उन्नत विजेट्स की तलाश में Flutter शुरुआती लोग
  • कस्टम नेविगेशन की आवश्यकता वाले प्रोजेक्ट

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

  • कम शक्ति वाले उपकरणों पर प्रदर्शन प्रभावित हो सकता है
  • प्रवेश के लिए सावधानी से रंग विपरीतता की आवश्यकता होती है
  • एनिमेशन सेटिंग्स को डिवाइस पर टेस्ट करने की जरूरत है
  • निम्न नेविगेशन उपयोग केस के लिए सीमित
  • न्यूनतम डिज़ाइन के लिए उपयुक्त नहीं

मूल README

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

curved_labeled_navigation_bar

pub package

A Flutter package for easy implementation of curved navigation bar. This package is a fork of the original curved_navigation_bar from https://github.com/rafalbednarczuk/curved_navigation_bar with label for CurvedNavigationBarItem.

Label No Label
Gif Gif
Add dependency
dependencies:
  curved_labeled_navigation_bar: ^2.0.6 #latest version
Easy to use
Scaffold(
  bottomNavigationBar: CurvedNavigationBar(
    backgroundColor: Colors.blueAccent,
    items: [
      CurvedNavigationBarItem(
        child: Icon(Icons.home_outlined),
        label: 'Home',
      ),
      CurvedNavigationBarItem(
        child: Icon(Icons.search),
        label: 'Search',
      ),
      CurvedNavigationBarItem(
        child: Icon(Icons.chat_bubble_outline),
        label: 'Chat',
      ),
      CurvedNavigationBarItem(
        child: Icon(Icons.newspaper),
        label: 'Feed',
      ),
      CurvedNavigationBarItem(
        child: Icon(Icons.perm_identity),
        label: 'Personal',
      ),
    ],
    onTap: (index) {
      // Handle button tap
    },
  ),
  body: Container(color: Colors.blueAccent),
)
Attributes
CurvedNavigationBar
Attribute Description
items List of CurvedNavigationBarItem
index Index of NavigationBar, can be used to change current index or to set initial index
color Color of NavigationBar, default Colors.white
buttonBackgroundColor Background color of floating button, default same as color attribute
backgroundColor Color of NavigationBar's background, default Colors.blueAccent
onTap Function handling taps on items
letIndexChange Function which takes page index as argument and returns bool. If function returns false then page is not changed on button tap. It returns true by default
animationCurve Curves interpolating button change animation, default Curves.easeOut
animationDuration Duration of button change animation, default Duration(milliseconds: 600)
height Height of NavigationBar
maxWidth Allows to set the width of the navigation bar lower than the entire screen width by default
iconPadding Padding of icon in floating button
CurvedNavigationBarItem
Attribute Description
child Icon of CurvedNavigationBarItem
label Text of CurvedNavigationBarItem
labelStyle TextStyle for label
Change page programmatically
 // State class
  int _page = 0;
  GlobalKey<CurvedNavigationBarState> _bottomNavigationKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        bottomNavigationBar: CurvedNavigationBar(
          key: _bottomNavigationKey,
          items: [
            CurvedNavigationBarItem(
              child: Icon(Icons.home_outlined),
              label: 'Home',
            ),
            CurvedNavigationBarItem(
              child: Icon(Icons.search),
              label: 'Search',
            ),
            CurvedNavigationBarItem(
              child: Icon(Icons.chat_bubble_outline),
              label: 'Chat',
            ),
            CurvedNavigationBarItem(
              child: Icon(Icons.newspaper),
              label: 'Feed',
            ),
            CurvedNavigationBarItem(
              child: Icon(Icons.perm_identity),
              label: 'Personal',
            ),
          ],
          onTap: (index) {
            setState(() {
              _page = index;
            });
          },
        ),
        body: Container(
          color: Colors.blueAccent,
          child: Center(
            child: Column(
              children: <Widget>[
                Text(_page.toString(), textScaler: TextScaler.linear(10.0)),
                ElevatedButton(
                  child: Text('Go To Page of index 1'),
                  onPressed: () {
                    // Page change using state does the same as clicking index 1 navigation button
                    final CurvedNavigationBarState? navBarState =
                        _bottomNavigationKey.currentState;
                    navBarState?.setPage(1);
                  },
                )
              ],
            ),
          ),
        ),
    );
  }

श्रेणियाँ

बॉटम नेविगेशन बार

निर्भरताएँ

निर्भरता सूची 2 आइटम

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

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

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