Custom Flutter navigation bar

Question

How can i make like this Custom navigation bar?

enter image description here

I have tried this

on main page

class CustomNavigationBar extends StatelessWidget {
  final List<NavigationDestination> destinations;
  final int selectedIndex;
  final Function(int index) onDestinationSelected;

  const CustomNavigationBar({
    Key? key,
    required this.destinations,
    required this.selectedIndex,
    required this.onDestinationSelected,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.green, // You can customize the background color
      height: 60, // Adjust the height as needed
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: List.generate(
          destinations.length,
          (index) => GestureDetector(
            onTap: () => onDestinationSelected(index),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(
                  destinations[index].icon,
                  color: index == selectedIndex ? Colors.white : Colors.black,
                ),
                if (destinations[index].label != null)
                  Text(
                    destinations[index].label!,
                    style: TextStyle(
                      color: index == selectedIndex ? Colors.white : Colors.black,
                    ),
                  ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

and on Home page this

final List<NavigationDestination> destinations = [
  NavigationDestination(icon: Icons.home, label: 'Home'),
  NavigationDestination(icon: Icons.search, label: 'Search'),
  NavigationDestination(icon: Icons.shopping_cart, label: 'Cart'),
];

and I have tried this

Snake navigation bar

at least I want any help to know how I can do like this snake navigation bar
I have tried a lot and read it but I still can't do it.

Answer 1

Try below given code (if you want to make a custom navigation bar attached at start of your question):

import 'package:flutter/material.dart';

class CustomNavigationBar extends StatelessWidget {
  final List<NavigationDestination> destinations;
  final int selectedIndex;
  final Function(int index) onDestinationSelected;

  const CustomNavigationBar({
    super.key,
    required this.destinations,
    required this.selectedIndex,
    required this.onDestinationSelected,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(8.0),
      padding: const EdgeInsets.symmetric(horizontal: 16.0),
      decoration: BoxDecoration(
        color: const Color(0xFF017620),
        borderRadius: BorderRadius.circular(30.0),
      ),
      height: 60.0,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: List.generate(
          destinations.length,
          (index) {
            bool isSelected = index == selectedIndex;
            return GestureDetector(
              onTap: () => onDestinationSelected(index),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                    decoration: isSelected
                        ? const BoxDecoration(
                            color: Colors.white,
                            shape: BoxShape.circle,
                          )
                        : null,
                    padding: EdgeInsets.all(isSelected ? 8.0 : 0.0),
                    child: Icon(
                      destinations[index].icon,
                      color: isSelected ? Colors.green : Colors.white,
                    ),
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}

class NavigationDestination {
  final IconData icon;
  final String? label;

  NavigationDestination({required this.icon, this.label});
}

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        bottomNavigationBar: CustomNavigationBar(
          destinations: [
            NavigationDestination(icon: Icons.home, label: 'Home'),
            NavigationDestination(icon: Icons.note, label: 'Notes'),
            NavigationDestination(
                icon: Icons.calendar_today, label: 'Calendar'),
            NavigationDestination(icon: Icons.person, label: 'Profile'),
          ],
          selectedIndex: 0,
          onDestinationSelected: (index) {
            // todo: handle destination selection...
          },
        ),
        body: const Center(child: Text('Content goes here')),
      ),
    );
  }
}

It will give you a bottom nav bar like the attached one.