Custom Bottom Navbar - svg images

on

 



import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';

import '../../const/colors.dart';

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _selectedIndex = 0;
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
  List<BottomNavigationBarItem> _items = [];

  final Screens = [
    Center(
      child: Text("data"),
    ),
    Center(
      child: Text("data"),
    ),
    Center(
      child: Text("data"),
    ),
    Center(
      child: Text("data"),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    _items = [
      BottomNavigationBarItem(
          icon: SvgPicture.asset(
            'assets/icons/home.svg',
            width: 24,
            height: 24,
            color:
                _selectedIndex == 0 ? greenColor : greenColor.withOpacity(0.45),
          ),
          label: "sd"),
      BottomNavigationBarItem(
          icon: SvgPicture.asset(
            'assets/icons/giver.svg',
            width: 24,
            height: 24,
            color:
                _selectedIndex == 1 ? greenColor : greenColor.withOpacity(0.45),
          ),
          label: "sd"),
      BottomNavigationBarItem(
          icon: SvgPicture.asset(
            'assets/icons/taker.svg',
            width: 24,
            height: 24,
            color:
                _selectedIndex == 2 ? greenColor : greenColor.withOpacity(0.45),
          ),
          label: "sd"),
      BottomNavigationBarItem(
          icon: SvgPicture.asset(
            'assets/icons/profile.svg',
            width: 24,
            height: 24,
            color:
                _selectedIndex == 3 ? greenColor : greenColor.withOpacity(0.45),
          ),
          label: "sd"),
    ];

    return Scaffold(
      // endDrawer: const HomeDrawer(),
      key: _scaffoldKey,
      body: Stack(children: [
        Screens[_selectedIndex],
        SafeArea(
          child: Align(
              alignment: Alignment.topRight,
              child: Padding(
                padding: const EdgeInsets.only(right: 5),
                child: IconButton(
                    onPressed: () {
                      _scaffoldKey.currentState?.openEndDrawer();
                    },
                    icon: Icon(
                      Icons.menu,
                      color: whiteColor,
                      size: 25,
                    )),
              )),
        ),
      ]),
      bottomNavigationBar: Container(
        decoration: const BoxDecoration(color: blackColor
            // gradient: LinearGradient(
            //   colors: [
            //     Color.fromARGB(255, 34, 14, 112),
            //     Color.fromARGB(255, 24, 10, 80),
            //     Color.fromARGB(255, 16, 6, 54)
            //   ],
            //   begin: Alignment.topCenter,
            //   end: Alignment.bottomCenter,
            // ),
            ),
        child: BottomNavigationBar(
          iconSize: 28,
          showSelectedLabels: false,
          showUnselectedLabels: false,
          selectedItemColor: greenColor,
          unselectedItemColor: greenColor.withOpacity(.45),
          backgroundColor: whiteColor,
          type: BottomNavigationBarType.fixed,
          items: _items,
          currentIndex: _selectedIndex,
          onTap: (int index) {
            setState(() {
              _selectedIndex = index;
            });
          },
        ),
      ),
    );
  }
}

Comments

Post a Comment