flutter bottom_navigation_bar

تو این مقاله قصد دارم درمورد طرز استفاده از پکیج perforated_bottom_navigation_bar صحبت کنم. کد اصلی پروژه هم در ریپازیتوزی گیت هاب موجود هست . همانطور که در مثال زیر مشاهده میکنید چون منوی ما دارای یه حفره است و دکمه ای درون آن قرار دارد اسمشو گذاشتم perforated_bottom_navigation_bar بمعنای منوی حفره دار میباشد. این پکیج میتونه خیلی کاربردی باشه ولی در عین حال استفاده ازش بسیار ساده است. perforated_bottom_navigation_barهم اکنون که دارم این مقاله رو مینویسم نسخه 0.0.11 منتشر شده و مخصوص منویی با ۵ تب است !برای راحتی کار تو قسمت example تو یه مثال ساده توضیح دادم که دقیقا چگونه از پکیج استفاده کنیم و در اینجا هم همون مثالو یکم گسترش میدیم .این پکیج Scaffold ریترن میکنه و شما میتونید تمام مقدار هایی که میخواهید در برنامه داشته باشید رو به همین پکیج بدین .تو این مثال ما قصد داریم منویی با ۵ تب داشته باشیم ، هر تب ایکون مخصوص به خودشو داره ، هر تب صفحه مجزا و یک title جداگانه دارد . import'package:flutter/material.dart'; import'package:perforated_bottom_navigation_bar/perforated_bottom_navigation_bar.dart'; void main() { runApp(MyApp()); } class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { @override Widget build(BuildContext context) { return PerforatedBottomNavigationBar( appBarTitles: [ Text( 'setting Title', style: TextStyle(color: Colors.blue), ), Text( 'person Title', style: TextStyle(color: Colors.blue), ), Text( 'home Title', style: TextStyle(color: Colors.blue), ), Text( 'phone Title', style: TextStyle(color: Colors.blue), ), Text( 'location Title', style: TextStyle(color: Colors.blue), ), ], body: [ Center(child: Text('setting')), Center(child: Text('person')), Center(child: Text('home')), Center(child: Text('phone')), Center(child: Text('location')), ], icons: [ Icons.settings, Icons.person, Icons.home, Icons.phone, Icons.location_on, ], iconsTooltips: [ 'setting', 'person', 'home', 'phone', 'location', ], initialIndex: 2, iconColor: Colors.blueGrey, selectedIconColor: Colors.blue, buttonBackgroundColor: Colors.blueAccent, ); } } حالا مقادیری که این پکیج میتونه بگیره رو باهم مرور میکنیم : body : معادل همون body of scaffold هستش. که اینجا میشه لیستی از صفحاتی که میخواهیم نمایش بدیم. appBar : اگر میخواهید یک appBar برای تمام صفحات استفاده کنید میتونید ازین ارگومان استفاده کنید. اما اکر قصد دارید برای ه صفحه بصورت مجزا appBar ست کنین باید از appBarTitles استفاده کنین که لیستی از ویجت ها میگیره . مانند مثال بالا . Icons :لیستی از آیکون های منو . این لسیت فعلا میتونه ۵ ایتم داشته باشه و همون ایکون های اصلی منو هستش.initialIndex :ایندکس تب اولیه برنامه . مقدار پیش فرض ۲ میباشد یعنی تب وسط تب اولیه هستش . selectedIconSize :سایز ایکون تبی که انتخاب شده است. مقدار پیش فرض آن ۳۰ میباشد. unSelectedIconSize : سایز ایکون تبی که انتخاب نشده است. مقدار پیش فرض آن ۲۵ میباشد. iconColor :رنگ ایکون ها وقتی انتخاب نشده اند. selectedIconColor :رنگ ایکون ها وقتی انتخاب شده اند. drawer :همون ویجتی است که قراره بعنوان دراور نمایش داده شود .scaffoldKey :اگر قصد دارید یک key برای scaffold ست کنین میتونین ازین ارگومان استفاده کنین . bottomBarKey :اگر قصد دارید یک key برای bottomNavigationBar ست کنین میتونین ازین ارگومان استفاده کنین.iconsTooltips :لیستی از stringها که بعنوان tooltip هر تب استفاده میشه . buttonBarElevation :مقدار elevation دکمه وسط منو . buttonBackgroundColor :رنگ دکمه وسط منو . بقیه ارگومان ها کمتر استفاده میشوند ولی اگر قصد استفاده از اونهارو دارید میتونین به داکیومنت هایی که توی پروژه نوشتم نگاهی بندازین. امیدوارم این مطلب براتون مفید بوده باشه و خوشحال میشم نظرات و پیشنهاداتتونو بامن در میون بزارید . دیگر مقاله های من راجع فلاتر در ویرگول : استفاده از Flutter با docker ، بدون AndroidStudioگرفتن خروجی Flutter در Gitlab Ci\Cl