سلسلة عناصر ( ودجات ) فلاتر -تخطيط الواجهة

مقدمة : 

يعتبر البار السفلي من أكثر العناصر المستخدمة في التطبيقات , فهي تتيح للمستخدم الوصول السريع للشاشات ( Screens ) الهامة , مثل الشاشة الرئيسية , الإشعارات , سلة الشراء , الملف الشخصي الخ........ , حيث خصصت فلاتر عبر Material Design أسلوباً سهلاً وبسيطاً لتضمينها في التطبيقات عبر كلاس BottomNavigationBar .

كيف يتم تضمينه في التطبيق : 

يعتبر البار السفلي أحد بارمترات ( عناصر ) الواجهة scaffold من Material Design وله الكثير من الخصائص الداخلية


مع الانتباه أن هذا البارامتر يأخذ كلاس Widget , مما يعني أنك تستطيع وضع أي Widget في الجزء السفلي بدلاً عن BottomNavigationBar , مثلاً يمكنك إضافة زر لتفيذ أمر معين في الشاشة حيث يبقى موقع هذا الزر أسفل الشاشة ولا يتأثر بالسحب للأسفل أو الأعلى Scrolling . 


خصائص العنصر BottomNavigationBar Paramatters : 

سنشرح في الاسطر التالية أبرز خصائص هذا العنصر مع الكود المرفق 

import 'package:flutter/material.dart';

class BottomNavExample extends StatefulWidget {
  const BottomNavExample({super.key});

  @override
  State createState() => _BottomNavExampleState();
}

class _BottomNavExampleState extends State {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home)),
          BottomNavigationBarItem(icon: Icon(Icons.home)),
          BottomNavigationBarItem(icon: Icon(Icons.home)),
          BottomNavigationBarItem(icon: Icon(Icons.home)),
        ],
        backgroundColor: Colors.blueAccent,
        currentIndex: _currentIndex,
        selectedItemColor: Colors.white,
        unselectedItemColor: Colors.white30,
        selectedFontSize: 15,
        unselectedFontSize: 13,
        onTap: (value) {
          setState(() {
            _currentIndex = value;
          });
        },
      ),
    );
  }
}

items : هي البارامتر الوحيد المطلوب من بارامترات العنصر و تأخذ قيمة مصفوفة من العنصر BottomNavigationBarItem وهو عنصر بسيط يحوي أيقونة Icon و label وهو النص الظاهر تحت الأيقونة .

currentIndex : وتأخذ قيمة عدد طبيعي يبدأ من الصفر ويشير للعنصر الحالي المختار من مصفوفة العناصر السابقة .

selectedItemColor : يأخذ قيمة لون من كلاس Color , حيث يشير إلى لون العنصر المختار , ويطبق هذا اللون إلى الأيقونة والنص بدون الحاجة لتعيين لون كل واحدة في كل عنصر .

backgroundColor : يأخذ قيمة لون من كلاس Color , حيث يشير إلى لون الخلفية للعنصر كاملاً .