๐Ÿš€ flutter_quick_nav

flutter_quick_nav is a lightweight Flutter navigation utility that simplifies screen transitions using clean and intuitive methods. It provides smooth built-in animations like fade, slide, scale, and rotate, and streamlines navigation with simple API calls like push, replace, and pushAndRemoveUntil.

Pub Version


๐Ÿ“ฝ Demo

See the navigation in action:

FlutterQuickNav Demo


โœจ Features

  • ๐Ÿš€ Navigate to a new screen with custom transitions
  • ๐Ÿ” Replace the current screen.
  • ๐Ÿงน Push and remove all previous routes (with optional named route)
  • ๐ŸŽ›๏ธ Choose from fade, slideLeft, slideRight, slideUp, slideDown, scale, or rotate transitions
  • โฑ๏ธ Customize transition duration and animation curve
  • ๐Ÿงผ Clean, easy-to-use API
  • ๐Ÿ’ฏ Null safe

๐Ÿš€ Screenshots

Note: This package affects screen transitions only, not UI layout.


๐Ÿ”ง Installation

1. Depend on it

Add this to your packageโ€™s pubspec.yaml file:

dependencies:
  flutter_quick_nav: ^1.0.2

2. Install it

Run either of the following commands in your terminal:

  flutter pub get

3. Import it

  import 'package:flutter_quick_nav/flutter_quick_nav.dart';

๐Ÿ”น Quick Usage

โž• Push a new screen

  FlutterQuickNav.push(context, const SecondPage());

๐Ÿ” Replace the current screen

  FlutterQuickNav.replace(context, const FinalPage());

๐Ÿงน Push and remove all previous screens

  FlutterQuickNav.pushAndRemoveUntil(context,const HomePage());

๐Ÿ“› Push and remove until a named route

  FlutterQuickNav.pushAndRemoveUntil(context,const HomePage(),untilRoute: '/home',);

๐ŸŽ›๏ธ With transition type, duration, and curve

 FlutterQuickNav.push(
  context,
  const SettingsPage(),
  type: TransitionType.slideUp,
  duration: const Duration(milliseconds: 500),
  curve: Curves.easeInOut,
);

โœจ Supported Transitions

Transition Type Description
fade Fades between screens
slideLeft Slides in from the right
slideRight Slides in from the left
slideUp Slides in from the bottom
slideDown Slides in from the top
scale Zoom in/out scale transition
rotate Rotates the new screen in

๐Ÿง‘โ€๐Ÿ’ป Usage Example

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

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'flutter_quick_nav Example',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
        useMaterial3: true,
      ),
      home: const HomePage(),
      // routes: {'/home': (context) => const HomePage()}, // Optional
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('๐Ÿ  Home Page'), centerTitle: true),
      body: Center(
        child: ElevatedButton.icon(
          onPressed: () => FlutterQuickNav.push(context, const SecondPage()),
          icon: const Icon(Icons.arrow_forward_rounded),
          label: const Text('Go to Second Page'),
          style: _buttonStyle(),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('๐Ÿงญ Second Page'), centerTitle: true),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton.icon(
              onPressed: () =>
                  FlutterQuickNav.replace(context, const FinalPage()),
              icon: const Icon(Icons.auto_awesome),
              label: const Text('Replace with Final Page'),
              style: _buttonStyle(background: Colors.deepPurple),
            ),
            const SizedBox(height: 20),
            ElevatedButton.icon(
              onPressed: () => FlutterQuickNav.pushAndRemoveUntil(
                context,
                const HomePage(),
              ),
              icon: const Icon(Icons.home_rounded),
              label: const Text('Reset to Home'),
              style: _buttonStyle(background: Colors.green),
            ),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('๐ŸŽฏ Final Page'), centerTitle: true),
      body: const Center(
        child: Text(
          '๐ŸŽ‰ You made it to the final page!',
          style: TextStyle(fontSize: 20, fontWeight: FontWeight.w600),
          textAlign: TextAlign.center,
        ),
      ),
    );
  }
}

ButtonStyle _buttonStyle({Color background = Colors.indigo}) {
  return ElevatedButton.styleFrom(
    padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(16),
    ),
    elevation: 4,
    backgroundColor: background,
    foregroundColor: Colors.white,
  );
}

๐Ÿ“ฆ Null Safety

This package is 100% null-safe and compatible with the latest Flutter versions.

๐Ÿ’ก Contribution

Contributions, issues, and feature requests are welcome! Feel free to open an issue or submit a pull request.

๐Ÿ“„ License

This project is licensed under the MIT License โ€” see the LICENSE file for details.

๐Ÿ™Œ Support

If you like this package, don't forget to give it a โญ on GitHub and share it with others!

Libraries

flutter_quick_nav