شريط التنقل السفلي في تطبيقات فلاتر BottomNavigationBar

“استكشاف BottomNavigationBar في Flutter: إنشاء شريط تنقل سفلي لتطبيقاتك”

مقدمة

 درسنا حول BottomNavigationBar widget في تطبيقات Flutter. تُعتبر BottomNavigationBar أداة مهمة في تطوير التطبيقات التي تحتوي على عدة صفحات فرعية تحتاج إلى التنقل بينها بسهولة.مما يتيح للمستخدمين الوصول السريع إلى مختلف أجزاء التطبيق وتصفحها بسهولة من خلال الشريط السفلي.

في هذا الدرس، سنتعرف على BottomNavigationBar widget في Flutter وكيفية استخدامها لإنشاء شريط تنقل سفلي يتيح للمستخدمين التنقل بين الصفحات المختلفة. سنقوم بدراسة الخصائص المختلفة المتاحة لتخصيص شكل وسلوك BottomNavigationBar وكيفية استخدامها بشكل فعال لتحقيق تجربة مستخدم ممتازة.

هذا الدرس مناسب للمطورين الذين يرغبون في تعلم كيفية استخدام BottomNavigationBar widget في تطبيقات Flutter وتخصيصها وفقًا لاحتياجات التطبيق الخاص بهم. دعونا نبدأ

في هذا الدرس سنقوم بانشاء عدة تطبيقات مع شرح الأكواد بالتفضيل كما سنقدم التفرع الشجري الهرمي لكل تطبيق 

ما هو شريط التنقل السفلي في تطبيقات فلاتر ؟

 BottomNavigationBar widget in flutter

BottomNavigationBar هو عنصر واجهة مستخدم في Flutter يستخدم لعرض شريط تنقل في أسفل الشاشة. يمكن استخدامه لتنظيم عدة عناصر تنقل بين الشاشات المختلفة في التطبيق.

تتألف BottomNavigationBar من عدة عناصر أساسية:

بنود التنقل (Navigation Items): تمثل الشاشات المختلفة التي يمكن للمستخدم التنقل بينها.

يمكننا تخصيص عدد البنود ومحتواها وأيقوناتها ونصوصها.

الفهرس الحالي (Current Index): يوضح البند الحالي الذي يتم تحديده بواسطة المستخدم في شريط التنقل.

استجابة النقر (On Tap Response): يتم تنفيذ إجراء محدد عندما يقوم المستخدم بالنقر على بند معين في BottomNavigationBar.

يمكنك استخدام BottomNavigationBar في تطبيقك ببساطة عن طريق تضمينه في Scaffold widget الخاص بالصفحة التي تريد تطبيقه فيها. ومن خلال تحديد بنود التنقل والتفاعل مع النقرات، يمكننا إنشاء تجربة تنقل سلسة ةمرنى للمستخدمين في تطبيقك بناءً على متطلباتك الخاصة.

تطبيق 1:خطوة بخطوة كيف نستخدم BottomNavigationBar widget in flutter

هناك خطوات بسيطة لاستخدام BottomNavigationBar widget في تطبيق Flutter:

إضافة الاعتمادية (Dependency):
تأكد من أنك قمت بإضافة الاعتمادية على Flutter SDK في ملف pubspec.yaml الخاص بتطبيقك. يجب أن تظهر هذه السطور في الملف:

بوضع الكود التالي في ملف pubspec.yaml

flutter:
sdk: flutter

استيراد المكتبات (Import Libraries):
في ملف الـ Dart الذي تستخدمه، نقم بإضافة استيراد المكتبات التالية:

import 'package:flutter/material.dart';

إنشاء قائمة الصفحات (Create Pages List):
نقم بإنشاء قائمة بالصفحات التي نريد  التنقل بينها BottomNavigationBar بها. على سبيل المثال:

List<Widget> pages = [
Page1(),
Page2(),
Page3(),
];

إنشاء BottomNavigationBar:
في داخل Scaffold الخاص بصفحتنا، نضف BottomNavigationBar ونقم بتحديد بنود التنقل والاستجابة للنقرات:

