adaptive_navigation_view 1.1.0

A Flutter package for creating adaptive navigation views that seamlessly adapt to different platforms and devices.

Adaptive Navigation View

This package provides an adaptive navigation view for Flutter applications. The navigation view adapts to different platforms and devices, offering a consistent and customizable user experience.

Features

• Platform Adaptability: Seamlessly adapts to different platforms like Android, iOS, macOS, Linux, and Windows.
• Responsive Design: Offers a responsive design that works well on various screen sizes and orientations.
• Customizable: Easily customize the appearance and behavior of the navigation view to suit your application's needs.

Preview Images

Installation

To get started with adaptive_navigation_view, follow these simple steps:

1. Add the package to your pubspec.yaml file:

   dependencies:
     adaptive_navigation_view: ^version_number
   

   OR

   dependencies:
   adaptive_navigation_view:
       git: https://github.com/GenildoNogueira/adaptive_navigation_view.git
   

2. Run flutter pub get in your terminal.

3. Import the package in your Dart code:

   import 'package:adaptive_navigation_view/adaptive_navigation_view.dart';
   

4. Start using the adaptive navigation view in your application!

Usage

Here's a quick example of how to integrate the AdaptiveNavigationView into your Flutter app:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: NavigationView(
        appBar: NavigationAppBar(
          title: const Text('Navigation View Example'),
        ),
        pane: NavigationPane(
          onDestinationSelected: (value) => setState(() {
            _selectedIndex = value;
          }),
          selectedIndex: _selectedIndex,
          children: const [
            PaneItemDestination(
              icon: Icon(Icons.home),
              label: Text('Home'),
            ),
            PaneItemDestination(
              icon: Icon(Icons.person),
              label: Text('Profile'),
            ),
          ],
        ),
        body: [
          const Center(
            child: Text('Home'),
          ),
          const Center(
            child: Text('Profile'),
          ),
        ][_selectedIndex],
      ),
    );
  }
}

Theming

Pane Theme

The PaneThemeData class defines default property values for descendant NavigationPane widgets. It includes various properties for customizing the appearance of PaneItemDestination elements.

Example of creating a PaneItemThemeData:

PaneThemeData myPaneTheme = const PaneThemeData(
  elevation: 0,
  openWidth: 250,
  compactWidth: 60,
  indicatorSize: Size.fromHeight(40.0),
);

Right-to-Left Language Support (RTL)

The NavigationView provides support for right-to-left (RTL) languages, ensuring a consistent and intuitive user experience for users who use RTL languages.

Enabling RTL Support

To enable RTL language support in the NavigationView, follow these steps:

1. Ensure that your application's texts and resources are prepared for RTL languages, with appropriate layouts.

2. In your Flutter application, configure the supported locales to include RTL languages. For example:

MaterialApp(
  supportedLocales: [
    const Locale('en', 'US'), // English (left to right)
    const Locale('ar', 'AR'), // Arabic (right to left)
  ],
)

3. The NavigationView will automatically detect the current language of the device and adjust its layout to support RTL when necessary.

Preview Images

Painel Minimal

Painel Medium

Painel Expanded

Acknowledgements

This package is based on the principles and guidelines outlined in the Material 3 Documentation.