tourch_navbar - Dart API docs

touch_navbar

https://github.com/user-attachments/assets/89871e45-ab92-46de-be26-74c2bc14ea92

Overview:

A customizable and animated bottom navigation bar for Flutter with smooth transitions, gradient effects, and responsive design.

Key Features :

Custom Icons: Supports a list of customizable icons.
Animated Indicator: Underline animation for the selected item.
Gradient Effect: Customizable gradient for the animated indicator.
Responsive: Adapts to different screen sizes with percentage-based layout.
Interactive: Trigger actions with onItemTapped callback.

Customization :

Colors: Background, selected/unselected item colors, and icon colors.
Icons: Customizable icons for each navigation item.
Gradient: Customizable gradient for the selected item indicator.

About The Project

tourch_navbar is a Flutter package designed to enhance mobile app navigation with an elegant, animated, and fully customizable bottom navigation bar. This package offers a modern, visually appealing way to implement a bottom navigation bar with smooth animations and gradient effects, making it ideal for developers looking to create a unique user experience.

The tourch_navbar widget allows for complete control over the icons, colors, and animations, with built-in support for dynamic transitions. It is built to be responsive, ensuring a great look on different screen sizes and devices.

Getting Started

To use the tourch_navbar package in your Flutter project, follow these steps:

Prerequisites

Ensure you have the following installed on your system:

Flutter
Dart

Installation

Add the package dependency in your pubspec.yaml file:
```
dependencies:
  tourch_navbar:
```
Install the dependencies by running the following command:
```
flutter pub get
```

Import the package into your Dart file:

import 'package:tourch_navbar/tourch_navbar.dart';

Usage

Here’s how to integrate the TourchNavbarSub widget into your Flutter app:

Demo Video

import 'package:flutter/material.dart';
import 'package:iconly/iconly.dart';
import 'package:tourch_navbar/tourch_navbar.dart';
import 'package:iconly/iconly.dart';

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

  @override
  State<Example> createState() => _ExampleState();
}

final List<Color> tourchColor1 = [
  Colors.green.withOpacity(0.8),
  Colors.green.withOpacity(0.5),
  Colors.transparent
];

class _ExampleState extends State<Example> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      bottomNavigationBar: TourchNavbarSub(
        tourchColors: tourchColor1,
        iconColor: const Color.fromARGB(255, 112, 197, 114),
        selectedItemColor: Colors.green,
        icons: const [IconlyLight.home, IconlyLight.search, IconlyLight.category, IconlyLight.setting, IconlyLight.profile],
        onItemTapped: (index) {
        },
      ),
      body: const SafeArea(child:Column()),
    );
  }
}

🚀 About Me

I'm Subrahmanya S. Hegde, a mobile app developer with expertise in Flutter and React Native, passionate about building high-performance, cross-platform applications. With skills in Kotlin, Node.js, Firebase, and Supabase, I create end-to-end solutions that deliver seamless user experiences.

I hold an MCA degree from MIT Manipal and have a strong passion for exploring new technologies. I am also a strong advocate of using Git and GitHub for version control and collaboration.

Let’s build something great together!

Happy Coding!

Authors

@subshegde

Feedback

If you have any feedback, please reach out to us at subrahmanya460@gmail.com

Tourch Navbar