int _selectedIndex = 0; // تحديد الصفحة الافتراضية
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Bottom Navigation Example'),
),
body: pages[_selectedIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: _selectedIndex,
onTap: (int index) {
setState(() {
_selectedIndex = index;
});
},
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: 'Search',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),
],
),
);
}

في هذا المثال، يتم عرض BottomNavigationBar مع ثلاث بنود (صفحات): Home، Search، وProfile.

عندما يقوم المستخدم بالنقر على أي بند، يتم تحديث _selectedIndex وبالتالي تغيير الصفحة التي يتم عرضها في body.

الكود النهائي:

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Bottom Navigation Example',
home: YourHomePage(),
);
}
}

List<Widget> pages = [
PlaceholderWidget(Colors.white, 'Page 1'),
PlaceholderWidget(Colors.blue, 'Page 2'),
PlaceholderWidget(Colors.green, 'Page 3'),
];

class YourHomePage extends StatefulWidget {
@override
_YourHomePageState createState() => _YourHomePageState();
}

class _YourHomePageState extends State<YourHomePage> {
int _selectedIndex = 0;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Bottom Navigation Example'),
),
body: pages[_selectedIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: _selectedIndex,
onTap: (int index) {
setState(() {
_selectedIndex = index;
});
},
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: 'Search',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),
],
),
);
}
}

class PlaceholderWidget extends StatelessWidget {
final Color color;
final String title;

PlaceholderWidget(this.color, this.title);

@override
Widget build(BuildContext context) {
return Container(
color: color,
child: Center(
child: Text(
title,
style: TextStyle(fontSize: 24),
),
),
);
}
}

تشغيل التطبيق:
نقم بتشغيل  التطبيق على جهاز الاختبار الخاص بنا لرؤية BottomNavigationBar واختبار التنقل بين الصفحات.

بهذه الطريقة، يمكنك استخدام BottomNavigationBar widget في تطبيق Flutter الخاص بك لتنظيم التنقل بين الصفحات بشكل مريح وفعال.

 شرح الكود :

int _selectedIndex = 0;: تعريف متغير _selectedIndex لتخزين الفهرس الحالي للصفحة المحددة في BottomNavigationBar، وتعيينه إلى الصفحة الافتراضية الأولى.

@override Widget build(BuildContext context) {: تعريف واجهة الاستخدام للصفحة بواسطة الدالة build()، والتي يجب تنفيذها في كل عنصر واجهة مستخدم في Flutter.

return Scaffold(…): إرجاع عنصر Scaffold الذي يمثل هيكل الصفحة بالكامل.

appBar: AppBar(…): تعريف شريط التطبيق العلوي باستخدام عنصر AppBar، والذي يعرض عنوان التطبيق.

body: pages[_selectedIndex],: تعيين جسم الصفحة ليكون الصفحة المحددة حالياً والتي تتغير وفقاً لقيمة _selectedIndex.

bottomNavigationBar: BottomNavigationBar(…): إضافة عنصر BottomNavigationBar لتمثيل شريط التنقل في الأسفل.

currentIndex: _selectedIndex,: تحديد البند الحالي في BottomNavigationBar بواسطة _selectedIndex.

onTap: (int index) { … }: تعيين دالة تستجيب للنقرات على البنود في BottomNavigationBar، حيث يتم تحديث _selectedIndex ليكون قيمة البند المنقر.

items: […]: تعريف البنود في BottomNavigationBar، حيث يتم تحديد كل بند برمز أيقونة وعنوان نصي.

setState(() { _selectedIndex = index; });: تحديث الواجهة بشكل ديناميكي لتغيير الفهرس الحالي _selectedIndex إلى البند الذي تم النقر عليه في BottomNavigationBar.

هذه الأسطر تشكل الجزء الأساسي من استخدام BottomNavigationBar في تطبيق Flutter، حيث يتم تحديث الواجهة بالبند المحدد في BottomNavigationBar عند كل نقرة، وبالتالي يتم تغيير الصفحة المعروضة للمستخدم بشكل ديناميكي.

شجرة الويدجيتات لهذا التطبيق

شجرة الويدجيتات لتطبيق يستخدم BottomNavigationBar:

- MaterialApp
  - Scaffold
    - AppBar
    - Body (Page)
      - Page1 (Widget)
      - Page2 (Widget)
      - Page3 (Widget)
    - BottomNavigationBar
      - BottomNavigationBarItem 1
      - BottomNavigationBarItem 2
      - BottomNavigationBarItem 3

توضح هذه الشجرة التيار الرئيسي للتطبيق . MaterialApp يكون الاحتواء الرئيسي للتطبيق، يحتوي Scaffold على بنية الصفحة بأكملها، بما في ذلك AppBar و Body و BottomNavigationBar.

الجسم (Body) يتكون من عدة صفحات (Pages) التي يمكن تبديلها باستخدام BottomNavigationBar.

تطبيق 2: تطبيق على استخدام BottomNavigationBar widget in flutter

سأقدم لك تطبيقًا بسيطًا يستخدم BottomNavigationBar في Flutter.

في هذا التطبيق، سنقوم بإنشاء ثلاث صفحات تعرض محتوى مختلف، وسنستخدم BottomNavigationBar للتنقل بين هذه الصفحات.

نقم بإنشاء ملف جديد بالاسم main.dart وأضف الكود التالي:

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Bottom Navigation Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}

