half_circle_nav 1.0.2

A customizable semicircular/half-circle bottom navigation bar for Flutter apps.

Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

---

[released]

Added

• Initial commit with basic half circle bottom navigation bar.
• Support for custom icons and active/inactive states.
• Smooth animation when switching tabs.

Fixed

• Corrected icon alignment within the half circle.

---

1.0.2 - 2025-08-10

Added

• Half circle bottom navigation widget with 3 tabs.
• Customizable colors, icon sizes, and animation duration.
• Example usage in main.dart.

Example

import 'package:flutter/material.dart';
import 'package:half_circle_nav/half_circle_nav.dart'; // Tumhara package ka import

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

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

  @override
  Widget build(BuildContext context) {
    // MaterialApp with simple home using HalfCircleNav
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Half Circle Nav Example',
      theme: ThemeData(
        primarySwatch: Colors.deepPurple,
      ),
      home: const HalfCircleNavExample(),
    );
  }
}

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

  @override
  State<HalfCircleNavExample> createState() => _HalfCircleNavExampleState();
}

class _HalfCircleNavExampleState extends State<HalfCircleNavExample> {
  // Selected index state
  int selectedIndex = 0;

  // List of icons for nav bar
  final List<IconData> icons = const [
    Icons.search,
    Icons.group,
    Icons.home,
    Icons.shopping_cart,
    Icons.person,
  ];

  // Corresponding screen titles or widgets
  final List<Widget> screens = const [
    Center(child: Text('Search Screen', style: TextStyle(fontSize: 32))),
    Center(child: Text('Groups Screen', style: TextStyle(fontSize: 32))),
    Center(child: Text('Home Screen', style: TextStyle(fontSize: 32))),
    Center(child: Text('Cart Screen', style: TextStyle(fontSize: 32))),
    Center(child: Text('Profile Screen', style: TextStyle(fontSize: 32))),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // Show currently selected screen
      body: screens[selectedIndex],

      // Custom HalfCircleNav from your package
      bottomNavigationBar: SizedBox(
        height: 180, // Same as default height in your package
        child: HalfCircleNav(
          icons: icons,
          screens: List.generate(
              icons.length,
              (index) =>
                  'This is screen #$index'), // Your package expects List<String>
          // Colors and height can also be customized here (optional)
          selectedColor: Colors.deepPurpleAccent,
          unselectedColor: Colors.deepPurple,
          backgroundColor: Colors.white,
          height: 180,

          // NOTE: Your package currently does not support callbacks,
          // so navigation inside this example is manual below:
        ),
      ),
      // For demo: Use your own bottom nav overlay to change selectedIndex:
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            selectedIndex = (selectedIndex + 1) % icons.length;
          });
        },
        child: const Icon(Icons.refresh),
        tooltip: 'Change Screen (Demo)',
      ),
    );
  }
}