Barra de aplicaciones oculta en Flutter

La barra de aplicaciones oculta es la barra de aplicaciones, cuando estamos desplazando el cuerpo principal de la aplicación, la barra de aplicaciones también se desplaza y se oculta. No hay necesidad de agregar paquetes adicionales, simplemente usaremos el Widget NestedScrollView para lo mismo. A continuación se muestra un video de muestra para tener una idea de lo que vamos a hacer en este artículo.

Implementación paso a paso 

Después de crear un proyecto vacío, importe el paquete de materiales que se usará para crear widgets.

import 'package:flutter/material.dart';

En el método principal, llame a runApp. Y en runApp llame a la clase HiddenTopAppBar.

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

Ahora tenemos que crear un widget o clase con estado cuyo nombre sea MyApp. En la clase MyApp, devuelva MaterialApp y haga que el debugbanner sea falso. En la propiedad de inicio, llame al widget scaffold.

class HiddenTopAppBarState extends State<HiddenTopAppBar> {
 @override
 initState() {
   super.initState();
 }
  
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     debugShowCheckedModeBanner: false,
     home: Scaffold()

Ahora, en el cuerpo de Scaffold, use el widget NestedScrollView como se muestra en el siguiente código de ejemplo.

import 'package:flutter/material.dart';
  
// main function
void main() => runApp(HiddenTopAppBar());
  
class HiddenTopAppBar extends StatefulWidget {
  @override
  HiddenTopAppBarState createState() => new HiddenTopAppBarState();
}
  
class HiddenTopAppBarState extends State<HiddenTopAppBar> {
  
  @override
  initState() {
    super.initState();
  }
  
  @override
  Widget build(BuildContext context) {
    // MaterialApp 
    return MaterialApp(  
      debugShowCheckedModeBanner:false,
      // scaffold 
      home:Scaffold(  
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return [
            SliverAppBar(
              leading:Icon(Icons.wallpaper),
              title: Container(
                color:Colors.blue, 
                child:Text("Hidden AppBar")
              ),
              elevation: 10.0,
              automaticallyImplyLeading: false,
              expandedHeight:50,
              floating: true,
              snap: true,
            )
          ];
        },
        // list of images for scrolling
        body:  ListView(
          children: <Widget>[
            Text("Scroll Down To Hide The AppBar!"),
            Divider(),
            Image.asset("Images/S1.jpg"),
            Divider(),
            Image.asset("Images/S2.jpg"),       
            Divider(),
            Image.asset("Images/S3.jpg"),           
          ],
        ),
      ),
    ),
    );
  }
}

Producción:

Explicación 

• Main es el método principal utilizado para ejecutar HiddenTopAppBar .
• Creación de HiddenTopAppBar StatefulWidget debido a la detección del estado de desplazamiento.
• Creando la clase de estado HiddenTopAppBarState que extiende su estado principal desde la clase principal HiddenTopAppBar.
• Método initState utilizado para inicializar el estado de la página una vez cargada.
• Como Flutter se basa en widgets, se necesitaba crear un widget
• Aplicación de devolución de material que permite configurar el título y el conjunto de temas en Light de forma predeterminada y Scaffold -Scaffold nos permite configurar el cuerpo de la página.
• Como necesitamos ocultar AppBar, necesitamos usar NestedScrollView Tomando headerSliverBuilder que detecta el desplazamiento y devolviendo SliverAppBar.
• Ahora SliverAppBar se ocultará automáticamente cuando los usuarios se desplacen hacia abajo y reaparecerán cuando el usuario se desplace hacia arriba.
• SliverAppBar Tomando la altura, el título y el encabezado que muestran un ícono.
• NestedScrollView Toma como cuerpo un ListView tomando 3 imágenes separadas por divisor.