Question 206270 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to hide appbar when scrolling

My project contains a main_section where I display a navBar and a body. Depending on the device, I am displaying an specific navBar.
My problem is that I need it to disappear when the user scrolls down.
How can I achieve this behaviour?

This is the code:

class MainPage extends StatefulWidget {
  const MainPage({Key? key}) : super(key: key);

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    App.init(context);
    final drawerProvider = Provider.of<DrawerProvider>(context);

    return Scaffold(
      key: drawerProvider.key,
      extendBodyBehindAppBar: true,
      drawer: !Responsive.isDesktop(context) ? const _MobileDrawer() : null,
      body: SafeArea(
        child: Stack(
          children: [
            const _Body(),
            const ArrowOnTop(),
            Responsive.isTablet(context) || Responsive.isMobile(context)
                ? const _NavBarTablet()
                : const _NavbarDesktop(),
          ],
        ),
      ),
    );
  }
}
Tags:

2

Answers


  1. 0

    You can do whatever you want using NestedScrollView and SliverAppBar.

    You can add SliverAppBar to the headerSliverBuilder property of the NestedScrollView widget and other widgets you want to appear on the body property.

    Scaffold(
    body: NestedScrollView(
      headerSliverBuilder: (context, innerBoxIsScrolled) {
        return [
          const SliverAppBar(
            title: Text('text'),
          ),
        ];
      },
      body: const SingleChildScrollView(
        child: Column(
          children: [
            FlutterLogo(size: 512),
            FlutterLogo(size: 512),
          ],
        ),
      ),
    ),
  ),
    Login or Signup to reply.
  2. 0

    You can add appbar widget data in form of row in body section.

    Sample code for this:

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

  @override
  State<Demo> createState() => _DemoState();
}



class _DemoState extends State<Demo> {
  @override
  Widget build(BuildContext context) {
  double safePadding = MediaQuery.of(context).padding.top;

  // safePandding is use for find the size of safeArea for device

  return Scaffold(
   body: Padding(
     padding: EdgeInsets.only(top: safePadding),
     child: Column(
       children: [
         Row(
           children: [
             // You can add your App bar data here in form of Row
           ],
         )
       ],
     ),
   ),
 );
}
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search