Añadiendo una sombra en la parte superior de una appbar en Flutter.

Estoy teniendo dificultades para agregar una sombra en la parte superior de la AppBar, he agregado una en la parte inferior pero no en la parte superior. Aquí está el diseño que estoy tratando de igualar:

He definido explícitamente los detalles de la barra de estado del sistema en AppBarTheme como blanco:

systemOverlayStyle: SystemUiOverlayStyle( statusBarIconBrightness: Brightness.dark, statusBarBrightness: Brightness.dark, statusBarColor: Colors.white.withOpacity(0.0)),

y he insertado todo el scaffold en el SafeArea:

Widget build(BuildContext context) => GestureDetector( onTap: () => FocusScope.of(context).unfocus(), child: SafeArea( child: Scaffold( appBar: PreferredSize( preferredSize: Size.fromHeight(256), child: Container( // contenedor adicional para sombras personalizadas decoration: BoxDecoration( boxShadow: [ BoxShadow( color: Colors.black.withOpacity(0.5), spreadRadius: 6, blurRadius: 6, offset: Offset(0, -4), ), ], ), child: AppBar(...), ), ), ... ), ), );

Además, por cierto, agregué un borde redondeado en la parte superior para poder ver qué estaba sucediendo:

Observa que hay una sombra, pero está debajo de la barra de estado. Supongo que lo que estoy tratando de lograr es colocar la barra de estado detrás de la barra de aplicaciones… o al menos hacer que parezca así (con una sombra reflejada en la parte superior de la barra de estado o algo similar).

¿Cómo resolverías esto? ¿hay algún StatusBarTheme o algo similar para este propósito?

davy.ai

July 29, 2023 at 7:57 pm

Para agregar una sombra en la parte superior de la AppBar, puedes añadir un Container adicional con una BoxDecoration para la sombra superior. Aquí está el código modificado:

Widget build(BuildContext context) {
  return GestureDetector(
    onTap: () => FocusScope.of(context).unfocus(),
    child: SafeArea(
      child: Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(256),
          child: Stack(
            children: [
              Container(
                decoration: BoxDecoration(
                  color: Colors.white.withOpacity(0.0),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.5),
                      spreadRadius: 6,
                      blurRadius: 6,
                      offset: Offset(0, 4),
                    ),
                  ],
                ),
              ),
              Container(
                decoration: BoxDecoration(
                  color: Colors.white.withOpacity(0.0),
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(24),
                    topRight: Radius.circular(24),
                  ),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.5),
                      spreadRadius: 6,
                      blurRadius: 6,
                      offset: Offset(0, -4),
                    ),
                  ],
                ),
                child: AppBar(
                  backgroundColor: Colors.white.withOpacity(0.0),
                  elevation: 0,
                  systemOverlayStyle: SystemUiOverlayStyle(
                    statusBarIconBrightness: Brightness.dark,
                    statusBarBrightness: Brightness.dark,
                    statusBarColor: Colors.white.withOpacity(0.0),
                  ),
                  ...
                ),
              ),
            ],
          ),
        ),
        ...
      ),
    ),
  );
}

Esto creará dos containers dentro de la AppBar: uno con la sombra inferior y otro con la sombra superior y bordes redondeados. También se deben ajustar las propiedades backgroundColor y elevation de la AppBar para mantener el diseño que estás tratando de lograr.

Además, se puede establecer systemOverlayStyle en Colors.white.withOpacity(0.0) para hacer transparente la barra de estado y permitir que el Container subyacente con la sombra superior se muestre.

¡Espero que esto te ayude!

es.davy.ai

¿Tienes una pregunta?

Añadiendo una sombra en la parte superior de una appbar en Flutter.

Answer

davy.ai