TabBars और ड्रॉअर
एकाधिक दृश्यों के लिए TabBars और पार्श्व नेविगेशन मेनू के लिए ड्रॉअर जैसे सामान्य नेविगेशन पैटर्न लागू करें।
TabBars और ड्रॉअर, CoddyKit पर Flutter मोबाइल विकास का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Flutter मोबाइल विकास सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Flutter मोबाइल विकास पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
नेविगेशन पैटर्न का परिचय
Flutter ऐप नेविगेशन के लिए शक्तिशाली पैटर्न उपलब्ध कराता है। आज हम दो सामान्य पैटर्न देखेंगे: TabBars और Drawers।
ये विजेट उपयोगकर्ताओं को आपके ऐप के अलग-अलग अनुभागों के बीच सहज और सहज-बोध तरीके से नेविगेट करने में मदद करते हैं।
- संबंधित दृश्यों के बीच बदलने के लिए TabBars उपयोगी हैं।
- वैश्विक नेविगेशन या सेटिंग्स के लिए Drawers एक साइड मेनू प्रदान करते हैं।
TabBars क्या हैं?
TabBar टैब की एक क्षैतिज पंक्ति होती है, जो अक्सर स्क्रीन के ऊपर या नीचे दिखाई देती है। प्रत्येक टैब सामग्री के अलग दृश्य या श्रेणी को दर्शाता है।
जब उपयोगकर्ता किसी टैब पर टैप करता है, तो वर्तमान स्क्रीन छोड़े बिना उसके नीचे की सामग्री बदल जाती है।
मूल TabBar बनाना
टैब का उपयोग करने के लिए आप अक्सर अपने Scaffold को DefaultTabController से घेरते हैं। यह controller चुने गए टैब को प्रबंधित करता है।
इसके बाद, AppBar की bottom प्रॉपर्टी के अंदर या BottomNavigationBar के रूप में TabBar विजेट रखें।
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: DefaultTabController(
length: 3, // Number of tabs
child: Scaffold(
appBar: AppBar(
title: const Text('My Tab App'),
bottom: const TabBar(
tabs: [
Tab(icon: Icon(Icons.home), text: 'Home'),
Tab(icon: Icon(Icons.settings), text: 'Settings'),
Tab(icon: Icon(Icons.info), text: 'Info'),
],
),
),
body: const TabBarView(
children: [
Center(child: Text('Home Content')),
Center(child: Text('Settings Content')),
Center(child: Text('Info Content')),
],
),
),
),
);
}
}TabBarView का प्रयोग
TabBarView विजेट TabBar के साथ मिलकर काम करता है। यह वर्तमान में चुने गए टैब से संबंधित सामग्री प्रदर्शित करता है।
सुनिश्चित कीजिए कि TabBarView में children की संख्या आपके DefaultTabController की length और Tab विजेट की संख्या के बराबर हो।
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: DefaultTabController(
length: 3, // Must match the number of tabs
child: Scaffold(
appBar: AppBar(
title: const Text('Tab Views'),
bottom: const TabBar(
tabs: [
Tab(text: 'Explore'),
Tab(text: 'Favorites'),
Tab(text: 'Profile'),
],
),
),
body: TabBarView( // Content for each tab
children: [
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Icon(Icons.explore, size: 80, color: Colors.blue),
Text('Explore new content!', style: TextStyle(fontSize: 20)),
],
),
),
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Icon(Icons.favorite, size: 80, color: Colors.red),
Text('Your favorite items.', style: TextStyle(fontSize: 20)),
],
),
),
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Icon(Icons.person, size: 80, color: Colors.green),
Text('Your user profile.', style: TextStyle(fontSize: 20)),
],
),
),
],
),
),
),
);
}
}अपने टैब की शैली बदलना
आप अपने TabBar का रूप बदल सकते हैं। उदाहरण के लिए, रंग, संकेतक की शैलियाँ या लेबल की शैलियाँ बदली जा सकती हैं।
indicatorColor और labelColor प्रॉपर्टी आपके ऐप की थीम से मेल कराने के सामान्य तरीके हैं।
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: DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
title: const Text('Custom Tabs'),
bottom: TabBar(
indicatorColor: Colors.yellowAccent, // Custom indicator color
labelColor: Colors.white, // Color for selected tab
unselectedLabelColor: Colors.grey[400], // Color for unselected tabs
tabs: const [
Tab(icon: Icon(Icons.call), text: 'Calls'),
Tab(icon: Icon(Icons.chat), text: 'Chats'),
],
),
),
body: const TabBarView(
children: [
Center(child: Text('Calls Log')),
Center(child: Text('Chat Messages')),
],
),
),
),
);
}
}Drawer क्या है?
Drawer एक पैनल होता है जो स्क्रीन के किनारे से, आमतौर पर बाईं ओर से, बाहर की ओर खिसकता है। इसका उपयोग अक्सर मुख्य नेविगेशन लिंक या वैश्विक सेटिंग्स के लिए किया जाता है।
ऐसे ऐप के लिए Drawers बहुत उपयोगी हैं जिनमें कई अनुभाग हों और जो TabBar या BottomNavigationBar में समा न सकें।
साइड Drawer जोड़ना
Drawer जोड़ने के लिए अपने Scaffold के child के रूप में Drawer विजेट शामिल कीजिए। Flutter आपके AppBar में अपने-आप एक मेनू आइकन जोड़ देता है।
Drawer के अंदर, आप आमतौर पर नेविगेशन आइटम दर्शाने वाले कई ListTile विजेट रखने के लिए ListView का उपयोग करेंगे।
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('My Drawer App'),
),
drawer: Drawer( // The Drawer widget
child: ListView(
padding: EdgeInsets.zero, // Remove padding
children: <Widget>[
const DrawerHeader( // Top part of the drawer
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text(
'App Menu',
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
),
),
ListTile( // A navigation item
leading: const Icon(Icons.message),
title: const Text('Messages'),
onTap: () {
// Handle tap
Navigator.pop(context); // Close the drawer
},
),
ListTile(
leading: const Icon(Icons.account_circle),
title: const Text('Profile'),
onTap: () {
// Handle tap
Navigator.pop(context);
},
),
ListTile(
leading: const Icon(Icons.settings),
title: const Text('Settings'),
onTap: () {
// Handle tap
Navigator.pop(context);
},
),
],
),
),
body: const Center(
child: Text('Pull from left to open drawer!'),
),
),
);
}
}Drawer टैप को संभालना
जब उपयोगकर्ता Drawer में किसी आइटम पर टैप करता है, तो आप आमतौर पर कोई कार्य करना चाहते हैं, जैसे नई स्क्रीन पर जाना या सामग्री अपडेट करना।
आइटम पर टैप किए जाने के बाद Drawer बंद करने और सहज उपयोगकर्ता अनुभव देने के लिए Navigator.pop(context) कॉल करना याद रखें।
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('Drawer Actions'),
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
const DrawerHeader(
decoration: BoxDecoration(color: Colors.green),
child: Text('Navigation', style: TextStyle(color: Colors.white)),
),
ListTile(
leading: const Icon(Icons.home),
title: const Text('Go Home'),
onTap: () {
// Close drawer, then navigate (or just close if already on home)
Navigator.pop(context);
// Example: Navigator.push(context, MaterialPageRoute(builder: (context) => HomeScreen()));
},
),
ListTile(
leading: const Icon(Icons.bookmark),
title: const Text('View Bookmarks'),
onTap: () {
Navigator.pop(context); // Close drawer
// Show a snackbar as an example action
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Viewing Bookmarks!'))
);
},
),
],
),
),
body: const Center(
child: Text('Try opening the drawer and tapping an item.'),
),
),
);
}
}अपने Drawer को अनुकूलित करना
Drawers को बहुत अधिक अनुकूलित किया जा सकता है। आप उपयोगकर्ता की प्रोफ़ाइल जानकारी, ऐप संस्करण या खोज बार भी जोड़ सकते हैं।
- उपयोगकर्ता की जानकारी वाला पहले से बना हेडर पाने के लिए
UserAccountsDrawerHeaderका उपयोग कीजिए। - अव्यवस्था से बचने के लिए आइटम की संख्या सीमित रखिए।
- डिवाइडर का उपयोग करके संबंधित आइटम को तार्किक रूप से समूहित कीजिए।
TabBar बनाम Drawer
निम्नलिखित में से कौन-सी स्थिति Flutter TabBar के उपयोग के लिए सबसे उपयुक्त है?
TabBars और Drawers का पुनरावलोकन
बहुत बढ़िया! आपने दो आवश्यक नेविगेशन पैटर्न लागू करना सीखा है:
DefaultTabController,TabBarऔरTabBarViewका उपयोग करके संबंधित दृश्यों के बीच बदलने के लिए TabBars।Drawerविजेट औरListTiles का उपयोग करके साइड नेविगेशन मेनू के लिए Drawers।
अपने ऐप की जटिलता और उपयोगकर्ता के प्रवाह के आधार पर सही पैटर्न चुनिए। अधिक सहज UI बनाने के लिए सीखते रहिए!
एआई शिक्षक के साथ Dart सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 22
- पाठ
- 88
अक्सर पूछे जाने वाले प्रश्न
क्या “TabBars और ड्रॉअर” पाठ निःशुल्क है?
हाँ — Flutter मोबाइल विकास अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “TabBars और ड्रॉअर” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Flutter मोबाइल विकास पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“TabBars और ड्रॉअर” में मैं क्या सीखूँगा?
एकाधिक दृश्यों के लिए TabBars और पार्श्व नेविगेशन मेनू के लिए ड्रॉअर जैसे सामान्य नेविगेशन पैटर्न लागू करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Flutter मोबाइल विकास का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Flutter मोबाइल विकास शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Flutter मोबाइल विकास शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।
“TabBars और ड्रॉअर” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Flutter मोबाइल विकास पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Flutter मोबाइल विकास पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।