Beyond Flutter

A reusable Flutter component library with responsive navigation and more.

Features

Responsive Navigation

A navigation component that automatically adapts between mobile and desktop layouts:

• Desktop: Vertical NavigationRail on the left side
• Mobile: Horizontal BottomNavigationBar at the bottom

Installation

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

dependencies:
  beyond_flutter:
    git:
      url: https://github.com/azukaar/beyond-flutter.git

Usage

Basic Example

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ResponsiveNavigation(
      destinations: [
        NavigationDestination(
          icon: Icons.home,
          label: 'Home',
          content: HomePage(),
        ),
        NavigationDestination(
          icon: Icons.chat,
          label: 'Conversations',
          content: ConversationsPage(),
        ),
        NavigationDestination(
          icon: Icons.person,
          label: 'Account',
          content: AccountPage(),
        ),
      ],
    );
  }
}

Advanced Configuration

ResponsiveNavigation(
  destinations: destinations,
  mobileBreakpoint: 600, // Custom breakpoint
  initialIndex: 0,
  selectedColor: Colors.deepPurple,
  unselectedColor: Colors.grey,
  railLabelType: NavigationRailLabelType.all,
  onDestinationSelected: (index) {
    print('Navigation to: $index');
  },
  railLeading: FlutterLogo(), // Desktop only
  railTrailing: Expanded(
    child: Align(
      alignment: Alignment.bottomCenter,
      child: Padding(
        padding: EdgeInsets.only(bottom: 8.0),
        child: IconButton(
          icon: Icon(Icons.logout),
          onPressed: () {},
        ),
      ),
    ),
  ),
)

Hide Destinations on Specific Platforms

NavigationDestination(
  icon: Icons.settings,
  label: 'Settings',
  content: SettingsPage(),
  showOnMobile: false, // Only show on desktop
  showOnDesktop: true,
)

API Reference

ResponsiveNavigation

Parameter	Type	Default	Description
destinations	List<NavigationDestination>	required	List of navigation destinations
mobileBreakpoint	double	600	Breakpoint width for mobile/desktop switch
initialIndex	int	0	Initial selected destination index
onDestinationSelected	ValueChanged<int>?	null	Callback when destination changes
backgroundColor	Color?	null	Navigation background color
selectedColor	Color?	null	Selected item color
unselectedColor	Color?	null	Unselected item color
railLabelType	NavigationRailLabelType	all	Label display type for desktop rail
railLeading	Widget?	null	Leading widget for desktop rail
railTrailing	Widget?	null	Trailing widget for desktop rail

NavigationDestination

Parameter	Type	Default	Description
icon	IconData	required	Icon for the destination
label	String	required	Label text
content	Widget	required	Content widget to display
showOnDesktop	bool	true	Show on desktop layout
showOnMobile	bool	true	Show on mobile layout

Example App

Run the example app to see the component in action:

cd example
flutter run

Resize the window to see the navigation adapt between mobile and desktop layouts!

License

MIT