Uso showRoundedModalBottomSheet, ¿cómo ajustar esta altura modal hasta debajo de la barra de aplicaciones?

enter image description here

13
RIFAL 15 nov. 2018 a las 05:26

4 respuestas

La mejor respuesta

[Actualización]

En showModalBottomSheet(...) establece la propiedad isScrollControlled:true.

Hará bottomSheet a la altura completa.


[Respuesta original]

Puede implementar el FullScreenDialog en su lugar.

La aplicación Flutter Gallery tiene un ejemplo de FullScreenDialog

Puede abrir su cuadro de diálogo con el siguiente código:

Navigator.of(context).push(new MaterialPageRoute<Null>(
      builder: (BuildContext context) {
        return Dialog();
      },
    fullscreenDialog: true
  ));

Consulte este blog publique también para obtener más información:

Espero que te ayude.

21
Aziz 30 oct. 2019 a las 12:33

Si llama a showModalBottomSheet() con isScrollControlled: true, el diálogo podrá ocupar toda la altura.

Para ajustar la altura al contenido, puede proceder como de costumbre, por ejemplo, utilizando los widgets Container y Wrap.

Ejemplo:

final items = <Widget>[
  ListTile(
    leading: Icon(Icons.photo_camera),
    title: Text('Camera'),
    onTap: () {},
  ),
  ListTile(
    leading: Icon(Icons.photo_library),
    title: Text('Select'),
    onTap: () {},
  ),
  ListTile(
    leading: Icon(Icons.delete),
    title: Text('Delete'),
    onTap: () {},
  ),
  Divider(),
  if (true)
    ListTile(
      title: Text('Cancel'),
      onTap: () {},
    ),
];

showModalBottomSheet(
  context: context,
  builder: (BuildContext _) {
    return Container(
      child: Wrap(
        children: items,
      ),
    );
  },
  isScrollControlled: true,
);
3
jose.angel.jimenez 16 ago. 2019 a las 12:13

Supongo que la forma más fácil es:

showModalBottomSheet(
      isScrollControlled: true,
      context: context,
      builder: (context) => Wrap(children: [YourSheetWidget()]),
    );
2
Andrey 31 oct. 2019 a las 13:37
  1. Abre la clase BottomSheet en la biblioteca de flutter y cambia maxHeight

De

BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
return BoxConstraints(
  minWidth: constraints.maxWidth,
  maxWidth: constraints.maxWidth,
  minHeight: 0.0,
  maxHeight: constraints.maxHeight * 9.0 / 16.0
);}

Para

BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
return BoxConstraints(
  minWidth: constraints.maxWidth,
  maxWidth: constraints.maxWidth,
  minHeight: 0.0,
  maxHeight: constraints.maxHeight
);}
  1. Puede crear una nueva clase con otro nombre y copiar el código fuente de la clase BottomSheet y cambiar maxHeight
7
Bé Tập Code 3 ene. 2019 a las 03:40