آموزش پیاده سازی BottomNavigationBar در فلاتر
در بسیاری از اپ هایی که منتشر می شود شاهد استفاده از BottomNavigationBar هستیم که اکثرا در قسمت پایین اپ و انتخاب چندین آیتم را در اختیار کاربر قرار میدهد امروز میخواهیم نحوه ی استفاده از آن در فلاتر را فرا بگیریم.
این ویجت معمولا به عنوان پارامتر bottomNavigationBar در Scaffold استفاده می شود که در پایین صفحه نمایش داده می شود پس بی وقفه صفحه ای را بسازیم که نحوه ساخت آن را نمایش می دهد.
import "package:flutter/material.dart";
import 'package:flutter_widgets/const/_const.dart';
class BottomNavBarPage extends StatefulWidget {
@override
_BottomNavBarState createState() => _BottomNavBarState();
}
class _BottomNavBarState extends State<BottomNavBarPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(PageName.BOTTOM_NAV_BAR),
),
body: Text("Body"),
bottomNavigationBar: Container(
color: RED,
child: Text("this is bottom"),
),
);
}
}
در کد بالا در پارامتر bottomNavigationBar از ویجتی دلخواه به عنوان مثال فرزند Container استفاده کردیم که خروجی آن به صورت زیر است البته این شکل مرسوم آن در اپلیکیشن ها نیست و در ادامه به ساخت آن خواهیم پرداخت.
پیاده سازی BottomNavigationBar
اما اصل مطلب استفاده از ویجت BottomNavigationBar است که در کد زیر پیاده سازی آن را مشاهده می کنید.
Widget _bottomNormal()=> BottomNavigationBar(
items: [
BottomNavigationBarItem(
backgroundColor: BLUE_DEEP,
icon: Icon(
Icons.home,
size: 30,
),
title: Text(
"Home",
style: TextStyle(fontSize: 30),
),
),
BottomNavigationBarItem(
backgroundColor: BLUE_DEEP,
icon: Icon(
Icons.assignment_ind,
size: 30,
),
title: Text(
"User",
style: TextStyle(fontSize: 30),
),
)
],
);
در کد بالا دو عدد آیتم برای این ویجت باBottomNavigationBarItem ایجاد کردیم و پارامتر هایی مثل رنگ پشت زمینه , عنوان و ایکون نیز به آن دادیم که خروجی آن را می توانید در زیر مشاهده کنید.
کمی فراتر
خوب نیاز داریم که آیتم انتخاب شده رنگی متفاوت نسبت به دیگری داشته باشد و این کار با activeIcon امکان پذیر است به کد زیر دقت کنید.
Widget _itemIconOnly() => BottomNavigationBar(
items: [
BottomNavigationBarItem(
backgroundColor: BLUE_LIGHT,
icon: Icon(
Icons.home,
size: 30,
color: TEXT_BLACK_LIGHT,
),
title: Text(
"Home",
style: TextStyle(fontSize: 30, color: RED),
),
activeIcon: Icon(
Icons.home,
size: 30,
color: RED,
),
),
BottomNavigationBarItem(
backgroundColor: BLUE_DEEP,
icon: Icon(
Icons.book,
size: 30,
color: TEXT_BLACK_LIGHT,
),
title: Text(
"Articles",
style: TextStyle(fontSize: 30, color: TEXT_BLACK_LIGHT),
),
),
BottomNavigationBarItem(
backgroundColor: BLUE_DEEP,
icon: Icon(
Icons.assignment_ind,
size: 30,
color: TEXT_BLACK_LIGHT,
),
title: Text(
"User",
style: TextStyle(fontSize: 30, color: TEXT_BLACK_LIGHT),
),
),
],
);
درکد بالا که شامل ۳ آیتم است که آیتم اول پیش فرض به عنوان آیتم مورد نظر انتخاب شده است و با استفاده از color: RED رنگ انتخابی آن قرمز می باشد .
نکته ی مورد نظر اینکه برای تغییر پشت زمینه به رنگ داده شده در کد باید پارامتر type به BottomNavigationBarType.shifting مقدار دهی شده باشد .
کلیک روی آیتم ها
در خروجی قسمت قبل هنگام کلیک روی آیتم ها هیچ اتفاقی نمی افتد و آیتم مورد نظر تغییر نمی کند خوب برای حل این مشکل از پارامتر onTap در این ویجت استفاده می کنیم اما قبل از آن کد اول آموزش یعنی قسمت body را به شکل زیر موارد جدید را اضاف کنید تا بتونیم تغییر آیتم ها را با تغییر متن متوجه شویم .
body: Container(
alignment: Alignment.center,
child: Text(
contents,
style: TextStyle(color: RED, fontSize: 40),
),
),
مقدار content که هنگام تغییر آیتم ها تغییر میکند و لازم است این متغیر را در بالا تعریف کنیم و اما اصل ماجرا یعنی تعریف پارامتر onTab
onTap: (index) {
setState(() {
_curIndex = index;
switch (_curIndex) {
case 0:
contents = "Home";
break;
case 1:
contents = "Articles";
break;
case 2:
contents = "User";
break;
}
});
},
در کد بالا متغیرcurIndex_ که مقدار پیش فرض آن را ۰ بدهید و آن را تعریف کنید سپس با استفاده از آن در این کد می توانیم عکس العمل کاربر هنگام کلیک روی آیتم های مختلف را مدیریت کنیم که در این جا متغیر contents را مقدار دهی می کنیم .
اما در نهایت مطالب بالا را در کد زیر ترکیب می کنیم .
Widget _indexBottom() => BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(
Icons.home,
size: 30,
color: TEXT_BLACK_LIGHT,
),
title: Text(
"Home",
style: TextStyle(
fontSize: 30, color: _curIndex == 0 ? RED : TEXT_BLACK_LIGHT),
),
activeIcon: Icon(
Icons.home,
size: 30,
color: RED,
),
),
BottomNavigationBarItem(
icon: Icon(
Icons.book,
size: 30,
color: TEXT_BLACK_LIGHT,
),
title: Text(
"Articles",
style: TextStyle(
fontSize: 30, color: _curIndex == 1 ? RED : TEXT_BLACK_LIGHT),
),
activeIcon: Icon(
Icons.book,
size: 30,
color: RED,
),
),
BottomNavigationBarItem(
icon: Icon(
Icons.assignment_ind,
size: 30,
color: TEXT_BLACK_LIGHT,
),
title: Text(
"User",
style: TextStyle(
fontSize: 30, color: _curIndex == 2 ? RED : TEXT_BLACK_LIGHT),
),
activeIcon: Icon(
Icons.assignment_ind,
size: 30,
color: RED,
),
),
],
type: BottomNavigationBarType.fixed,
currentIndex: _curIndex,
onTap: (index) {
setState(() {
_curIndex = index;
switch (_curIndex) {
case 0:
contents = "Home";
break;
case 1:
contents = "Articles";
break;
case 2:
contents = "User";
break;
}
});
},
);
البته می تونید از پکیج های موجود برای این ویجت به نام fancybottomnavigation نیز استفاده کنید و طراحی لذت بخش تری را ایجاد کنید
در نهایت امیدوارم از آموزش این ویجت در فلاتر لذت برده باشید .
درباره پژمان
یک قطره از دریای بیکران فلاتر عاشق یادگیری به خصوص در حوزه برنامه نویسی
نوشته های بیشتر از پژمانمطالب زیر را حتما مطالعه کنید
آموزش پیاده سازی لینت Lint در برنامه نویسی فلاتر
آموزش الگوی تزریق وابستگی در فلاتر Dependency Injection
کتاب های آموزش برنامه نویسی فلاتر + دانلود PDF
آموزش نصب فلاتر و رفع خطاهای رایج ساخت پروژه + ویدیو
آموزش استفاده از نقشه در فلاتر
آموزش ساخت Navigation Drawer در فلاتر
2 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
سلام وقت بخیر چطوری میتونم باتن نویگیشن بارو تو کل صفحات استفاده کنم منظور میخوام همه جا نشون بده
درود بر شما دوست عزیز و علاقه مند به فلاتر
خوب شما کافی است کلاس هایی که از stateful یا stateless ویجت Extend می شوند را ایجاد سپس در تعریف کلیک روی آیتم های نویگیشن بارو این کلاس ها را فراخوانی کنید
اگر نکته ای از این سوال باقی مانده که جواب داده نشده یا سوال دیگه ای بود در خدمتم