Hide Bottom Navigation Bar On Scroll Down In Flutter Android

admin_img Posted By Bajarangi soft , Posted On 17-09-2020

hide Bottom Navigation Bar on Scroll down in Flutter

Hide Bottom Navigation Bar On Scroll Down In Flutter Android

Complete Code FOr  Bottom Navigation Bar On Scroll Down In Flutter
Main.dart

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

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  MyHomePageState createState() {
    return new MyHomePageState();
  }
}

class MyHomePageState extends State<MyHomePage> {
  String text = 'Home';
  ScrollController _scrollController;
  bool _visible = true;

  @override
  void initState() {
    super.initState();
    _scrollController = ScrollController();
    _scrollController.addListener(() {
      if (_scrollController.position.userScrollDirection == ScrollDirection.reverse) {
        setState(() => _visible = false);
      }

      if (_scrollController.position.userScrollDirection == ScrollDirection.forward) {
        setState(() => _visible = true);
      }
    });
  }

  _onTap(int index) {
    switch (index) {
      case 0:
        setState(() => text = 'Home');
        break;
      case 1:
        setState(() => text = 'Message');
        break;
      case 2:
        setState(() => text = 'Search');
        break;
      case 3:
        setState(() => text = 'Settings');
        break;
      default:
        setState(() => text = 'Home');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (context, boxScrolled) => [
          SliverAppBar(
            centerTitle: true,
            backgroundColor: Colors.indigo,
            title: Text("Hide BottomNavigation Bar"),
            pinned: true,
            floating: true,
            snap: false,
          ),
        ],
        body: ListView(
          controller: _scrollController,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(2.0),
              child: Image.asset("assets/images/slider5.jpg"),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Image.asset("assets/images/slider2.jpg"),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Image.asset("assets/images/slider3.jpg"),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Image.asset("assets/images/slider4.jpg"),
            ),
          ],
        ),
      ),
      bottomNavigationBar: !_visible
          ? SizedBox()
          : BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home, color: Colors.indigo,),
            title: Text("Home",style: TextStyle(color: Colors.indigo),),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.message),
            title: Text("Message"),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            title: Text("Search"),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            title: Text("Settings"),
          ),
        ],
        onTap: _onTap,
      ),
    );
  }
}

 

Related Post