hide_scroll_navbar 1.0.1 copy "hide_scroll_navbar: ^1.0.1" to clipboard
hide_scroll_navbar: ^1.0.1 copied to clipboard

A Flutter package that automatically hides the AppBar and BottomNavigationBar when scrolling down, and shows them again when scrolling up — with smooth fade and slide animations for a modern UI feel. [...]

🌈 hide_scroll_navbar

🚀 A Flutter package that automatically hides the AppBar & BottomNavigationBar when scrolling down and shows them again when scrolling up — with smooth fade & slide animations for a modern UI feel.

Pub Version Stars Flutter


🧑‍💻 Developed by #

Kaish


🌟 Features #

  • 🧭 Auto hide & show AppBar and BottomNavigationBar on scroll
  • 💫 Smooth fade + slide animations
  • ⚙️ Customizable animation duration & curve
  • 🧱 Simple integration — just wrap your page with HideScrollNavbar
  • 🎨 Works with AppBar title, icons, and actions
  • 🔋 Lightweight & dependency-free

📦 Installation #

dependencies:
  hide_scroll_navbar: ^1.0.0


import 'package:flutter/material.dart';
import 'package:screenshot/screenshot.dart';
import 'package:hide_scroll_navbar/hide_scroll_navbar.dart';
import 'dart:io';
import 'package:path_provider/path_provider.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const ScreenshotDemo(),
    );
  }
}

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

  @override
  State<ScreenshotDemo> createState() => _ScreenshotDemoState();
}

class _ScreenshotDemoState extends State<ScreenshotDemo> {
  final ScreenshotController _screenshotController = ScreenshotController();
  int _currentIndex = 0;

  @override
  void initState() {
    super.initState();
    // delay screenshot capture if needed
    Future.delayed(const Duration(seconds: 2), () => _captureScreenshot("show.png"));
  }

  Future<void> _captureScreenshot(String fileName) async {
    final directory = await getApplicationDocumentsDirectory();
    final path = '${directory.path}/$fileName';

    _screenshotController.capture(delay: const Duration(milliseconds: 500)).then((image) {
      if (image != null) {
        File(path).writeAsBytesSync(image);
        debugPrint('Screenshot saved: $path');
      }
    });
  }

  final List<Widget> _pages = List.generate(
    3,
    (index) => ListView.builder(
      padding: const EdgeInsets.all(8),
      itemCount: 50,
      itemBuilder: (context, i) => Card(
        child: ListTile(
          leading: Icon(Icons.star_border, color: Colors.deepPurple),
          title: Text("Item #$i in Page ${index + 1}"),
          subtitle: const Text("Scroll down to hide bars..."),
        ),
      ),
    ),
  );

  @override
  Widget build(BuildContext context) {
    return Screenshot(
      controller: _screenshotController,
      child: HideScrollNavbar(
        appBar: AppBar(
          title: const Text("Hide Scroll Navbar"),
          actions: const [Icon(Icons.notifications_none)],
        ),
        body: _pages[_currentIndex],
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: "Home"),
          BottomNavigationBarItem(icon: Icon(Icons.search), label: "Search"),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: "Profile"),
        ],
        currentIndex: _currentIndex,
        onTap: (index) => setState(() => _currentIndex = index),
        animationDuration: const Duration(milliseconds: 400),
        animationCurve: Curves.easeInOutCubic,
      ),
    );
  }
}


6
likes
120
points
35
downloads

Documentation

API reference

Publisher

unverified uploader

Weekly Downloads

A Flutter package that automatically hides the AppBar and BottomNavigationBar when scrolling down, and shows them again when scrolling up — with smooth fade and slide animations for a modern UI feel. Developed with by Kaish.

Homepage
Repository (GitHub)

License

unknown (license)

Dependencies

flutter

More

Packages that depend on hide_scroll_navbar