Tengo el diseño (que se muestra en la foto) y estoy usando showModalBottomSheet, pero cuando configuro el ancho, no cambia y permanece como el ancho de la pantalla, así que tengo un par de preguntas:

1-cómo establecer un ancho para mostrarModalBottomSheet
2-¿Existe una alternativa a showModalBottomSheet para este tipo de menú inferior?
3-como desenfocar el fondo como se muestra en la foto

showModalBottomSheet<void>(
          context: context,
          builder: (BuildContext context) {
            return Container(
              height: SizeConfig.screenHeight * 0.6,
              width: 30,
              color: Colors.red,
              child: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    const Text('Modal BottomSheet'),
                    ElevatedButton(
                      child: const Text('Close BottomSheet'),
                      onPressed: () => Navigator.pop(context),
                    )
                  ],
                ),
              ),
            );
          },
        );

enter image description here

1
anwar 22 ene. 2021 a las 14:21

1 respuesta

La mejor respuesta

Resolví este problema colocando un contenedor dentro de un contenedor.
el contenedor principal tiene un color transparente, mientras que el secundario tiene un color sólido y relleno. PERO TODAVÍA no descubrí cómo desenfocar el fondo todavía.
este es el código:

showModalBottomSheet(
            context: context,
            backgroundColor: Colors.transparent,
            builder: (BuildContext bc) {
              return Container(
                height: SizeConfig.screenHeight * 0.6,
               
                child: Padding(
                  padding: EdgeInsets.only(left: SizeConfig.screenWidth * 0.4),
                  child: Container(
                  
                    child: SingleChildScrollView(
                      child:
                        
                          Padding(
                        padding: EdgeInsets.only(
                            top: SizeConfig.blockSizeVertical * 1.5),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          mainAxisSize: MainAxisSize.min,
                          children: <Widget>[
                            
                          ],
                        ),
                      ),
                     
                    ),
                  ),
                ),
              );
            });
1
anwar 22 ene. 2021 a las 15:26