كيفية تخصيص تصميم مختلف لعرض bottomNavigationBar في Flutter

كيفية تخصيص تصميم مختلف لعرض bottomNavigationBar في Flutter

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

add package

animate_do: ^2.1.0

Create Custom bottom NavigationBar in Flutter

هذا الجزء سوف يكون class للتصميم بمعنى اننا في هذا الجزء سوف نقوم معكم بعمل التصميم المراد هنا والتصميم الذي نرغب به في هذا الجزء وبعدها سوف نقوم باستدعاءه في ال class الاساسي كما سوف نشاهد هنا قمنا بعمل التصميم الذي نرغب به بداخل Container ووضع العناصر والانميشن بداخله بمعنى هنا سوف تقوم بعمل تفاصيل العنصر كامله في هذا الجزء .

bottom.dart

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

enum BottomItems { Explore, Play, Saved, User }

class BottomNa extends StatefulWidget {
  const BottomNa({Key? key}) : super(key: key);

  @override
  _BottomNaState createState() => _BottomNaState();
}

class _BottomNaState extends State<BottomNa> {
  BottomItems selectedItems = BottomItems.Explore;
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      width: MediaQuery.of(context).size.width * 0.95,
      height: MediaQuery.of(context).size.height * 0.1,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(35),
          color: const Color(0xff202032)),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          InkWell(
            onTap: () {
              setState(() {
                selectedItems = BottomItems.Explore;
              });
            },
            child: selectedItems == BottomItems.Explore
                ? isActiveWidget("Explore")
                : const Icon(
              Icons.explore,
              color: Colors.grey,
            ),
          ),
          InkWell(
            onTap: () {
              setState(() {
                selectedItems = BottomItems.Play;
              });
            },
            child: selectedItems == BottomItems.Play
                ? isActiveWidget("Player")
                : const Icon(
              Icons.play_circle,
              color: Colors.grey,
            ),
          ),
          InkWell(
            onTap: () {
              setState(() {
                selectedItems = BottomItems.Saved;
              });
            },
            child: selectedItems == BottomItems.Saved
                ? isActiveWidget("Saved")
                : const Icon(
              Icons.bookmark_outline,
              color: Colors.grey,
            ),
          ),
          InkWell(
            onTap: () {
              setState(() {
                selectedItems = BottomItems.User;
              });
            },
            child: selectedItems == BottomItems.User
                ? isActiveWidget("User")
                : const Icon(
              Icons.person_outline,
              color: Colors.grey,
            ),
          )
        ],
      ),
    );
  }

  Widget isActiveWidget(String title) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        FadeIn(
          delay: const Duration(milliseconds: 100),
          child: Text(
            title,
            style: const TextStyle(color: Colors.white),
          ),
        ),
        SizedBox(
          height: MediaQuery.of(context).size.height * 0.005,
        ),
        FadeInLeft(
          from: 15,
          child: const SizedBox(
              height: 3,
              width: 30,
              child: LinearProgressIndicator(
                minHeight: 10,
                value: 1,
                color: Color(0xFF733FF1),
                backgroundColor: Color(0xff202032),
              )),
        )
      ],
    );
  }
}

use bottom NavigationBar in Flutter project

في هذا الجزء والذي يعد لاستخدام العنصر الذي قمنا بعمله في الاعلى وسوف يكون bottomNavigationBar حتى يكون في الاسفل ولا يتغير وهذا جزء من اجزاء ال scaffold التي تسمح لنا بعمل عناصر باسفلها وبهذا نكون انتهينا معكم من شرح كيفية تصميم  bottomNavigationBar بشكل مخصص في تطوير تطبيقات الجوال باستخدام تقنية Flutter الغنيه عن التعريف .

ui.dart

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

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      backgroundColor: Colors.black,
      body: SizedBox(),
      bottomNavigationBar: BottomNa(),
    );
  }
}