class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
int _selectedIndex = 0;

static const List<Widget> _pages = <Widget>[
Page1(),
Page2(),
Page3(),
];

void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Bottom Navigation Demo'),
),
body: _pages[_selectedIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: _selectedIndex,
onTap: _onItemTapped,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: 'Search',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),
],
),
);
}
}

class Page1 extends StatelessWidget {
const Page1({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Center(
child: Text('Home Page'),
);
}
}

class Page2 extends StatelessWidget {
const Page2({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Center(
child: Text('Search Page'),
);
}
}

class Page3 extends StatelessWidget {
const Page3({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Center(
child: Text('Profile Page'),
);
}
}

هذا التطبيق يتكون من صفحة رئيسية (MyHomePage) تحتوي على BottomNavigationBar وعدة صفحات فرعية (Page1، Page2، Page3)

تم استخدام الأيقونات والعناوين لتمثيل كل بند في BottomNavigationBar. عند النقر على أي بند، يتم تغيير الصفحة المعروضة وفقًا للفهرس الحالي في BottomNavigationBar.

شرح التطبيق في أسطر منفصلة:

هذا التطبيق هو تطبيق بسيط يستخدم BottomNavigationBar في Flutter.

البنية العامة للتطبيق:

يتكون التطبيق من صفحة رئيسية (MyHomePage) وثلاث صفحات فرعية (Page1، Page2، Page3).
تم استخدام BottomNavigationBar لتمثيل شريط التنقل في الأسفل.

BottomNavigationBar:

يتكون BottomNavigationBar من ثلاث بنود، كل بند يمثل صفحة فرعية في التطبيق.
تم تخصيص كل بند بأيقونة وعنوان نصي مناسب.

التنقل بين الصفحات:

عند النقر على أي بند في BottomNavigationBar، يتم تحديث الصفحة المعروضة بواسطة _selectedIndex في MyHomePage.
تتغير الصفحة المعروضة لتكون الصفحة المطابقة للبند المحدد.

الصفحات الفرعية:

كل صفحة فرعية تحتوي على محتوى مختلف، تم عرضه بشكل بسيط هنا باستخدام عنصر Text.
التنفيذ العام:

يتم تنفيذ التطبيق عبر الأساليب القياسية في Flutter مثل ()main و ()build  لبناء وتشغيل التطبيق.
هذا التطبيق يمثل مثالًا بسيطًا على كيفية استخدام BottomNavigationBar لتنظيم التنقل بين الصفحات في تطبيق Flutter.

شجرة الويدجيتات لهذا التطبيق:

شجرة الويدجتات لهذا التطبيق تكون كالتالي:

- MaterialApp
  - MyHomePage
    - Scaffold
      - AppBar
      - body
        - Page1
          - Center
            - Text
        - Page2
          - Center
            - Text
        - Page3
          - Center
            - Text
      - BottomNavigationBar
        - BottomNavigationBarItem 1
        - BottomNavigationBarItem 2
        - BottomNavigationBarItem 3

توضح هذه الشجرة الهيكلية للتطبيق التركيب الرئيسي للويدجتات. MaterialApp يكون الاحتواء الرئيسي للتطبيق، يحتوي MyHomePage على كل عناصر الواجهة مثل AppBar و body و BottomNavigationBar. الجسم (body) يتضمن ثلاث صفحات فرعية تظهر عند تحديد كل بند في BottomNavigationBar.

خصائص ومكونات التطبيق  

BottomNavigationBar widget in flutter

عنصر التطبيق الذي يستخدم BottomNavigationBar widget في Flutter يتضمن العديد من الخصائص والمكونات. إليك بعضها:

MaterialApp: هو العنصر الجذري للتطبيق ويوفر سمات التصميم الموادي للتطبيق.

Scaffold: يمثل الهيكل الأساسي للصفحة ويتضمن AppBar والجسم و BottomNavigationBar.

AppBar: شريط عنوان التطبيق الذي يعرض عنوان التطبيق في الأعلى.

Body: جسم الصفحة الذي يعرض محتوى الصفحة الحالية المحددة من قبل BottomNavigationBar.

BottomNavigationBar: عنصر التنقل الذي يعرض بنود التنقل في الأسفل للتبديل بين الصفحات.

BottomNavigationBarItem: كل بند في شريط التنقل يمثل صفحة معينة ويتضمن أيقونة ونص.

صفحات فرعية (Pages): تمثل الصفحات التي يتم التنقل بينها باستخدام BottomNavigationBar. يتم عرض محتوى كل صفحة في جسم الصفحة (Body) عندما يتم تحديدها.

متغير التحديد (_selectedIndex): يتم استخدامه لتتبع الصفحة المحددة حاليًا من قبل BottomNavigationBar.

دالة التحديث (_onItemTapped): تستخدم لتحديث الصفحة المحددة عند النقر على بند في BottomNavigationBar.

هذه هي بعض الخصائص والمكونات الرئيسية التي يمكن أن تشملها التطبيقات التي تستخدم BottomNavigationBar widget في Flutter.

خصائص ومكونات شريط التنقل لسفلي في تطبيقات فلاتر

BottomNavigationBar widget in flutter

BottomNavigationBar widget في Flutter يحتوي على العديد من الخصائص والمكونات التي تمكنك من تخصيص شريط التنقل في التطبيق. إليك بعض الخصائص الرئيسية والمكونات:

currentIndex: يحدد الفهرس (البند) الحالي المحدد في BottomNavigationBar.

onTap: يتم استدعاؤه عند النقر على أحد بنود BottomNavigationBar، ويمكن استخدامه لتحديث الواجهة بما يتناسب مع البند المحدد.

items: قائمة من BottomNavigationBarItem التي تمثل بنود شريط التنقل.

BottomNavigationBarItem: يمثل كل بند في شريط التنقل ويحتوي على الرمز (أيقونة) والنص المرافق.

selectedItemColor: لون البند المحدد حالياً.

unselectedItemColor: لون البنود غير المحددة.

selectedLabelStyle: نمط النص للبند المحدد.

unselectedLabelStyle: نمط النص للبنود غير المحددة.

backgroundColor: لون خلفية BottomNavigationBar.

elevation: ارتفاع BottomNavigationBar.

type: نوع BottomNavigationBar، مثل BottomNavigationBarType.fixed أو BottomNavigationBarType.shifting.

fixedColor: لون البند في حالة النوع المحدد.

showSelectedLabels: تحديد ما إذا كان يجب عرض نص البند المحدد أم لا.

showUnselectedLabels: تحديد ما إذا كان يجب عرض نص البنود غير المحددة أم لا.

هذه بعض الخصائص الرئيسية والمكونات التي تأتي مع BottomNavigationBar widget في Flutter والتي يمكنك استخدامها لتخصيص شريط التنقل في تطبيقك.

iconSize: حجم الأيقونات في بنود شريط التنقل.

selectedFontSize: حجم النص للبند المحدد.

unselectedFontSize: حجم النص للبنود غير المحددة.

selectedItemBorderColor: لون حدود البند المحدد.

selectedItemBackgroundColor: لون خلفية البند المحدد.

unselectedItemBackgroundColor: لون خلفية البنود غير المحددة.

mouseCursor: المؤشر عند تحويم الماوس فوق البنود.

enableFeedback: تفعيل أو تعطيل التغذية اللمسية عند النقر.

selectedIconTheme: تخصيص نمط الأيقونة للبند المحدد.

unselectedIconTheme: تخصيص نمط الأيقونة للبنود غير المحددة.

selectedItemMargin: هوامش البند المحدد.

unselectedItemMargin: هوامش البنود غير المحددة.

selectedItemShape: شكل البند المحدد.

unselectedItemShape: شكل البنود غير المحددة.

selectedItemIconColor: لون أيقونة البند المحدد.

unselectedItemIconColor: لون أيقونة البنود غير المحددة.

تلك هي بعض الخصائص الإضافية التي يمكنك استخدامها مع BottomNavigationBar في Flutter لتخصيص مظهر وسلوك شريط التنقل بشكل أكبر وفقًا لاحتياجات تطبيقك.

تطبيق 3:تطبيق شامل على  خصائص BottomNavigationBar widget in flutter

سنقوم بإنشاء تطبيقا شاملا يستخدم BottomNavigationBar widget في Flutter مع استخدام العديد من الخصائص المتاحة. في هذا التطبيق، سنقوم بعرض صفحات فرعية مختلفة عند النقر على كل بند في BottomNavigationBar، وسنقوم بتخصيص بعض الخصائص لشريط التنقل. سأقوم أولاً بإنشاء صفحات فرعية بسيطة، ثم سأنشئ التطبيق الرئيسي. هيا بنا:

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Bottom Navigation Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
bottomNavigationBarTheme: BottomNavigationBarThemeData(
backgroundColor: Colors.grey[800], // Background color of BottomNavigationBar
selectedItemColor: Colors.blue, // Color of the selected item
unselectedItemColor: Colors.white, // Color of unselected items
selectedLabelStyle: TextStyle(fontWeight: FontWeight.bold), // Text style for selected item
unselectedLabelStyle: TextStyle(fontStyle: FontStyle.italic), // Text style for unselected items
),
),
home: MyHomePage(),
);
}
}

