es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

(Flutter) ¿Es posible hacer transparente la bottomSheet de Scaffold?

28 May, 2023 Programación

Recientemente desarrollé una vista de comentarios debajo de los detalles de las publicaciones.

Como se puede ver en la imagen adjunta, me gustaría mostrar imágenes para cada comentario, pero el contenedor de imágenes debe ser transparente para ver el último comentario.

Pero creo que Scaffold no permite que el bottomSheet tenga hijos transparentes.

¿Alguien tiene alguna idea para resolver este problema?

class PostDetail extends StatelessWidget {
  final int maxRenderImgCnt = 4;
  final Post post;

  PostDetail(this.post);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CustomAppBar( ... ),
      body: SingleChildScrollView( ... ),
      bottomSheet: CommonTextField(onTap: null, editTarget: null),
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para hacer que el contenedor de la imagen sea transparente en el bottomSheet del Scaffold, puedes intentar usar un widget Stack con dos capas. La primera capa contendrá el contenedor de la imagen transparente y la segunda capa contendrá la vista de comentarios. Puedes utilizar el widget Positioned para posicionar la vista de comentarios sobre el contenedor de la imagen transparente.

    Aquí tienes un ejemplo de código para empezar:

    class DetallePublicación extends StatelessWidget {
  final int maxRenderImgCnt = 4;
  final Publicación publicación;

  DetallePublicación(this.publicación);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CustomAppBar( ... ),
      body: SingleChildScrollView( ... ),
      bottomSheet: Stack(
        children: [
          Container(
            decoration: BoxDecoration(
              color: Colors.black.withOpacity(0.5),
              // establece el color y la opacidad del contenedor de la imagen
            ),
            child: Image.network(
              publicación.imageUrl,
              fit: BoxFit.cover,
              // establece las propiedades de la imagen
            ),
          ),
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            child: CommonTextField(onTap: null, editTarget: null),
            // añade aquí la vista de comentarios
          ),
        ],
      ),
    );
  }
}

    En este ejemplo, la primera capa del widget Stack contiene un contenedor transparente con un color negro semi-transparente, lo que creará una capa oscura sobre la imagen. Puedes ajustar la opacidad y el color de este contenedor a tu gusto.

    La segunda capa contiene la vista de comentarios envuelta en un widget Positioned, que se coloca en la parte inferior del stack para superponer el contenedor de la imagen transparente.

    Usando el widget Stack y el widget Positioned, puedes crear una interfaz con capas y elementos transparentes en Flutter.

Comments are closed.