quick_navbar 1.2.0 copy "quick_navbar: ^1.2.0" to clipboard
quick_navbar: ^1.2.0 copied to clipboard

quick_navbar is a quick, easy-to-use package to allow you to create simple but stylish bottom (or side) navigation bars.

example/lib/main.dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        useMaterial3: true,
        brightness: Brightness.light,
      ),
      darkTheme: ThemeData(
        useMaterial3: true,
        brightness: Brightness.dark,
      ),
      themeMode: ThemeMode.system,
      home: QuickNavBar(items: [
        QuickNavBarItem(
            label: "Home",
            icon: Icons.home_outlined,
            selectedIcon: Icons.home,
            widget: const HomePage(),
            onPressed: () {
              debugPrint("Page 1: Home navigated to");
            }),
        QuickNavBarItem(
            label: "Search",
            icon: Icons.search_outlined,
            selectedIcon: Icons.search,
            widget: const SearchPage(),
            onPressed: () {
              debugPrint("Page 2: Search navigated to");
            }),
        QuickNavBarItem(
            label: "Settings",
            icon: Icons.settings_outlined,
            selectedIcon: Icons.settings,
            widget: const SettingsPage(),
            onPressed: () {
              debugPrint("Page 3: Settings navigated to");
            }),
      ], selectedColor: Colors.blue),
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return const Text("Home page");
  }
}

class SearchPage extends StatefulWidget {
  const SearchPage({super.key});

  @override
  State<SearchPage> createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  @override
  Widget build(BuildContext context) {
    return const Text("Search page");
  }
}

class SettingsPage extends StatefulWidget {
  const SettingsPage({super.key});

  @override
  State<SettingsPage> createState() => _SettingsPageState();
}

class _SettingsPageState extends State<SettingsPage> {
  @override
  Widget build(BuildContext context) {
    return const Text("Settings page");
  }
}
0
likes
160
points
63
downloads

Publisher

verified publishercalebh101.com

Weekly Downloads

quick_navbar is a quick, easy-to-use package to allow you to create simple but stylish bottom (or side) navigation bars.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on quick_navbar