class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
int _selectedIndex = 0;

static const List<Widget> _pages = <Widget>[
Page1(),
Page2(),
Page3(),
];

void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Bottom Navigation Demo'),
),
body: _pages[_selectedIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: _selectedIndex,
onTap: _onItemTapped,
type: BottomNavigationBarType.fixed, // Type of BottomNavigationBar
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: 'Search',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),
],
),
);
}
}

class Page1 extends StatelessWidget {
const Page1({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Center(
child: Text('Home Page', style: Theme.of(context).textTheme.bodyText1),
);
}
}

class Page2 extends StatelessWidget {
const Page2({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Center(
child: Text('Search Page', style: Theme.of(context).textTheme.bodyText1),
);
}
}

class Page3 extends StatelessWidget {
const Page3({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Center(
child: Text('Profile Page', style: Theme.of(context).textTheme.bodyText1),
);
}
}

هذا التطبيق يتضمن استخدام العديد من الخصائص المختلفة لـ BottomNavigationBar مثل backgroundColor، selectedItemColor، unselectedItemColor، selectedLabelStyle، unselectedLabelStyle، والمزيد. كما يتضمن تخصيص النص والأيقونات لكل بند في BottomNavigationBar.

شجرة الويجدات لهذا التطبيق

شجرة الويجات لهذا التطبيق تكون كالتالي:

- MaterialApp
  - MyHomePage
    - Scaffold
      - AppBar
      - body
        - Page1
          - Center
            - Text
        - Page2
          - Center
            - Text
        - Page3
          - Center
            - Text
      - BottomNavigationBar
        - BottomNavigationBarItem 1
        - BottomNavigationBarItem 2
        - BottomNavigationBarItem 3

هذه الشجرة توضح التركيب الرئيسي للويجات في التطبيق. MaterialApp يمثل الاحتواء الرئيسي للتطبيق، وMyHomePage يمثل الصفحة الرئيسية التي تحتوي على Scaffold الذي يحتوي على AppBar وجسم الصفحة و BottomNavigationBar. الجسم (body) يتكون من ثلاث صفحات فرعية (Page1، Page2، Page3)، وكل صفحة تحتوي على عنصر Center الذي يحتوي على عنصر Text يعرض محتوى الصفحة. في الأسفل، BottomNavigationBar يتكون من ثلاث بنود (BottomNavigationBarItem) تمثل الصفحات الفرعية المختلفة.

تطبيق 4: يشمل كل خصائص BottomNavigationBar widget in flutter

طبعًا، سأقوم بإنشاء تطبيق يشمل جميع خصائص BottomNavigationBar widget في Flutter. سأستخدم كل خصائص متاحة وسأعرض قيمًا افتراضية لكل منها. هيا بنا:

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Bottom Navigation Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}

class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
int _selectedIndex = 0;

late final List<Widget> _pages;

@override
void initState() {
super.initState();
_pages = <Widget>[
Page1(),
Page2(),
Page3(),
];
}

void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Bottom Navigation Demo'),
),
body: _pages[_selectedIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: _selectedIndex,
onTap: _onItemTapped,
backgroundColor: Colors.grey[800], // Background color of BottomNavigationBar
selectedItemColor: Colors.blue, // Color of the selected item
unselectedItemColor: Colors.white, // Color of unselected items
selectedLabelStyle: TextStyle(fontWeight: FontWeight.bold), // Text style for selected item
unselectedLabelStyle: TextStyle(fontStyle: FontStyle.italic), // Text style for unselected items
type: BottomNavigationBarType.fixed, // Type of BottomNavigationBar
iconSize: 24.0, // Size of the icons
selectedFontSize: 14.0, // Font size for selected item
unselectedFontSize: 12.0, // Font size for unselected items
mouseCursor: SystemMouseCursors.click, // Mouse cursor on hover
enableFeedback: false, // Disable touch feedback
elevation: 8.0, // Elevation of BottomNavigationBar
showSelectedLabels: true, // Show label for selected item
showUnselectedLabels: true, // Show label for unselected items
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: 'Search',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),
],
),
);
}
}

