يعد Bottom Navigation Bar من أكثر عناصر واجهة المستخدم استخدامًا داخل تطبيقات Flutter، حيث يسمح للمستخدم بالتنقل بسرعة بين الصفحات الرئيسية مع الحفاظ على تجربة استخدام بسيطة وسلسة.

ومع تطور تصميمات التطبيقات الحديثة ظهرت تأثيرات جديدة مثل Liquid Glass وWater Effect التي تمنح شريط التنقل مظهرًا ديناميكيًا يشبه حركة الماء، مما يجعل التطبيق أكثر جاذبية واحترافية.

وتوفر مكتبة liquid_glass_bottom_nav_water_effect طريقة سهلة لإضافة شريط تنقل سفلي بتأثير زجاجي مع حركة مائية ناعمة عند الانتقال بين العناصر، دون الحاجة إلى إنشاء الرسوم المتحركة يدويًا.

في هذا المقال سنتعرف على كيفية استخدام مكتبة liquid_glass_bottom_nav_water_effect داخل مشاريع Flutter، وطريقة إضافتها، وأهم المميزات التي تقدمها للمطورين.

توفر المكتبة تجربة تنقل حديثة تختلف عن شريط التنقل التقليدي الموجود في Flutter، حيث تضيف تأثيرات بصرية تجعل التطبيق يبدو أكثر حيوية.

ومن أهم المميزات التي تقدمها:

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

تعتمد فكرة المكتبة على إنشاء Bottom Navigation يحتوي على مجموعة من الأيقونات، وعند الضغط على أي عنصر يتم تشغيل تأثير مائي متحرك ينتقل بسلاسة إلى العنصر الجديد.

كما يتم تطبيق تأثير الزجاج الشفاف (Glass Effect) على خلفية شريط التنقل، ليظهر بأسلوب مشابه للتصميمات الحديثة في العديد من التطبيقات.

ويمكن دمج هذا الشريط بسهولة مع أي شاشة داخل تطبيق Flutter.

يمكن إضافة المكتبة إلى ملف pubspec.yaml بالطريقة المعتادة.

dependencies:
  liquid_glass_bottom_nav_water_effect: ^latest

بعد ذلك يتم تنفيذ الأمر التالي لتنزيل جميع الملفات المطلوبة.

flutter pub get

بعد تثبيت الحزمة يتم استيرادها داخل ملف Dart.

import 'package:liquid_glass_bottom_nav_water_effect/liquid_glass_bottom_nav_water_effect.dart';

بعدها تصبح جميع Widgets الخاصة بالمكتبة جاهزة للاستخدام داخل التطبيق.

توفر المكتبة Widget جاهزًا لإنشاء شريط التنقل السفلي مع جميع التأثيرات المدمجة.

LiquidGlassBottomNav(
  currentIndex: currentIndex,
  onTap: (index) {

  },
)

بمجرد الضغط على أي عنصر سيتم تشغيل تأثير الانتقال المائي بشكل تلقائي.

يمكن إنشاء أي عدد من عناصر التنقل وإضافة أيقونة وعنوان لكل عنصر.

items: const [

]

كما يمكن تغيير ترتيب العناصر أو إضافة صفحات جديدة بسهولة دون تعديل بنية التطبيق.

بعد الضغط على أي عنصر داخل Bottom Navigation يتم تحديث الصفحة الحالية باستخدام قيمة الفهرس (Index).

onTap: (index) {

    setState(() {
      currentIndex = index;
    });

}

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

توفر المكتبة إمكانية تعديل العديد من خصائص شريط التنقل مثل لون الخلفية، وشفافية الزجاج، وألوان الأيقونات، بالإضافة إلى حجم العناصر والمسافات بينها.

كما يمكن دمجها بسهولة مع الوضع الليلي (Dark Mode) أو الوضع الفاتح للحصول على تصميم متناسق مع هوية التطبيق.

من أبرز مميزات المكتبة أنها تضيف تأثيرًا مائيًا عند التنقل بين العناصر، حيث تتحرك المؤشرات بطريقة سلسة مع تأثير يشبه تموجات الماء.

كما يتم تنفيذ جميع الرسوم المتحركة تلقائيًا دون الحاجة إلى استخدام AnimationController أو كتابة أكواد معقدة.

يمكن استخدام liquid_glass_bottom_nav_water_effect في العديد من أنواع التطبيقات، مثل:

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

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

import 'package:flutter/material.dart';
import 'package:liquid_glass_bottom_nav_water_effect/liquid_glass_bottom_nav_water_effect.dart';

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  int currentIndex = 0;

  @override
  Widget build(BuildContext context) {

    return Scaffold(

      body: const Center(
        child: Text("Liquid Glass Bottom Navigation"),
      ),

      bottomNavigationBar: LiquidGlassBottomNav(

        currentIndex: currentIndex,

        onTap: (index) {
          setState(() {
            currentIndex = index;
          });
        },

      ),

    );
  }
}