पैकेज विवरणv2.0.0

circle_bottom_navigation

एक एनिमेटेड, सुंदर और कार्यात्मक बॉटम नेविगेशन बार आपके ऐप के लिए।

AndroidiOSWebmacOSWindowsLinux

pub.dev API दस्तावेज़ सोर्स कोड

30-दिन डाउनलोड: 88
लाइक: 37
Pub अंक: 130

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

flutter pub add circle_bottom_navigation

पैकेज अवलोकन

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

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

उपयोग

मोबाइल ऐप नेविगेशन
वेब एप्लिकेशन इंटरफ़ेस
क्रॉस-प्लेटफॉर्म फ्लटर एप्स
आधुनिक यूआई डिज़ाइन
कस्टमाइज़ करने योग्य बॉटम टैब्स

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

एनिमेटेड ट्रांजिशन्स
सर्कुलर लेआउट डिज़ाइन
कस्टमाइज़ेबल रंग और आइकन
सभी प्लेटफॉर्म पर अनुकूलित
pub के माध्यम से आसान एकीकरण
कई थीम्स का समर्थन

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

अद्वितीय UI घटकों की खोज करने वाले विकासकर्ता
डिज़ाइन-केंद्रित Flutter परियोजनाएँ
कई प्लेटफॉर्म के लिए लक्षित ऐप्स
इंटरैक्टिव उपयोगकर्ता अनुभव
न्यूनतम लेकिन गतिशील इंटरफेस

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

जटिल लेआउट के लिए अतिरिक्त स्टाइलिंग की आवश्यकता हो सकती है
मूल वास्तुकला की तुलना में सीमित कस्टमाइज़ेशन
बहुत सारे एनिमेशन के साथ संभावित प्रदर्शन प्रभाव
एक्सेसिबिलिटी-भारी एप्लिकेशन के लिए आदर्श नहीं
3-5 नेविगेशन आइटम वाले ऐप्स के लिए सबसे उपयुक्त

मूल README

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

Circle Bottom Navigation

demo

Getting started

Add the plugin:

dependencies:
  ...
  circle_bottom_navigation: ^2.0.0

Minimum usage

bottomNavigationBar: CircleBottomNavigation(
  initialSelection: currentPage,
  tabs: [
    TabData(icon: Icons.home),
    TabData(icon: Icons.history),
    TabData(icon: Icons.search),
    TabData(icon: Icons.alarm),
  ],
  onTabChangedListener: (index) => setState(() => currentPage = index),
)

Attributes

Required

initialSelection -> The number of page you want to start/navigate, receive a int
tabs -> List of TabData objects
onTabChangedListener -> Function to handle a tap on a tab, receives int position

Optional

circleColor -> Defaults to null, derives from Theme
activeIconColor -> Defaults to null, derives from Theme
inactiveIconColor -> Defaults to null, derives from Theme
textColor -> Defaults to null, derives from Theme
barBackgroundColor -> Defaults to null, derives from Theme
circleSize -> Defaults to 60.0, size of intern circle
barHeight -> Defaults to 60.0, height of bar
arcHeight -> Defaults to 70.0, height of external circle arc
arcWidth -> Defaults to 90.0, width of external circle arc
circleOutline -> Defaults to 10.0
shadowAllowance -> Defaults to 20.0, size of icon shadow
hasElevationShadows -> Defaults to true, define if bar have elevation shadows
blurShadowRadius -> Defaults to 8.0, size of bar shadow if hasElevationShadows is true
key -> Defaults to null

TabData

Required

icon -> Icon to be used for the TabData

Optional

title -> String to be used for the tab
onClick -> Function to be used when the circle itself is clicked, on an active tab
iconSize -> Size of icon displayed active and not active
fontSize -> Size of font in case of title has informed
fontWeight -> Weight of font in case of title has informed