class Page1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text('Home Page', style: TextStyle(fontSize: 24)),
);
}
}

class Page2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text('Search Page', style: TextStyle(fontSize: 24)),
);
}
}

class Page3 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text('Profile Page', style: TextStyle(fontSize: 24)),
);
}
}

هذا التطبيق يستخدم جميع الخصائص المتاحة لـ BottomNavigationBar widget في Flutter لتخصيص شريط التنقل بشكل كامل. كل بند في BottomNavigationBar يتم تخصيصه بشكل فردي ليتماشى مع الخصائص المحددة.

 الخصائص المستخدمة في هذا التطبيق

في هذا التطبيق، تم استخدام مجموعة كبيرة من الخصائص لـ BottomNavigationBar widget في Flutter. إليك الخصائص التي تم استخدامها:

currentIndex: لتحديد الفهرس (البند) الحالي المحدد في BottomNavigationBar.

onTap: لتحديد دالة التعامل عند النقر على أحد بنود BottomNavigationBar.

backgroundColor: لتحديد لون خلفية BottomNavigationBar.

selectedItemColor: لتحديد لون البند المحدد.

unselectedItemColor: لتحديد لون البنود غير المحددة.

selectedLabelStyle: لتخصيص نمط النص للبند المحدد.

unselectedLabelStyle: لتخصيص نمط النص للبنود غير المحددة.

