import 'package:flutter/material.dart';

class CustomBottomNavigationBar extends StatefulWidget {
  final int initialSelectedIndex;

  CustomBottomNavigationBar({Key? key, this.initialSelectedIndex = 0})
      : super(key: key);

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

class _CustomBottomNavigationBarState extends State<CustomBottomNavigationBar> {
  late int _selectedIndex;

  @override
  void initState() {
    super.initState();
    _selectedIndex = widget.initialSelectedIndex;
  }

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
    print('Item $index clicked');
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => {print("test")},
      child: Container(
        padding: EdgeInsets.only(left: 130, right: 130, bottom: 30),
        child: ClipRRect(
          borderRadius: BorderRadius.circular(25),
          child: BottomAppBar(
            shape: CircularNotchedRectangle(),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                _buildNavItem(Icons.stacked_bar_chart, 0),
                _buildNavItem(Icons.circle, 1),
                _buildNavItem(Icons.settings, 2),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildNavItem(IconData icon, int index) {
    return IconButton(
      icon: Container(
        decoration: _selectedIndex == index
            ? BoxDecoration(
                color: Colors.lightGreen,
                borderRadius: BorderRadius.circular(30),
              )
            : null,
        child: Icon(icon, color: _selectedIndex == index ? Colors.white : null),
      ),
      onPressed: () => _onItemTapped(index),
      splashColor: Colors.transparent,
      highlightColor: Colors.transparent,
      iconSize: 30,
    );
  }
}