Hiding and Showing BottomNavidationBar in Flutter Scrollable Widgets

toggle_bottom_navigation_bar.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

const List<String> photos = [
  'https://wallpapershome.com/images/pages/ico_h/23954.jpeg',
  'https://wallpapershome.com/images/pages/ico_h/23959.jpg',
  'https://wallpapershome.com/images/pages/ico_h/23952.jpeg',
  'https://wallpapershome.com/images/pages/ico_h/23348.jpg',
  'https://wallpapershome.com/images/pages/ico_h/23938.jpeg',
  'https://wallpapershome.com/images/pages/ico_h/20445.jpg',
  'https://wallpapershome.com/images/pages/ico_h/23737.jpg',
  'https://wallpapershome.com/images/pages/ico_h/23725.jpg',
  'https://wallpapershome.com/images/pages/ico_h/23717.jpg',
  'https://wallpapershome.com/images/pages/ico_h/23274.jpg',
];

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

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Wallpix',
      theme: ThemeData.dark(),
      home: const HomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool showBottomNav = true;
  ScrollController controller = ScrollController();

  /// way 1
  bool onNotification(UserScrollNotification notification) {
    ScrollDirection direction = notification.direction;
    if (direction == ScrollDirection.reverse) {
      showBottomNav = false;
    } else if (direction == ScrollDirection.forward) {
      showBottomNav = true;
    }
    setState(() {});
    return false;
  }

  /// way 2
  void withScrollController() {
    controller.addListener(() {
      setState(() {
        showBottomNav = controller.position.userScrollDirection == ScrollDirection.forward;
      });
    });
  }

  //
  @override
  void initState() {
    super.initState();

    /// way 2
    // withScrollController();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true,
      appBar: appBar(),
      body: body(),
      bottomNavigationBar: bottomNavigationBar(),
    );
  }

  //
  AppBar appBar() => AppBar(
        title: const Text('Wallpix'),
        centerTitle: true,
      );
  //
  Widget body() => NotificationListener<UserScrollNotification>(
        /// way 1
        onNotification: onNotification,
        child: GridView.builder(
          /// way 2
          // controller: controller,
          itemCount: photos.length,
          padding: const EdgeInsets.all(8),
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            crossAxisSpacing: 4,
            mainAxisSpacing: 4,
          ),
          itemBuilder: (context, index) => Card(
            clipBehavior: Clip.antiAlias,
            child: Image.network(
              photos[index],
              fit: BoxFit.cover,
            ),
          ),
        ),
      );
  //
  Widget bottomNavigationBar() => AnimatedSlide(
        offset: showBottomNav ? Offset.zero : const Offset(0, 2),
        duration: const Duration(milliseconds: 300),
        child: BottomNavigationBar(items: const [
          BottomNavigationBarItem(
            label: 'Home',
            icon: Icon(CupertinoIcons.home),
          ),
          BottomNavigationBarItem(
            label: 'Favorites',
            icon: Icon(CupertinoIcons.heart),
          ),
          BottomNavigationBarItem(
            label: 'Downloads',
            icon: Icon(CupertinoIcons.cloud_download),
          ),
        ]),
      );
}