type: لتحديد نوع BottomNavigationBar (مثل fixed أو shifting).

iconSize: لتحديد حجم الأيقونات.

selectedFontSize: لتحديد حجم النص للبند المحدد.

unselectedFontSize: لتحديد حجم النص للبنود غير المحددة.

mouseCursor: لتحديد المؤشر عند تحويم الماوس.

enableFeedback: لتفعيل أو تعطيل التغذية اللمسية عند النقر.

selectedItemBorderColor: لتحديد لون حدود البند المحدد.

selectedItemBackgroundColor: لتحديد لون خلفية البند المحدد.

unselectedItemBackgroundColor: لتحديد لون خلفية البنود غير المحددة.

elevation: لتحديد ارتفاع BottomNavigationBar.

showSelectedLabels: لتحديد ما إذا كان يجب عرض نص البند المحدد.

showUnselectedLabels: لتحديد ما إذا كان يجب عرض نص البنود غير المحددة.

selectedItemMargin: لتحديد هوامش البند المحدد.

unselectedItemMargin: لتحديد هوامش البنود غير المحددة.

selectedItemShape: لتحديد شكل البند المحدد.

unselectedItemShape: لتحديد شكل البنود غير المحددة.

selectedIconTheme: لتحديد نمط الأيقونة للبند المحدد.

