hide_scroll_navbar 1.0.1
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.
🧑💻 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,
),
);
}
}