sidebar_widget 0.0.4

A customizable Flutter sidebar navigation package with support for nested navigation, animations, and hover effects.

Sidebar_Widget

A Flutter package that provides a curated collection of custom widgets to simplify UI design and app development. With Sidebar_Widget, you can quickly create beautiful, reusable, and responsive user interfaces.

Flutter Custom Sidebar

A highly customizable sidebar navigation package for Flutter applications with support for nested navigation, animations, and hover effects.

Features

• 🎯 Customizable sidebar navigation
• 📱 Responsive design
• 🎨 Custom themes and colors
• ⚡ Smooth animations
• 🔗 Nested navigation support
• 💫 Hover effects
• 🎈 Overlay support for collapsed mode

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  sidebar_widget: ^1.0.0

Then run:

flutter pub get

Import the package in your Dart code:

import 'package:sidebar_widget/sidebar_widget.dart';

Example

Here's a basic example of how to use the sidebar:

import 'package:flutter/material.dart';
import 'package:sidebar_widget/sidebar_widget.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
       final path = GoRouterState.of(context).uri.path;
    return MaterialApp(
      home: Scaffold(
        body:  SideBar(
            currentRoute: path,
            items: items,
            backgroundColor: Colors.black87,
            width: 250,
            onRouteSelected: (route) {
              context.goNamed(route);
              print('Navigate to: $route');
            },
          ),
      ),
    );
  }
}

final List<dynamic> items = [
 

  NavigationItem(
    title: 'item1',
    icon: Icons.dashboard,
    route: RouteNames.dashboard,
    
  ),
  // Widget 
  Divider(),
    NavigationItem(
    title: 'item2',
    icon: Icons.dashboard,
    route: '/item-route'
      navItemOnTap: () {
      print('tap')
    },
    
  ),

  NavigationItem(
    title: 'subitem1',
    icon: Icons.school,
    route: RouteNames.students,
    subItems: [
      Subitem(title: 'subitem2', route: 'RouteNames.subitem1'),
      Subitem(title: 'subitem3', icon: Icons.assignment, route: 'RouteNames.subitem2'),
    
    ],
  ),
  // next widgt 
  Container(child : Text('Widget1'))

];