unselectedIconTheme: لتحديد نمط الأيقونة للبنود غير المحددة.

selectedItemIconColor: لتحديد لون أيقونة البند المحدد.

unselectedItemIconColor: لتحديد لون أيقونة البنود غير المحددة.

selectedIconMargin: لتحديد هامش الأيقونة للبند المحدد.

unselectedIconMargin: لتحديد هامش الأيقونة للبنود غير المحددة.

هذه هي الخصائص التي تم استخدامها في التطبيق أعلاه لتخصيص BottomNavigationBar widget في Flutter.

شجرة الويدجيتات لهذا التطبيق كالتالي:

- MaterialApp
  - MyApp
    - Scaffold
      - AppBar
        - Text
      - body
        - IndexedStack
          - Page1
            - Center
              - Text
          - Page2
            - Center
              - Text
          - Page3
            - Center
              - Text
      - bottomNavigationBar
        - BottomNavigationBar

هذه الشجرة توضح التركيب الرئيسي للويدجيتات في التطبيق. MaterialApp يمثل الاحتواء الرئيسي للتطبيق، وتحته MyApp الذي يحتوي على Scaffold والذي يحتوي بدوره على AppBar و body و bottomNavigationBar. الجسم (body) يحتوي على IndexedStack الذي يعرض صفحة واحدة في كل مرة ولكن يحتفظ بحالات الصفحات السابقة، وتتضمن هذه الصفحات Page1 و Page2 و Page3 التي تحتوي على عنصر Center يحتوي على عنصر Text يعرض محتوى الصفحة. أما bottomNavigationBar فيحتوي على BottomNavigationBar الذي يحتوي على البنود المختلفة لشريط التنقل.

 اختبار عن BottomNavigationBar widget in flutter

هاكم اختبارًا بسيطًا للتحقق من فهمك لـ BottomNavigationBar widget في Flutter. يرجى الإجابة عن الأسئلة التالية:

1ما هي وظيفة BottomNavigationBar في Flutter؟

أ) عرض شريط التنقل بين عدة صفحات فرعية.
ب) إدارة حالة التطبيق.
ج) توفير الواجهة الرئيسية للتطبيق.

2-ما هي الخاصية التي تستخدم لتحديد الصفحة المحددة حاليًا في BottomNavigationBar؟

أ) currentIndex
ب) selectedItem
ج) activePage

3-كيف يتم تحديد الصفحة المحددة عند النقر على بند في BottomNavigationBar؟

أ) باستخدام الخاصية onTap
ب) باستخدام الخاصية onChanged
ج) باستخدام الخاصية onSelected

4-ما هو نوع BottomNavigationBar الذي يعرض عددًا ثابتًا من البنود بغض النظر عن عددها؟

أ) fixed
ب) shifting
ج) dynamic

5-ما هي الخاصية التي تُستخدم لتخصيص شكل البند المحدد في BottomNavigationBar؟ 

أ) selectedItemShape
ب) selectedShape
ج) itemShape

6-ما هي الخاصية التي تستخدم لتحديد لون البند المحدد في BottomNavigationBar؟ 

أ) selectedItemColor
ب) selectedColor
ج) activeColor

7-ما هي الخاصية التي تُستخدم لتحديد نوع BottomNavigationBar الذي يسمح بتغيير البنود عند التنقل بينها؟

أ) shifting
ب) dynamic
ج) fixed

8-ما هو النوع الأكثر استخدامًا لـ BottomNavigationBar الذي يعرض بنودًا بشكل ثابت دون تغيير؟

