Skip to main content

​
Requirements

NavigationUtils requires:
  • Flutter SDK: 3.10.0 or higher
  • Dart SDK: 2.17.1 or higher
NavigationUtils supports all Flutter platforms:
  • Android
  • iOS
  • Web
  • macOS
  • Windows
  • Linux

​
Install from pub.dev

1

Add dependency

Add NavigationUtils to your pubspec.yaml:
pubspec.yaml
dependencies:
  navigation_utils: ^0.9.11
Or run this command in your terminal:
flutter pub add navigation_utils
2

Install packages

Get the package:
flutter pub get
3

Import the package

Import NavigationUtils in your Dart files:
import 'package:navigation_utils/navigation_utils.dart';

​
Verify installation

Create a minimal app to verify NavigationUtils is working:
main.dart
import 'package:flutter/material.dart';
import 'package:navigation_utils/navigation_utils.dart';

void main() {
  NavigationManager.init(
    mainRouterDelegate: DefaultRouterDelegate(
      navigationDataRoutes: [
        NavigationData(
          url: '/',
          builder: (context, routeData, globalData) => Scaffold(
            appBar: AppBar(title: const Text('NavigationUtils Works!')),
            body: const Center(child: Text('Installation successful')),
          ),
        ),
      ],
    ),
    routeInformationParser: DefaultRouteInformationParser(),
  );
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'NavigationUtils Test',
      routerDelegate: NavigationManager.instance.routerDelegate,
      routeInformationParser: NavigationManager.instance.routeInformationParser,
    );
  }
}
Run the app: 
flutter run
If you see “Installation successful”, NavigationUtils is ready to use!

​
Web-specific setup (optional)

For web apps, you may want to use path-based URLs instead of the default hash-based URLs. Add the flutter_web_plugins dependency:
pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  navigation_utils: ^0.9.11
  flutter_web_plugins:
    sdk: flutter
Then configure the URL strategy in your main() function:
main.dart
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_web_plugins/url_strategy.dart';
import 'package:navigation_utils/navigation_utils.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  
  // Enable path-based URLs for web
  if (kIsWeb) {
    usePathUrlStrategy();
  }
  
  NavigationManager.init(
    mainRouterDelegate: DefaultRouterDelegate(navigationDataRoutes: routes),
    routeInformationParser: DefaultRouteInformationParser(),
  );
  
  runApp(const MyApp());
}
This changes URLs from example.com/#/page to example.com/page. This is purely aesthetic - NavigationUtils works with both URL strategies.

​
Package information

pub.dev

View on pub.dev for version history and API docs

GitHub

Source code, issues, and contributions

Changelog

See what’s new in each version

Examples

Working examples including authentication flows

​
Migration from Navigator 1

If you’re migrating from Navigator 1, the good news is NavigationUtils reimplements the Navigator 1 API, so your navigation code will look very similar.

​
Before (Navigator 1)

// Define routes
MaterialApp(
  routes: {
    '/': (context) => HomePage(),
    '/projects': (context) => ProjectsPage(),
  },
  onGenerateRoute: (settings) {
    // Handle dynamic routes
  },
);

// Navigate
Navigator.of(context).pushNamed('/projects');
Navigator.of(context).pop();

​
After (Navigator 2 with NavigationUtils)

// Define routes
List<NavigationData> routes = [
  NavigationData(
    label: 'home',
    url: '/',
    builder: (context, routeData, globalData) => HomePage(),
  ),
  NavigationData(
    label: 'projects',
    url: '/projects',
    builder: (context, routeData, globalData) => ProjectsPage(),
  ),
];

// Initialize
void main() {
  NavigationManager.init(
    mainRouterDelegate: DefaultRouterDelegate(navigationDataRoutes: routes),
    routeInformationParser: DefaultRouteInformationParser(),
  );
  runApp(const MyApp());
}

// Use MaterialApp.router
MaterialApp.router(
  routerDelegate: NavigationManager.instance.routerDelegate,
  routeInformationParser: NavigationManager.instance.routeInformationParser,
);

// Navigate (no context needed!)
NavigationManager.instance.push('projects');
NavigationManager.instance.pop();
One major advantage: NavigationUtils doesn’t require BuildContext for navigation. Access it globally via NavigationManager.instance.

​
Next steps

Now that NavigationUtils is installed, follow the quickstart guide to build your first app:

Quickstart

Get up and running in 5 lines of code

Build docs developers (and LLMs) love

Get started for freeTalk to us