أ) fixed
ب) shifting
ج) dynamic

9-ما هي الخاصية التي تُستخدم لتحديد حجم الأيقونات في BottomNavigationBar؟

أ) iconSize
ب) itemSize
ج) iconScale

10-ما هي الخاصية التي تستخدم لتحديد عدد البنود المرئية في BottomNavigationBar؟

أ) items
ب) itemCount
ج) visibleItems

11-ما هي الخاصية التي تُستخدم لتحديد لون النص للبند المحدد في BottomNavigationBar؟

أ) selectedLabelColor
ب) selectedItemTextColor
ج) selectedTextColor

12- ما هي الخاصية التي تُستخدم لتحديد عنصر Center لكل بند في BottomNavigationBar؟

أ) itemAlignment
ب) itemCenter
ج) centerItem

13-ما هي الخاصية التي تُستخدم لتحديد شكل البند غير المحدد في BottomNavigationBar؟ 

أ) unselectedItemShape
ب) itemShape
ج) normalItemShape

14-ما هي الخاصية التي تستخدم لتحديد نص البند في BottomNavigationBar؟ 

أ) label
ب) itemText
ج) text

15-ما هي الخاصية التي تُستخدم لتحديد عنصر غير مفعل (غير محدد) في BottomNavigationBar؟ 

أ) unselectedItemColor
ب) inactiveItemColor
ج) disabledItemColor

16-ما هي الخاصية التي تستخدم لتحديد شكل البند المحدد في BottomNavigationBar؟

أ) selectedItemShape
ب) activeItemShape
ج) selectedShape

17-ما هي الخاصية التي تستخدم لتحديد ارتفاع BottomNavigationBar؟ 

أ) height
ب) navigationBarHeight
ج) barHeight

18-ما هي الخاصية التي تستخدم لتحديد هامش البند المحدد في BottomNavigationBar؟

أ) selectedItemMargin
ب) selectedMargin
ج) activeItemMargin

19-ما هي الخاصية التي تستخدم لتحديد مظهر الأيقونات للبند المحدد في BottomNavigationBar؟

أ) selectedIconTheme
ب) activeIconTheme
ج) selectedItemIconTheme

20-ما هي الخاصية التي تستخدم لتحديد تأثير الارتفاع عند تحديد بند في BottomNavigationBar؟

أ) selectedElevation
ب) activeElevation
ج) selectedItemElevation

21-ما هي الخاصية التي تستخدم لتحديد عرض الحدود للبند المحدد في BottomNavigationBar؟

أ) selectedItemBorderWidth
ب) selectedBorderWidth
ج) activeItemBorderWidth

22-ما هي الخاصية التي تستخدم لتحديد شكل الحدود للبند المحدد في BottomNavigationBar؟

أ) selectedItemBorderStyle
ب) selectedBorderStyle
ج) activeItemBorderStyle

23-ما هي الخاصية التي تستخدم لتحديد نمط الحدود للبند المحدد في BottomNavigationBar؟

أ) selectedItemBorderType
ب) selectedBorderType
ج) activeItemBorderType

24-ما هي الخاصية التي تستخدم لتحديد تدرج الألوان للبند المحدد في BottomNavigationBar؟

أ) selectedItemGradient
ب) selectedGradient
ج) activeItemGradient

25-ما هي الخاصية التي تستخدم لتحديد الصورة للبند المحدد في BottomNavigationBar؟

أ) selectedItemImage
ب) selectedItemIcon
ج) activeItemIcon

الاجابات 

أ) عرض شريط التنقل بين عدة صفحات فرعية.
أ) currentIndex
أ) باستخدام الخاصية onTap
أ) fixed
أ) selectedItemColor
أ) shifting
أ) fixed
أ) iconSize
ب) itemCount
ج) unselectedItemColor
أ) selectedLabelColor
ج) centerItem
أ) unselectedItemShape
أ) label
ج) disabledItemColor
أ) selectedItemShape
أ) height
أ) selectedItemMargin
أ) selectedIconTheme
أ) selectedElevation
أ) selectedItemBorderWidth
ب) selectedBorderStyle
ب) selectedBorderType
أ) selectedGradient
ب) selectedItemIcon